bhakti

Adding c.log to my pen certainly shows the different targets being fed into the repeatedly called doAnim(). In your pen c.log only ever reports one such object fed into doAnim() and at runtime. Got the naturalHeight when I stuck a real image there. Thanks. From your pen I guess you are implying it's a topic closer to js functions, and variable scope. I'm amazed to see a function accept, and moreover employ, a change to a function parameter - after its been called. Maybe it remains 'open' cos it does not return anything? Sorry about the 'off-topic' nature, though I do find there is a niche for common programming design solutions for fundamental animation techniques. I usually find that as a newbie, sticking my nose in, such a forum exists already - somewhere Thanks again.

Hi! I have a canvas with a number of draggable objects. The codepen represents just two. In the draggable callback, I send off the target eg red box, to a function which instantiates jQuery knob. The knob does its job and adjusts the size. When I click on another object, say the blue box, I expect draggable to associate knob with now the blue box as target. Alas, it does not. Can somebody tell me how to do this? I also need to get the natural height of images in the draggabe callback so that I can calculate an x:y ration for proportional resizing....? I think I have seen someone instantiate a new image object from the src attr, and then get widht and height...? Thanks

Your codepen is exactly what I wanted to achieve. Thanks. I think the code you have used is more succinct than mine. I did find a solution, which I can't get to work in a codepen: http://codepen.io/anon/pen/zvYZMz?editors=111. The solution was to unlink any existing keydown event from the page at the beginning of doAnim() var html_element=$('html'); html_element.off(); // reset I was previously trying to unlink the event handler that brings either #b1 or #b2 into focus, which of course did not work.

Hi! What I would like to do, is to be able to click on any one of a number of elements and then move it around with keystrokes. Somehow the jquery-ui draggable() has this functionality. You click on any element which has been assigned draggable and off you go: $('#myElement').draggable(); The problem I have at the moment is that once I have assigned an element to listen to an event handler, when I click on it - it never forgets it. So when I now click on another element to assign it instead to listen to keycode events, it moves but along with the first element, which has not dropped the baton! I am thinking this must be common and necessary functionality in the world of animation which is why I have posted here and hope it~s not too off topic, and that there must be some code that does it, perhaps using jquery off() or deleting some object property...? Tried to do codepen but could not get keycode events to work. The HTML window was simply appended with the number 6! If it helps, from a design perspective, my intention is for the user to click to save the positions and sizes of all elements that they have moved around, and then save them locally or on server. Its goinf to be a kind of 'arrange your own furniture' canvas. So, grateful for any pointers. Thanks