Search jQuery

jQuery Forum

stop "animate left" on div bounds

in Getting Started • 13 years ago

Hi all sorry if this is in the wrong section, let me know and i'll move it. I am new to javascript and indeed jquery but I have muddled a page together here but want to stop the left and right links at the bottom animating over my "contents" div's bounds so it doesn't slide past the edges of my div either way. Can i do this or am i barking up the wrong tree? Hopefully you will understand, I don't know if i am explaining myself correctly, but if you have a look at the page and press "Right" twice you will see what i mean, I don't want it to go any further than the end (red) or indeed further past than the start (green). Thanks for taking the time to read this.

My Code:

<html>
<head>
<style>
#contents{
position: relative;
top: 0;
left: 0;
width: 786px;
height: auto;
}
#scrollable{ overflow: hidden; width: 786px; height: 500px; border: 1px
solid black;}
</style>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".leftpush").click(function(){
$("#contents").animate({left: "+=786"}, 1200)
return false;
});
});
$(document).ready(function(){
$(".rightpush").click(function(){
$("#contents").animate({left: "-=786"}, 1200)
return false;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="scrollable">
<div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="776" valign="top" bgcolor="#00FF00"><p>Lorem ipsum dolor sit amet, elit tempor convallis, viverra cursus pede iaculis bibendum suspendisse turpis. Erat morbi imperdiet nisl. Blandit augue ac eget, ut nascetur. Faucibus non auctor iaculis quis luctus quam, maecenas non nunc, justo in placerat. Mus sem dui consequat at, vel ad mollis porta nibh tempus quis, per quis. At urna, felis id lorem molestie dignissim libero, velit aliqua ut nec venenatis sed. Suspendisse iaculis lectus tincidunt consequat viverra mattis, odio mattis quis molestie erat ultricies, eget ac eu erat mi, ut mauris in vehicula commodo vestibulum. Pellentesque vitae placerat inceptos sit, accumsan sodales amet et fames aliquam. Placerat duis vestibulum a montes ut orci, feugiat porta neque auctor dui. Accumsan ut ratione, sed massa integer a enim, felis parturient. Tincidunt sed et lobortis, viverra cursus, velit duis ac libero in, suscipit ultrices, sit et quam sit sit dolor.</p>
<p>Vel sed quam, elit viverra libero non ut, sagittis semper ultrices maecenas, augue etiam justo eget, sed luctus non odio ut. Laoreet feugiat tincidunt fames curabitur, venenatis vitae, aliquet pede ut amet nonummy nascetur ut, vitae id nunc phasellus sed. Nisl molestie pulvinar semper, nascetur interdum diam a qui. Lectus odio luctus posuere lobortis, nunc nec egestas mattis nunc congue elit. Non dis arcu ac blandit, duis vitae quis turpis, urna dolor non nullam praesent elit quis, vel nullam vitae pulvinar habitasse fusce, sed pellentesque. Nulla nullam qui lacus accumsan consectetuer, ante sit massa ut mauris laoreet.<br />
</p></td>
<td width="776" valign="top" bgcolor="#FF0000"><p>Lorem ipsum dolor sit amet, et nunc arcu, pede non, eget faucibus pretium ut eget gravida odio. Varius molestie sociosqu purus semper, ac nulla eget per, veniam condimentum volutpat quis, sit auctor cras vitae diam quis elementum, nonummy risus varius dui quis dictum dolor. Pellentesque eu turpis, aliquam at duis. Vitae augue praesent mauris sociis est proin, wisi nam convallis et nec vel ligula, mollis arcu metus vel lacus. Nec ultricies neque praesent cubilia vestibulum scelerisque, sed sit dictumst cum viverra, luctus aut elit parturient. Vestibulum vehicula enim, ultricies lectus turpis lobortis, pellentesque wisi tincidunt interdum vestibulum, convallis erat maecenas suspendisse. Cursus volutpat, sollicitudin lorem, wisi vel consequat eu eros non, libero eros bibendum, magna lacinia sed cras massa posuere. Convallis mi ligula et dictumst, aenean mauris sed eget wisi dapibus viverra, magna enim quis, lacus sodales. Amet ultrices blandit sapien, integer mauris vitae, diam quis non massa dolor consequat.</p>
<p>Proin pellentesque at, cursus ac, maecenas dignissim sed enim nec omnis, libero urna nibh ac. Nec eget consectetuer proin sapien eget id, vel consequat integer cras euismod nonummy mattis. Adipiscing sapien justo, sodales vitae nec natoque nulla. Arcu rutrum tellus nulla ultrices nec tincidunt, bibendum eu ipsum eu, tortor eros sed auctor orci aliquet pellentesque. Fusce tortor vel in eu, ut sed curabitur odio nunc, vivamus sed in cursus tempor nonummy.</p>
<p>Rhoncus vel litora vitae posuere urna, curabitur sodales, sit elit phasellus. Cras arcu suspendisse pede curabitur rhoncus, taciti nec vulputate diam mauris. Quis non sollicitudin curabitur, eros amet risus mollis. Vitae semper per, nulla mi, molestie elit pellentesque integer et vel pellentesque, rutrum ante gravida. Elit tincidunt non vestibulum, quam nisl proin. Erat ut, eleifend pharetra ullamcorper, sed turpis pellentesque elementum, orci amet orci lectus donec, risus dis.</p>
<p>Fusce purus facilisis, euismod risus volutpat sed wisi, pulvinar sed lectus tincidunt suscipit. Mauris euismod non vel nisl nunc pellentesque, molestie feugiat, proin eget tincidunt aliquam, facilisis sociis erat, inceptos dui. Fusce in aliquam urna ante vel, amet est turpis lacus. Quam ac. Wisi reprehenderit sapien sit libero eu, sed dictum fusce eget mauris duis arcu. Amet quis curabitur faucibus leo, id sit placerat nam orci vivamus parturient, eu non qui quis ligula, et id proin vulputate commodo, massa eget cursus. Lorem urna dictum, nam aliquet lacinia diam, elementum nibh et enim tortor turpis placerat, aliquet interdum orci nunc sodales eget platea, donec lectus eu fermentum eget nunc.<br />
</p></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>
<a href="#" class="leftpush">Left</a> <a href="#" class="rightpush">Right</a>
</body></html>
</html>

Response title

Attachments

jQuery Forum

stop "animate left" on div bounds

Statistics

Tags

Actions