SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    need some help getting jQuery Wiggle Plugin working correctly?

    Below is a working copy. However, it just wiggles constantly. I would like it to wiggle every 10 seconds for 1 minute and then stop. Also I would prefer it to wiggle less and slower. I've exhausted google looking for an answer. Here is the plugin home page. http://www.class.pm/files/jquery/jquery.wiggle/demo/ But he doesnt go into much detail on the how tos. Thanks!

    And online http://www.visibilityinherit.com/projects/wiggle.html

    Code JavaScript:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    /*!
     * jQuery Wiggle
     * [url]http://www.userdot.net/#!/jquery[/url]
     *
     * Copyright 2011, UserDot [url]www.userdot.net[/url]
     * Licensed under the GPL Version 3 license.
     * Version 1.0.0
     *
     */
    (function($) {
        $.fn.wiggle = function(method, options) {
            options = $.extend({
                degrees: ['2','4','2','0','-2','-4','-2','0'],
                delay: 35,
                limit: null,
                randomStart: true,
                onWiggle: function(o) {},
                onWiggleStart: function(o) {},
                onWiggleStop: function(o) {}
            }, options);
            var methods = {
                wiggle: function(o, step){
                    if (step === undefined) {
                        step = options.randomStart ? Math.floor(Math.random() * options.degrees.length) : 0;
                    }
                    if (!$(o).hasClass('wiggling')) {
                        $(o).addClass('wiggling');
                    }
                    var degree = options.degrees[step];
                    $(o).css({
                        '-webkit-transform': 'rotate(' + degree + 'deg)',
                        '-moz-transform': 'rotate(' + degree + 'deg)',
                        '-o-transform': 'rotate(' + degree + 'deg)',
                        '-sand-transform': 'rotate(' + degree + 'deg)',
                        'transform': 'rotate(' + degree + 'deg)'
                    });
                    if (step == (options.degrees.length - 1)) {
                        step = 0;
                        if ($(o).data('wiggles') === undefined) {
                            $(o).data('wiggles', 1);
                        }
                        else {
                            $(o).data('wiggles', $(o).data('wiggles') + 1);
                        }
                        options.onWiggle(o);
                    }
                    if (options.limit && $(o).data('wiggles') == options.limit) {
                        return methods.stop(o);
                    }
                    o.timeout = setTimeout(function() {
                        methods.wiggle(o, step + 1);
                    }, options.delay);
                },
                stop: function(o) {
                    $(o).data('wiggles', 0);
                    $(o).css({
                        '-webkit-transform': 'rotate(0deg)',
                        '-moz-transform': 'rotate(0deg)',
                        '-o-transform': 'rotate(0deg)',
                        '-sand-transform': 'rotate(0deg)',
                        'transform': 'rotate(0deg)'
                    });
                    if ($(o).hasClass('wiggling')) {
                        $(o).removeClass('wiggling');
                    }
                    clearTimeout(o.timeout);
                    o.timeout = null;
                    options.onWiggleStop(o);
                },
                isWiggling: function(o) {
                    return !o.timeout ? false : true;
                }
            };
            if (method == 'isWiggling' && this.length == 1) {
                return methods.isWiggling(this[0]);
            }
            this.each(function() {
                if ((method == 'start' || method === undefined) && !this.timeout) {
                    methods.wiggle(this);
                    options.onWiggleStart(this);
                }
                else if (method == 'stop') {
                    methods.stop(this);
                }
            });
            return this;
        }
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
       $('.wiggle').wiggle();
    });
    </script> 
    <style type="text/css">
     
    </style> 
    </head>
    <body>
     
    <img src="http://www.visibilityinherit.com/code/images/adriana.jpg" class="wiggle">
     
    </body>
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi Eric,

    I might be missing something, but the wiggle plugin seems to have a stop method, e.g.
    Code JavaScript:
    $('div#wigglewrapper img').wiggle('stop');
    So couldn't you just use setTimeOut when your page loads (or whenever the wiggle effect starts) to call wiggle('stop') after 60 seconds?

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    maybe but I also need it to wiggle for 1 second - every 10 seconds - for one minute - then stop.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    If you put this code at the bottom of the example page you posted, it will do what you want.
    Hopefully it's quite self-explanatory, but if you have any questions, let me know.
    I can also post a sample page if it helps.

    Code JavaScript:
    function wiggleForOneSecond(t){
      t.wiggle();
      setTimeout(function(){t.wiggle('stop')},1000)
    }
     
    $(document).ready(function(){
      var thingToWiggle = $('.wiggle');
      wiggleForOneSecond(thingToWiggle);
      s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
      setTimeout(function(){window.clearInterval(s)},61000)
    });

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Awesome that works perfect - than you very much! Anyway to retool that a little so it starts the wiggle 10 seconds after page load and aborts on each page once hovered over? Two reasons... once hovered over they've seen it. And two it's in a sprite which gets bigger on hover. Dont want to mix animations.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Anyway to retool that a little so it starts the wiggle 10 seconds after page load and aborts on each page once hovered over?
    The first part is easy. Just remove the first call to wiggleForOneSecond();
    As for the second part - it shouldn't be too difficult. I can have a look at that this evening for you (in about three hours), if you would like (I'm busy right now).

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool - cool. So the first part should just look like this to make it start in 10 seconds...

    function {
    t.wiggle();
    setTimeout(function(){t.wiggle('stop')},1000)
    }

    Or remove that whole block so it begins at (document).ready? And yes please. If you could take a look at that tonight that would be very helpful. Thanks for help thus far!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    The code would then look like this:

    Code JavaScript:
    function wiggleForOneSecond(t){
      t.wiggle();
      setTimeout(function(){t.wiggle('stop')},1000)
    }
     
    $(document).ready(function(){
      var thingToWiggle = $('.wiggle');
      s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
      setTimeout(function(){window.clearInterval(s)},61000)
    });

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hey,

    The code would then look like this:

    Code JavaScript:
    function wiggleForOneSecond(t){
      t.wiggle();
      setTimeout(function(){t.wiggle('stop')},1000)
    }
     
    $(document).ready(function(){
      var thingToWiggle = $('.wiggle');
      s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
      setTimeout(function(){window.clearInterval(s)},61000)
    });
    No worries if your busy. That last snippet runs it for 10 seconds or so on page load - then waits 10 seconds - then runs for 1 second ever 10 seconds. As you know I'm looking for it to not run for 10 seconds after page load - then run for 1 second every 10 seconds for 1 minute - or maybe 30 seconds. So it runs three intervals. Dont want to pester the user.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Back with you.
    Quote Originally Posted by EricWatson View Post
    That last snippet runs it for 10 seconds or so on page load - then waits 10 seconds - then runs for 1 second ever 10 seconds.
    Then something is not correct.

    Here is the updated code.
    The wiggle should only kick in after 10 seconds and if you hover over the picture, the effect will be cancelled altogether.

    Code JavaScript:
    function wiggleForOneSecond(t){
      t.wiggle();
      setTimeout(function(){t.wiggle('stop')},1000)
    }
     
    $(document).ready(function(){
      var thingToWiggle = $('.wiggle');
      var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
      setTimeout(function(){window.clearInterval(s)},61000)
     
      thingToWiggle.hover(function(){
        window.clearInterval(s)
      });
    });

    Would be nice if you could let me know if this works for you.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I sure will. Ill be back at my computer tonight to test. Thanks so much. Very kind of you!

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok I just tested it on my iPad using Textastic app. And unfortunately it does the same as the last. On page load it wiggles for 10 secs - stops for 10 - then wiggles for 1 and stops for 10. Any thoughts? Thanks!

    Code JavaScript:
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    /*!
     * jQuery Wiggle
     * [url]http://www.userdot.net/#!/jquery[/url]
     *
     * Copyright 2011, UserDot [url]www.userdot.net[/url]
     * Licensed under the GPL Version 3 license.
     * Version 1.0.0
     *
     */
    (function($) {
        $.fn.wiggle = function(method, options) {
            options = $.extend({
                degrees: ['2','4','2','0','-2','-4','-2','0'],
                delay: 35,
                limit: null,
                randomStart: true,
                onWiggle: function(o) {},
                onWiggleStart: function(o) {},
                onWiggleStop: function(o) {}
            }, options);
            var methods = {
                wiggle: function(o, step){
                    if (step === undefined) {
                        step = options.randomStart ? Math.floor(Math.random() * options.degrees.length) : 0;
                    }
                    if (!$(o).hasClass('wiggling')) {
                        $(o).addClass('wiggling');
                    }
                    var degree = options.degrees[step];
                    $(o).css({
                        '-webkit-transform': 'rotate(' + degree + 'deg)',
                        '-moz-transform': 'rotate(' + degree + 'deg)',
                        '-o-transform': 'rotate(' + degree + 'deg)',
                        '-sand-transform': 'rotate(' + degree + 'deg)',
                        'transform': 'rotate(' + degree + 'deg)'
                    });
                    if (step == (options.degrees.length - 1)) {
                        step = 0;
                        if ($(o).data('wiggles') === undefined) {
                            $(o).data('wiggles', 1);
                        }
                        else {
                            $(o).data('wiggles', $(o).data('wiggles') + 1);
                        }
                        options.onWiggle(o);
                    }
                    if (options.limit && $(o).data('wiggles') == options.limit) {
                        return methods.stop(o);
                    }
                    o.timeout = setTimeout(function() {
                        methods.wiggle(o, step + 1);
                    }, options.delay);
                },
                stop: function(o) {
                    $(o).data('wiggles', 0);
                    $(o).css({
                        '-webkit-transform': 'rotate(0deg)',
                        '-moz-transform': 'rotate(0deg)',
                        '-o-transform': 'rotate(0deg)',
                        '-sand-transform': 'rotate(0deg)',
                        'transform': 'rotate(0deg)'
                    });
                    if ($(o).hasClass('wiggling')) {
                        $(o).removeClass('wiggling');
                    }
                    clearTimeout(o.timeout);
                    o.timeout = null;
                    options.onWiggleStop(o);
                },
                isWiggling: function(o) {
                    return !o.timeout ? false : true;
                }
            };
            if (method == 'isWiggling' && this.length == 1) {
                return methods.isWiggling(this[0]);
            }
            this.each(function() {
                if ((method == 'start' || method === undefined) && !this.timeout) {
                    methods.wiggle(this);
                    options.onWiggleStart(this);
                }
                else if (method == 'stop') {
                    methods.stop(this);
                }
            });
            return this;
        }
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
       $('.wiggle').wiggle();
    });
     
    function wiggleForOneSecond(t){
      t.wiggle();
      setTimeout(function(){t.wiggle('stop')},1000)
    }
     
    $(document).ready(function(){
      var thingToWiggle = $('.wiggle');
      var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
      setTimeout(function(){window.clearInterval(s)},61000)
     
      thingToWiggle.hover(function(){
        window.clearInterval(s)
      });
    });
    </script> 
     
    </head>
    <body>
     
    <img src="http://www.visibilityinherit.com/code/images/adriana.jpg" class="wiggle wiggling" style="-webkit-transform: rotate(4deg); ">
     
     
    </body>

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Strange, it works fine in Chrome.
    Let me upload a copy somewhere and test it on my iPad.
    Hang on!

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi, it works fine on the iPad for me.

    Here's the complete code for you to copy and paste.
    Does that work for you?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    /*!
     * jQuery Wiggle
     * http://www.userdot.net/#!/jquery
     *
     * Copyright 2011, UserDot www.userdot.net
     * Licensed under the GPL Version 3 license.
     * Version 1.0.0
     *
     * http://www.class.pm/files/jquery/jquery.wiggle/demo/
     */
    (function($) {
        $.fn.wiggle = function(method, options) {
            options = $.extend({
                degrees: ['2','4','2','0','-2','-4','-2','0'],
                delay: 35,
                limit: null,
                randomStart: true,
                onWiggle: function(o) {},
                onWiggleStart: function(o) {},
                onWiggleStop: function(o) {}
            }, options);
            var methods = {
                wiggle: function(o, step){
                    if (step === undefined) {
                        step = options.randomStart ? Math.floor(Math.random() * options.degrees.length) : 0;
                    }
                    if (!$(o).hasClass('wiggling')) {
                        $(o).addClass('wiggling');
                    }
                    var degree = options.degrees[step];
                    $(o).css({
                        '-webkit-transform': 'rotate(' + degree + 'deg)',
                        '-moz-transform': 'rotate(' + degree + 'deg)',
                        '-o-transform': 'rotate(' + degree + 'deg)',
                        '-sand-transform': 'rotate(' + degree + 'deg)',
                        'transform': 'rotate(' + degree + 'deg)'
                    });
                    if (step == (options.degrees.length - 1)) {
                        step = 0;
                        if ($(o).data('wiggles') === undefined) {
                            $(o).data('wiggles', 1);
                        }
                        else {
                            $(o).data('wiggles', $(o).data('wiggles') + 1);
                        }
                        options.onWiggle(o);
                    }
                    if (options.limit && $(o).data('wiggles') == options.limit) {
                        return methods.stop(o);
                    }
                    o.timeout = setTimeout(function() {
                        methods.wiggle(o, step + 1);
                    }, options.delay);
                },
                stop: function(o) {
                    $(o).data('wiggles', 0);
                    $(o).css({
                        '-webkit-transform': 'rotate(0deg)',
                        '-moz-transform': 'rotate(0deg)',
                        '-o-transform': 'rotate(0deg)',
                        '-sand-transform': 'rotate(0deg)',
                        'transform': 'rotate(0deg)'
                    });
                    if ($(o).hasClass('wiggling')) {
                        $(o).removeClass('wiggling');
                    }
                    clearTimeout(o.timeout);
                    o.timeout = null;
                    options.onWiggleStop(o);
                },
                isWiggling: function(o) {
                    return !o.timeout ? false : true;
                }
            };
            if (method == 'isWiggling' && this.length == 1) {
                return methods.isWiggling(this[0]);
            }
            this.each(function() {
                if ((method == 'start' || method === undefined) && !this.timeout) {
                    methods.wiggle(this);
                    options.onWiggleStart(this);
                }
                else if (method == 'stop') {
                    methods.stop(this);
                }
            });
            return this;
        }
    })(jQuery);
    </script>
    <script type="text/javascript">
      function wiggleForOneSecond(t){
        t.wiggle();
        setTimeout(function(){t.wiggle('stop')},1000)
      }
      
      $(document).ready(function(){
        var thingToWiggle = $('.wiggle');
        var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
        setTimeout(function(){window.clearInterval(s)},61000)
        
        thingToWiggle.hover(function(){
          window.clearInterval(s)
        });
      });
    </script> 
    </head>
    <body>
    
    <img src="http://www.visibilityinherit.com/code/images/adriana.jpg" class="wiggle">
    
    </body>
    </html>

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Hi again,
    Just seen the problem (I probably should've checked out your code first).
    You have two $(document).ready(function(){}) blocks.
    Use the code that I just posted and I'm pretty confident it'll work as expected.

    I'm off to bed now. It's late here.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yes that work perfect!!! I am in your debt Sr. Thank you very much. I will put this to good use. Happy happy

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    One last question? Trying to understand that math. If I wanted to say only run it for 30 seconds. In other words I wanted only three wiggles per page load each ten seconds apart. Would it be 31000 milliseconds? Basically are the run times (1000 milliseconds) and wait times (10000) part of that 31000? In which case it would be 33000 + the 10 second initial wait so 43000 or no? Thanks.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Interestingly, this question came up just a few weeks ago, and a CSS3 solution was also noted:

    http://css3ps.com/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,871
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Interestingly, this question came up just a few weeks ago, and a CSS3 solution was also noted: http://css3ps.com/
    Thanks Ralph, that's an interesting link. It's amazing what can be done with CSS these days.

    Quote Originally Posted by EricWatson View Post
    One last question? Trying to understand that math. If I wanted to say only run it for 30 seconds. In other words I wanted only three wiggles per page load each ten seconds apart. Would it be 31000 milliseconds? Basically are the run times (1000 milliseconds) and wait times (10000) part of that 31000? In which case it would be 33000 + the 10 second initial wait so 43000 or no? Thanks.
    The way the code works is to use the setInterval() method to repeat the wiggle every ten seconds.
    As you are probably aware, setInterval() calls a function or evaluates an expression at specified intervals (in milliseconds) and it will continue calling the function until clearInterval() is called, or the window is closed.
    Therefore if you want three wiggles, one will take place after ten seconds, the second one after twenty seconds and the third one after thirty seconds, so you need to call clearInterval() any time after the third wiggle has taken place, but before the fourth wiggle. In my example I called it one second later, but you could also call it two, three, four etc ... seconds later with the same effect.

    The amended code would look like this:
    Code JavaScript:
    function wiggleForOneSecond(t){
        t.wiggle();
        setTimeout(function(){t.wiggle('stop')},1000)
      }
     
    $(document).ready(function(){
      var thingToWiggle = $('.wiggle');
      var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
      setTimeout(function(){window.clearInterval(s)},31000)
     
      thingToWiggle.hover(function(){
        window.clearInterval(s)
      });
    });

    Does that make sense?

  20. #20
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Perfect sense!


Bookmarks

Posting Permissions

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