SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 69

Hybrid View

  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)

    Long shot but can anyone tell me how to accomplish this?

    I have a style sheet switcher here on my site http://goo.gl/zA3Pm - the on/off link in the top right corner. Currently im turning off the jquery made animation by using !important in the css alt style sheet and and simply locking its position. I thought that was pretty good way to do it. Still do. But even though the animation is frozen the JS is still working so its a little hard on the CPU for those that want to turn it off. Is there anyway that you can think of to turn it off and on by turning the jquery animation off and on? That way the CPU usage would be restored for those that need it. Like me on my old XP. I'm thinking no but thought I'd ask.

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

    Maybe you could use .stop(), which stops the currently-running animation on the matched elements.
    To stop everything you could then do:

    Code JavaScript:
    $("body").find('*').stop(true, true);

  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)
    Yah the code you gave me last time (probably the same here) worked to turn it off. But then how do I turn it back on again? Thanks Pullo

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Below is a plugin I have used before which is extremely handy when you need to pause/play animations, it respects the current time in the animation so when it resumes the queue id is still the same there for it won't start again or stop completely.

    http://tobia.github.com/Pause/

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Currently you have:

    Code JavaScript:
    $("document").ready(function(){
      Do your animation here
    });

    you could move the code to kick off the animation into its own function:

    Code JavaScript:
    $("document").ready(function(){
      function startAnimation(){
        Do your animation here
      }
     
      startAnimation();
    });

    then you could add a function to stop the animation:

    Code JavaScript:
    $("document").ready(function(){
      function startAnimation(){
        Do your animation here
      }
     
      function stopAnimation(){
        $("body").find('*').stop(true, true);
      }
     
      startAnimation();
    });

    After that you can toggle between starting and stopping the animation quite easily:

    Code JavaScript:
    $(document).ready(function() {
      function startAnimation(){
        Do your animation here
      }
     
      function stopAnimation(){
        $("body").find('*').stop(true, true);
      }
     
      $('#onButton').on("click", function() {
      if(toggleState) {
        startAnimation();
      } else {
        stopAnimation()
      }
      toggleState = !toggleState;
      });
     
      var toggleState = true;
      startAnimation();  
    });

    However, as Chris points out with his answer, this will reset the animation to the beginning.
    It would probably look nicer to have some kind of pause/resume functionality, in which case you want to look at .queue(), or better still, the plugin he suggests.

  6. #6
    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)
    Hey thanks guys! I just realized a important factor. Do either of those methods have cookie? So the user doesnt have to turn off the animation each time they change pages or return to the site? Thats what I do love about the style sheet switcher.

    Also unfortunately that plugin http://tobia.github.com/Pause/ doesnt seem to work in chrome.

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

    I think the starting and stopping of the animation is fairly cookie agnostic.
    That is to say, that you can set/unset your cookie when the user clicks on the 'animation on/off' button.
    You need only check for the cookie on page load.

  8. #8
    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
    Hi Eric,

    I think the starting and stopping of the animation is fairly cookie agnostic.
    That is to say, that you can set/unset your cookie when the user clicks on the 'animation on/off' button.
    You need only check for the cookie on page load.
    Since that plugin above doesn't work in chrome ill go with what you posted Pullo. Any way you could show me how to add a cookie thingy-ma-dooger to it?

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Could show me how to add a cookie thingy-ma-dooger to it?
    Just to be clear, do you mean that you want your site to remember if the user has turned the animation on or off, so that the next time they visit the site, things are how they left them?

  10. #10
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The plugin I posted works fine in any browser, it may however break in newer versions of jQuery

  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)
    Doesn't work in my chrome

  12. #12
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Which version of Chrome are you using?

  13. #13
    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
    Just to be clear, do you mean that you want your site to remember if the user has turned the animation on or off, so that the next time they visit the site, things are how they left them?
    Exactly

  14. #14
    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 chris.upjohn View Post
    Which version of Chrome are you using?
    The latest - v23 something

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hey man,
    Here's a demo of the stop/start thing with cookies.
    To see what I've done, just have a look at the source.
    Any questions, just let me know.

    BTW, regarding the plugin: could it be a problem with testing locally (Chrome can be a bit picky sometimes)? Did you try running it on a server?

  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)
    Awesome - your the man Pullo! Just a couple issues. When you turn it off the images move off screen. That can be fixed prob by moving the position into the css. And in FX (at least) after I turn it off it turns back on after about 1 minute all by it self.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    When you turn it off the images move off screen. That can be fixed prob by moving the position into the css.
    Yeah, they just shoot back to their starting positions.

    Quote Originally Posted by EricWatson View Post
    And in FX (at least) after I turn it off it turns back on after about 1 minute all by it self.
    Not sure about this.
    You will need to make the cookie valid across your whole domain if you want to use it on more than one page.
    Try this:

    Code JavaScript:
    $('#onoff').on("click", function() {
      if(toggleState) {
        $.cookie('animationStatus', 'on', { expires: 7, path: '/'  });
        $("#onoff span").text("ON")
        startAnimation();
      } else {
       $.cookie('animationStatus', 'off', { expires: 7, path: '/'  });
       $("#onoff span").text("OFF")
        stopAnimation();
      }
    });

  18. #18
    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 il give that a try. Just put that anywhere in the js? However, I never even left the page. And it kept turning on after a minute.

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

    I fixed it.
    The demo has been updated. Now it won't start again on its own.

    You should still set the domain on your cookies though, like I describe above.
    I fixed this in the demo, too.

    It's (too) late here.
    Good night!

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    OK, I see what you mean.
    that's nothing to do with the cookies, that's the call to setTimeout kicking back in.
    We need to cancel those.

    Hang on ...

  21. #21
    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
    Hi,

    I fixed it.
    The demo has been updated. Now it won't start again on its own
    You should still set the domain on your cookies though, like I describe above.
    I fixed this in the demo, too.

    Good night!
    Awesome. Thank you so much. I'll play with it in the morning...

  22. #22
    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)
    Good morning,

    Anyway to make it on by default. And I hate to say, but animation turns on again after about a minute after being turned off. Just open another tab and then come back to it after a bit and you'll see.

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Good evening,

    I just had a look at the page (in Chrome and Firefox), but for me, when I turn the animation off (it was on both times by default), it stays off.
    I checked after five, ten and fifteen minutes.

    Did you maybe fix this issue in the meantime?

  24. #24
    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)
    No I didn't. Was it the same link? Ill try clearing the cache. I never really consider that because I clear my cache obsessively every 5 minutes

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    I used the link in your signature.
    Should I have been looking at my demo page?


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
  •