Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: buzzer help?

  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    buzzer help?

    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?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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().

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Something in the lines of (untested!)
    Code:
    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 ) );
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •