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

[PicnicTutorials]

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.

[Pullo]

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.

[Pullo]

So, I got it sorted out.
Here's a new demo. Can you confirm that the animation stops and stays stopped.

[PicnicTutorials]

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

[Pullo]

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:

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:

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

should become:

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

Hope that helps

[PicnicTutorials]

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!

[Pullo]

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?

[PicnicTutorials]

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...

[Pullo]

Hi Eric,

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

[PicnicTutorials]

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

[PicnicTutorials]

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

[Pullo]

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.

[PicnicTutorials]

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);

[Pullo]

Thanks man,
I'll have a look at this tomorrow.

[Pullo]

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?

[Pullo]

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.

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.

[PicnicTutorials]

awesome! How do you know it was running in the background before? Using firebug I dont see it running inline figures on anything?

[Pullo]

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!

[PicnicTutorials]

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.

[Pullo]

Yeah, I was referring to your main page.
But hopefully my new code will fix this anyway.

Now go to bed ...

[PicnicTutorials]

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

[PicnicTutorials]

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');
}

[Pullo]

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?

[PicnicTutorials]

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?

[Pullo]

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:

$("#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.