<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout test</title>
<meta name="viewport" content="width=device-width">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body ng-app="layoutTestApp">
<div id="content" ng-view></div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="controllers.js"></script>
<script src="directives.js"></script>
<script src="app.js"></script>
</body>
</html>
'use strict';
//###################Creating the controllers object to hold all the controlles###################
var controllers = {};
//####################################################
//###################START MainCtrl###################
controllers.MainCtrl = function($scope) {};
//###################END MainCtrl#####################
//####################################################
body{
margin-top: 60px;
background: #555;
overflow: hidden;
}
#content {
width: 100%;
min-height: 650px;
}
.wrapper {
min-height: 39.285714285714285em;
max-height: 39.285714285714285em;
overflow: hidden;
}
.left {
background: red;
height: 39.285714285714285em;
width: 21.428571428571427em;
position: relative;
float: left;
}
.right {
background: blue;
height: 39.285714285714285em;
width: 21.428571428571427em;
}
.center_wrap {
min-width: 70.92857142857143em;
}
.notes {
background: green;
min-height: 150px;
}
.center {
background: #5b9933;
min-height: 39.285714285714285em;
position: relative;
}
.border_right, .border_left {
height: 39.285714285714285em;
width: 7px;
background: #999;
border: 2px outset #ccc;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
cursor: pointer;
}
.border_right {
float: left;
}
.border_left {
float: right;
}
'use strict';
//####################################################
var myApp = angular.module('layoutTestApp', [])
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'view.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
//####################################################
//######injecting the dependencies####################
controllers.MainCtrl.$inject = ['$scope'];
//####################################################
//######assigning the controllers to the application##
myApp.directive(directives);
myApp.controller(controllers);
//####################################################
<div class="wrapper" ng-controller="MainCtrl">
<div class="pull-left">
<div class="border_left" slidable="left"></div>
<div class="left"></div>
</div>
<div class="pull-left center_wrap">
<div class="center"></div>
<div class="notes"></div>
</div>
<div class="pull-right">
<div class="border_right" slidable="right"></div>
<div class="right"></div>
</div>
</div>
'use strict';
//###################Creating the directives object to hold all the directives###################
var directives = {};
//####################################################
//###################START layout#####################
directives.slidable = function() {
return {
link: function(scope, elm, attrs) {
var leftIsClosed = 0;
var rightIsClosed = 0;
elm.on('click', function(){
var target = $('.' + attrs.slidable);
var counter = target.width();
if(counter != 0){
var interval = window.setInterval(function() {
counter -= 10;
target.width(counter);
$('.center_wrap').css("width", "+=10");
if(counter == 0) {
clearInterval(interval);
if(attrs.slidable == 'right'){
$('.center_wrap').css("width", "-=7");
}
}
}, 25);
}else{
var interval = window.setInterval(function() {
counter += 10;
target.width(counter);
$('.center_wrap').css("width", "-=10");
if(counter == 300) {
clearInterval(interval);
if(attrs.slidable == "right" && $('.left').width() == 0){
$('.center_wrap').css("width", "+=7");
}
}
}, 25);
}
});
}
};
};
//###################END layout#######################
//####################################################