We help IT Professionals succeed at work.

Jquery animate to constraints of div

jameshuckabone
on
I have a website that has a horizontal slider and uses jquery to move it back and forth.  I know there are several existing sliders but I want it to function as simply as possible.  The problem I'm having is that I'm not sure how to add constraints to the function so that it stops being able to slide at a desired point.  Is there an easy way to do this (so that it's impossible to slide everything entirely off the page)?

http://www.newspainwines.com/test/
Comment
Watch Question

Sr. System Analyst
BRONZE EXPERT
Commented:
try:

#scrollbox{
      width: 3180; >>>> this number is 318 * number of divs
      height: 325px;
      position: relative;
}

then use this

<script>
$("#right").click(function(){//alert($("#scrollbox").position().left + " - " + $("#scrollbox").width());
      if ($("#scrollbox").position().left < 0) $("#scrollbox").animate({"left": "+=318px"}, "fast");
});

$("#left").click(function(){//alert($("#scrollbox").position().left + " - " + $("#scrollbox").width());
      if ($("#scrollbox").position().left > (- ( $("#scrollbox").width()-(318*4)))) $("#scrollbox").animate({"left": "-=318px"}, "fast");
});
</script>

change that 318*4 to 318*n where n=1,2,3,4 : min number of divs that you want to see on screen
adjust numbers if you wish...

Author

Commented:
Awesome, thanks so much!!!  Please check out what I've done with your great help!

http://www.newspainwines.com/test/

Explore More ContentExplore courses, solutions, and other research materials related to this topic.