Jump to content

Updating Variable in Real Time


Jared
 Share

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
Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...