Menu
I Want to scroll div contents using two buttons 
HTML Coding is given below:
<div class="bstimeslider">
<a href="#"> <img src="images/left.png" ></a>
<div class="tslshow">
<div class="bktibx"> 12:00 </div>
<div class="bktibx"> 12:30 </div>
<div class="bktibx"> 13:00 </div>
<div class="bktibx"> 13:30 </div>
<div class="bktibx"> 14:00 </div>
<div class="bktibx"> 14:30 </div>
<div class="bktibx"> 15:00 </div>
<div class="bktibx"> 15:30 </div>
<div class="bktibx"> 16:00 </div>
<div class="bktibx"> 16:30 </div>
<div class="bktibx"> 17:00 </div>
<div class="bktibx"> 17:30 </div>
</div>
<a href="#"><img src="images/right.png"></a>
Now only 15:00 is displaying when i scroll right button it should show from 15:30 to 17:30..
Similarly when i click left arrow it should scroll left..
Using Jquery i want to perform this. Any opensource plugin is available.
408
asked Dec 05 '14 10:12
In jQuery, we can make any element tag move horizontally using the built-in function scrollLeft() function for scrolling the scrollbar horizontally according to either the position which is set as the parameter or without setting the position which would specify the position in pixel number of the scrollbar.
The scrollLeft() method sets or returns the horizontal scrollbar position for the selected elements. Tip: When the scrollbar is on the far left side, the position is 0. When used to return the position: This method returns the horizontal position of the scrollbar for the FIRST matched element.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
To make div horizontally scrollable we have to use the x and y-axis properties. We have to set the overflow-y : hidden and make overflow-x:auto , this will hide the vertical scrollbar to hidden and make the div scroll horizontally.
It's just a simple example, but you can see the point - how to do it.
HTML:
<div class="bstimeslider">
<div id="rightArrow"></div>
<div id="viewContainer">
<div id="tslshow">
<div class="bktibx"> 12:00 </div>
<div class="bktibx"> 12:30 </div>
<div class="bktibx"> 13:00 </div>
<div class="bktibx"> 13:30 </div>
<div class="bktibx"> 14:00 </div>
<div class="bktibx"> 14:30 </div>
<div class="bktibx"> 15:00 </div>
<div class="bktibx"> 15:30 </div>
<div class="bktibx"> 16:00 </div>
<div class="bktibx"> 16:30 </div>
<div class="bktibx"> 17:00 </div>
<div class="bktibx"> 17:30 </div>
</div>
</div>
<div id="leftArrow"></div>
</div>
CSS:
.bstimeslider {
width:500px;
height:40px;
background:#ccc;
position:relative;
}
.bktibx {
float:left;
margin:0 40px 0 0 ;
font-size:18px;
width:60px;
display:block;
background:#000;
color:#fff;
}
#tslshow {
position:absolute;
left:0;
width:1200px;
}
#leftArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
left:0px;
}
#rightArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
right:0px;
}
#viewContainer {
width:360px;
height:100%;
background:#00ff00;
position:absolute;
left:50%;
margin-left:-180px;
overflow:hidden;
}
JavaScript:
var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750;
$("#rightArrow").click(function(){
var currentPosition = parseInt(view.css("left"));
if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})
});
$("#leftArrow").click(function(){
var currentPosition = parseInt(view.css("left"));
if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});
});
Fiddle: http://jsfiddle.net/yfqyq9a9/2/
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
