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

JavaScript
41

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.

42

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

43

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!

44

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.

45

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

Now go to bed … :slight_smile:

46

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

47

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

48

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?

49

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?

50

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.

51

Ok cool thanks for the explanation. I’ll run with it then. Thanks for all your help. Could not of done it without you.

52

You’re welcome :slight_smile:

53

Morning,

I managed to work out the ON/OFF color changing. Is this the best way to do that? http://www.websitecodetutorials.com/test-animation-on-off.php

#onoff li span {
font-weight:bold;
color:red;
}

$(‘#onoff’).on(“click”, function() {
if(toggleState) {
$.cookie(‘animationStatus’, ‘on’, { expires: 365, path: ‘/’ });
$(“#onoff span”).text(“ON”).css(‘color’,‘green’);
startAnimation();
} else {
$.cookie(‘animationStatus’, ‘off’, { expires: 365, path: ‘/’ });
$(“#onoff span”).text(“OFF”).css(‘color’,‘red’);
stopAnimation();
}
toggleState = !toggleState;
});

var t1, t2;
var timeouts = [];

var w = $(document).width()
var animationStatus = $.cookie(‘animationStatus’);
if (animationStatus == null || animationStatus == “on”){
var toggleState = false;
$(“#onoff span”).text(“ON”).css(‘color’,‘green’);
startAnimation();
} else{
var toggleState = true;
}
});

54

Hi Eric,

That’s not bad and it will work just fine, but it’s neater if you style the two button states with classes.

Use the off state as your default class, as this is what users with JavaScript disabled will see:

ul#onoff li span {color:red; font-weight:bold;}

then define an “on” class:

ul#onoff li span.on{color:green; font-weight:bold;}

Once you have done this, you can add and remove the “on” class as necessary from within your JS.

$('#onoff').on("click", function() {
  if(toggleState) {
    $.cookie('animationStatus', 'on', { expires: 365, path: '/' });
    $("#onoff span").text("ON").addClass("on");
    startAnimation();
  } else {
    $.cookie('animationStatus', 'off', { expires: 365, path: '/' });
    $("#onoff span").text("OFF").removeClass("on");
    stopAnimation();
  }
  toggleState = !toggleState;
});

and

if (animationStatus == null || animationStatus == "on"){
  var toggleState = false;
  $("#onoff span").text("ON").addClass("on");
  startAnimation();  
} else{
  var toggleState = true;
}

This has the advantage of being easier to extend with more/different styles in the future.

HTH

55

Nice thats better. Thank you very much :slight_smile:

56

ew-we! Finally done with that! http://www.websitecodetutorials.com/ Thats took a long time to get right. But now when its turned off older computers like mine are much happier. CPU usage goes back down to 2% instead of the 75% it was before when off. Thanks Pullo

57

So how about a link to my site in “Friends of mine”?
:wink:

Website is looking really cool now.
I like it much better than the old design.

58

Done!

59

Can anyone figure out why in IE8 only when you click the animation to off the plane and the clouds disappear? Upon clicking a new page or reload they return. http://www.websitecodetutorials.com/.

Thanks!

60

Hi Eric,

The behaviour you describe doesn’t happen for me.
I still see the plane and clouds (tested on IE 10 in IE 8 emulation mode).

Can anyone else reproduce this?