How to keep track of div animations on jQuery screen?

Question

I am using jQuery.crSpline to animate a graph along a curved path. I am very pleased with the result.

However, the full size of the canvas is deliberately quite wide - definitely larger than most screens, so the graphical interface will exit the viewport fairly quickly and enliven the screen.

Instead, I would like the browser window to follow or focus on the image so that it remains “in frame”.

How do I do this using jQuery? Is there a scrollTop option?

I created a jsFiddle demo based on crSpline but with a wide minX option.

---

NB . At first I tried to do this using YUI3 and Loktar suggested a canvas based, however I no longer use YUI and canvas.

Answer 1

There is an option for the step function in jQuery animation, which runs at every stage of the animation.

See the second version of the function parameters here: http://api.jquery.com/animate/

 .animate( properties, options ) propertiesA map of CSS properties that the animation will move toward. optionsA map of additional options to pass to the method. Supported keys: duration: A string or number determining how long the animation will run. easing: A string indicating which easing function to use for the transition. complete: A function to call once the animation is complete. step: A function to be called after each step of the animation. queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4). 

See this script based on your code, which calls the step function to adjust the viewport:

http://jsfiddle.net/gNdwD/35/

 $('<div id="mover" />') .appendTo($(document.body)) .animate({ crSpline: spline },{ duration: 20000, step: function() { /* THE STEP FUNCTION TO ADJUST VIEWPORT */ var mover = $('#mover'), posX = mover.position().left; posY = mover.position().top; $(window) .scrollLeft(posX - $(window).width() / 2) .scrollTop(posY - $(window).height() / 2); } , complete:function () { // Re-run the demo with a new spline after we're done window.setTimeout(function() { DEMO.run(); }, 5000); } }); 

Answer 2

Is that what you meant? http://jsfiddle.net/gNdwD/33/ . It seems a little choppy, but his rude first attempt.

It does not look like crSpline provides any coordinates in the animated element, so we should periodically observe them and adjust the viewport accordingly:

 setInterval(function() { var mover = $('#mover'), posX = mover.position().left, posY = mover.position().top; $(window) .scrollLeft(posX - $(window).width() / 2) .scrollTop(posY - $(window).height() / 2); }, 10); 

I suspect an interruption is occurring because our setInterval not in sync with $.animate on the engine. You can fix this by doing two animations: one on the engine and one on scrollTop and scrollLeft wrappers div. You can apply two $.animate at the same time, for example.