/    Sign up×
Community /Pin to ProfileBookmark

Jquery stop "animate left" on div bounds

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 [URL=”http://mytest.elementfx.com/test.htm”]here[/URL] 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:

[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 *** 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>
[/CODE]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@apegApr 21.2010 — Hey dutchboy, it wouldn't take much to stop it from going past. Something as simple as a "keep track" variable which stops the animation from happening if() left is > then...

but there is no point in re-creating the scroller wheel.

http://flowplayer.org/tools/scrollable.html

I have been using that plug-in for a while, great control and additional plug-ins for it (Circular)

-aPeg
Copy linkTweet thisAlerts:
@JonaApr 22.2010 — [font=arial]You can solve this by precalculating what the result will be and comparing it to a specified limitation. Try this for your right link's function.[/font]

<i>
</i>$(".rightpush").click(function(){

var distance = 786;

if(Math.abs(parseInt($("#contents").css("left"),10))+distance &gt;= ($("#contents").width() * $("#contents table td").length)){
distance = 0;
}

$("#contents").animate({
left: "-=" + distance + "px"
}, 1200);

return false;
});
Copy linkTweet thisAlerts:
@dutchboy2382authorApr 22.2010 — Wow thanks to both of you, very helpful
×

Success!

Help @dutchboy2382 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...