Horizontal Scrolling Div Onclick With Javascript Or Jquery

I have spent the last two days looking for a simple javascript or jquery code for this. I want to incorporate a horizontal scrolling div using javascript or jquery to display imag

Solution 1:

You can just use code like this:

functionFixMargin(left) {
    $(this).css("left", left);
}

$(document).ready(function () {

$('#rightbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});

$('#leftbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});

}

where your html looks like this:

<divid="slideleft"class="slide"><divclass="inner"id="bitToSlide"style="width:1842px"><tableborder="0"cellpadding="0"cellspacing="0"><trvalign="top"><tdid="page1"style="width: 614px"></td><tdid="page2"style="width: 614px"></td></tr></table></div></div>

and your css looks like this:

.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em0;
background-color:#E9ECEF;
border:0px
}

.slide.inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}

I wrote the above a really long time ago - so you probably want to update it a bit (replace the table's with div's for example) but it works.

You obviously need the two buttons on there as well

Solution 2:

There are a lot of jQuery plugins which allow you to do this very easily. For ex: http://slidesjs.com/

Hope this helps.

Solution 3:

You can do something like this. Not tested code but just giving you a hint.

<div id="imageContainer">
  <divid="imageWrapper"><img /><img /></div><spanid="left">Left</span><spanid="right">right</span>
</div>

var imageWidth = 200;
$("#left").click(function(){
  $("#imageWrapper").animate({marginLeft:"-="+imageWidth}, 500);
  //Offcourse you need to handle the corner cases when there is not image to move left
});

$("#right").click(function(){
  $("#imageWrapper").animate({marginLeft:"+="+imageWidth}, 500);
});

Solution 4:

You can have a look to iscroll 4.

http://cubiq.org/iscroll-4

You have a scrollTo method or scrollToElement method...