SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 69
  1. #26
    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)
    Oh ya. I was looking at your demo. I still havnt tried to add it to mine yet. Still working in more pressing issues. Like 100+ broken links. Now that is tedious.

  2. #27
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ah ok, I stopped the animation on my demo and you're right, it kicks back in again after a while.
    Let me have a look at it now.

  3. #28
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    So, I got it sorted out.
    Here's a new demo. Can you confirm that the animation stops and stays stopped.

  4. #29
    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
    So, I got it sorted out.
    Here's a new demo. Can you confirm that the animation stops and stays stopped.
    Yep I think that did it! One last thing. Is there a way to make it ON by default and not off as it is currently? Thanks Pullo for all your help

  5. #30
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    You're welcome

    The problem was that the calls to setTimeout were all stacking up, so despite clearing the two obvious ones (t1 and t2), there were still three hanging around in the background, which is why the clouds and left balloon kicked back in again.

    Anyway, re default state: it is "on" by default.

    This line:

    Code JavaScript:
    if (animationStatus == null || animationStatus == "on")

    checks to see if a cookie exists (i.e. if the visitor has pressed the "off button" before), if not, the animation kicks right in.

    If you mean that the browser should only remember the user's preference for the current session, then just remove the "expires" bit when you are setting the cookies:

    Code JavaScript:
    $.cookie('animationStatus', 'on', { expires: 7, path: '/' });
    $.cookie('animationStatus', 'off', { expires: 7, path: '/' });

    should become:

    Code JavaScript:
    $.cookie('animationStatus', 'on', { path: '/' });
    $.cookie('animationStatus', 'off', { path: '/' });

    Hope that helps

  6. #31
    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)
    So when I click the animation on (yet I have clicked off before in the past) and then open a new tab and load up the page the animation is off by default. Am I missing something? Thanks!

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    So, first off, we are talking about this demo.

    When I click the animation on in Chrome, open another tab an reenter the URL, animation is on in both tabs.
    Which browser are you testing in.
    Can you tell me how to reproduce the error?

  8. #33
    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 Pullo. I was testing this on the ipad. Which usually gives the same results. I'll test it on the desktop in the morning...

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

    FWIW I just tested on my iPad, too and got the same result, i.e. all good.

  10. #35
    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)
    ahh! I had to clear cookies too. Looks like the old cookie was sticking. All is good. Awesome.

    Pullo - I copied it all and have a working copy. Can you do me a favor (as if you havent already) and either delete that test page from your server or remove all its text and titles. No duplicate content ya know? Thanks

  11. #36
    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 Pullo I got another one for you. Very simple prob. I need to take the positioning out of the JS and into the css. So when it is turned off everything positions correctly. That's the only way I can see how to do it. I messed with it a while but couldn't seem to make it happen. Thanks for you help

  12. #37
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ok. Challenge accepted
    Make me a bare bones page with everything positioned in the CSS how you would like it (i.e. in its start position).
    Please also try to strip out all unnecessary styles and content.
    When you've done this, let me know.

  13. #38
    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)
    Thanks Pullo. Here is the striped page http://www.websitecodetutorials.com/...on-on-off2.php.

    Simple (for you) I just need to take the positioning out of this js so I can put it in the css.

    function startAnimation(){
    animateTwoWay($('#balloon1'),{bottom: 350}, {bottom: 125}, 35000, 7000);
    animateTwoWay($('#balloon2'),{bottom: 450}, {bottom: 200}, 25000, 5000);
    animateMe($('#nearclouds'),{right: w}, {right: -1268}, 100000, 103000);
    animateMe($('#farclouds'),{right: w}, {right: -1068}, 150000, 153000);
    animateMe($('#plane'),{left: w}, {left: -606}, 50000, 53000);

  14. #39
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Thanks man,
    I'll have a look at this tomorrow.

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

    I just sat down to look at this.
    Before I got started, I looked at your website again and noticed that when you turn the animation off, everything returns to its original position.

    Did you get this sorted out or did I misunderstand what you want?

  16. #41
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ok, scrub that.
    I see that when you turn the animation off, it is still running behind the scenes (causing the page to be sluggish on older machines).

    So, I added a line to the stopAnimation function which removes all of the inline CSS declarations from the animated elements.
    This will have the effect or resetting them to their original position.

    Code JavaScript:
    function stopAnimation(){
      $("body").find('*').stop(true, true);
      console.log(timeouts.length);
      for (var i=0; i<timeouts.length; i++) {
        clearTimeout(timeouts[i]);
      }
      $("#plane, #balloon1, #balloon2, #nearclouds, #farclouds").removeAttr('style');
    }

    It is a little bit hackish to hardcode these elements like this, but I don't think you really want to add many more elements to animate, so in this case, I think it is ok to leave it like that.

    Here's a demo.

    Hope that helps.

  17. #42
    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! How do you know it was running in the background before? Using firebug I dont see it running inline figures on anything?

  18. #43
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    How do you know it was running in the background before? Using firebug I dont see it running inline figures on anything?
    When you turn it back on again, the sprites jump to the position they would have been in had you left it on.

    Your site is looking good, by the way!

  19. #44
    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
    When you turn it back on again, the sprites jump to the position they would have been in had you left it on.

    Your site is looking good, by the way!
    Hey thank you. Ahh your in Germany. It's only 1:53am were I am.

    Really? I dont see that. I see when you turn it back on (on my resent striped demo) they all start from their default position. The plane of screen to the right - the clouds off screen to the left - the balloons at the top drifting down.

    EDIT: I just dont want to unnecessarily hard code it as you say if I dont have too.

  20. #45
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Yeah, I was referring to your main page.
    But hopefully my new code will fix this anyway.

    Now go to bed ...

  21. #46
    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)
    EDIT: I just dont want to unnecessarily hard code it as you say if I dont have too.

  22. #47
    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)
    Ya on the main page I still havent implemented anything yet. Only on the test page. So does that mean it doesnt have to be hard coded with...

    function stopAnimation(){
    $("body").find('*').stop(true, true);
    console.log(timeouts.length);
    for (var i=0; i<timeouts.length; i++) {
    clearTimeout(timeouts[i]);
    }
    $("#plane, #balloon1, #balloon2, #nearclouds, #farclouds").removeAttr('style');
    }

  23. #48
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Well, you could add a class of "beingAnimated" to all elements that are well, being animated and just remove the inline styles from these elements, but this would add quite a bit more code to what you already have.

    Put another way, do you want to add more elements to be animated in the future?

  24. #49
    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
    Well, you could add a class of "beingAnimated" to all elements that are well, being animated and just remove the inline styles from these elements, but this would add quite a bit more code to what you already have.

    Put another way, do you want to add more elements to be animated in the future?
    Probably. But remembering to add another item to the js as well would be no problem. See I just thought I could remove the css position from the js and place them in the css. When the js was running it would override the the css position. Then when turned off the css would kick in. Is this not how it would work? Therefore you had to add the hackish bit? If thats the case then no problem I'll run with it. But if we can instead just remove the inline styles from the js that would be better yeah?

  25. #50
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Nah, the way it works is that you specify the "off" position in the CSS.
    Then the JS kicks in, places the element at its start point and animates to its end point over a specified period of time.
    It does this over and over until the user klicks "off" at which point all inline styles are removed and the elements return to their "off" position which was specified in the CSS.
    This also gives users with JS disabled a sane default.

    The only hackish bit was specifying the elements by name in this line:

    Code JavaScript:
    $("#plane, #balloon1, #balloon2, #nearclouds, #farclouds").removeAttr('style');

    But to be fair, its not even really that hackish as it makes your code easier to read.

    If you wanted to add another thirty elements or so that would be a different matter, but as it is, this is probably the best solution.


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
  •