buzzer help?

[resin]

Hello, I have this script which creates a buzzing effect on divs (written by the mysterious Mr. X who has since disappeared). He left me a great script but I'm having one issue that I haven't been able to resolve. When you click the div that is supposed to buzz, the div immediately jumps to the upper left corner and then carries on with the buzzing effect up in the corner. Instead the div should be remaining in its original location, just moving slightly right and left for a few seconds.

Here is the test page- http://resin.webs.com/new3.html . Click the green or red div to see what I'm talking about. Anyone know what's causing this bad behavior, or how to fix it?

[Philip M]

Whatever it is supposed to do, it does not do it in IE9. Something that creates a noise is likely to be seen as an annoyance by your visitors.

[devnull69]

Yes, the steps array has absolute left and top settings that point to the top left corner of the screen. And the function buzzStep will set this exact position without taking the current position of the element into consideration.

You should store the current position of the element and then add/substract the values from the steps array to/from it in buzzStep().

[devnull69]

Something in the lines of (untested!)

function buzzStep( element, leftOffset, topOffset, startLeft, startTop ) {
   element.style.left = startLeft + leftOffset +'px';
   element.style.top = startTop + topOffset +'px';
}

...

// Loop through the defined step definitions
for( var i = 0, stepsQueued = 0, length = steps.length; i < length; i++ ) {
   // Self executing anonmyous function to implement closure, ensuring the correct values are being passed to buzzStep
   ( function( element, position, delay ) {
      // Queue the current step
      setTimeout( function(){ buzzStep( element, position.left, position.top, element.offsetLeft, element.offsetTop ); }, delay );
      stepsQueued++;
      // Return to original position after each step
      setTimeout( function(){ buzzStep( element, 0, 0, element.offsetLeft, element.offsetTop ); }, delay + interval );
      stepsQueued++;
   })( element, steps[ i ], ( stepsQueued * interval ) );
}