I have to divide page into two parts with vertical line (some thing like slider and able to scroll horizontally across page). I have to perform some functions only on one side. I don't know how to do this. Could you please give me some ideas to do this?
Edited: Should be something like this
You might be looking for something like bg-splitter
Try this jsFiddle I just created -> https://jsfiddle.net/larsjueljens/tLq2t04a/8/
This is basically three divs:
<div class="left">
This is the left content
</div>
<div class="divider">
</div>
<div class="right">
This is the right content
</div>
Initial style:
.left {
position: fixed;
top: 0px;
left: 0px:
width: 200px;
bottom: 0px;
}
.divider {
position:fixed;
top: 0px;
left: 200px;
width: 20px;
bottom: 0px;
background-color: blue;
}
.right {
position: fixed;
top: 0px;
right: 0px;
left: 220px;
bottom: 0px;
}
Javascript code:
var isMouseDown = false,
leftContent = document.querySelector('.left'),
divider = document.querySelector('.divider'),
rightContent = document.querySelector('.right');
divider.addEventListener('mousedown', function (event) {
isMouseDown = true;
});
divider.addEventListener('mouseup', function (event) {
isMouseDown = false;
});
divider.addEventListener('mousemove', function (event) {
if (isMouseDown) {
leftContent.style.width = (event.clientX - 10) + 'px';
divider.style.left = (event.clientX - 10) + 'px';
rightContent.style.left = (event.clientX + 10) + 'px';
}
});
Bro, whatever you are asking has nothing to do with angular. This will be done by css property of overflow-y:auto;
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<style>
#div1{width:600px;background:yellow;height:60px;}
#div2{width:60%;background:green;overflow-y:auto;overflow-x:none;height:60px;}
#div3{width:40%;background:pink;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="div1">
<div id="div2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="div3"></div>
</div>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
//code here
});
</script>
</body>
</html>
