Jump to content
Jared

Updating Variable in Real Time

Recommended Posts

I've got the simple code to write out the text of the new position of the div:

var posTeller = $('.movingDiv').position();$('span').text(posTeller.left) $(".buttonClass").click(function(){  $(".movingDiv").animate({left: '+=20'}, 500,function()  {   posTeller = $('.movingDiv').position();   $('span').text(posTeller.left);  });});

However, I would like to have it update as it's moving. I will need this later so that an 'if' function can catch it at a certain value and stop the animation mid-way and call a new animation. I found the $.throttle plugin but I'm unsure how to implement it based off the examples. The end purpose is preventing a slide of thumbnails from going too far and 'bouncing back'. Throttle Plugin Thanks!

Edited by Jared

Share this post


Link to post
Share on other sites

Couldn't you just animate it to the target location? Something like:$(".movingDiv").animate({left: 300}, 500);That will move the element to 300px. EDIT: If you're looking for a 'bounce' effect, there is an easing plugin for jQuery that you can use.

Edited by ShadowMage

Share this post


Link to post
Share on other sites

That would be the same as clicking the 'next' or 'previous' buttons, which I already have. See the prototype here You can see the problem is you can click to your heart's content until the thumbnails are way out of the window of view. I'd like to detect when the current position hits the max allowed position and performs a .stop() and/or pushes it back a couple of pixels to make it clear to the user there's no more content. I could map everything out, make the number of pixels divisible by container size, and stop it on cue after x number of clicks, but I'd like to make it more dynamic so I can add more thumb nails or change their size and not have to update a bunch of javascript each time I do. Ideally, this will end up being a useful widget for future projects too so It'll virtually be a 'drag 'n drop' of my image thumbnails without any need to adjust the script. P.S. I do use the easing plug-in. Looks great.

Share this post


Link to post
Share on other sites

You could check the position of the element before animating it and only animate it if it isn't maxed out.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...