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

[PicnicTutorials]

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

[Pullo]

You're welcome

[PicnicTutorials]

Morning,

I managed to work out the ON/OFF color changing. Is this the best way to do that? http://www.websitecodetutorials.com/...ion-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;
}
});

[Pullo]

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

[PicnicTutorials]

Nice thats better. Thank you very much

[PicnicTutorials]

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

[Pullo]

So how about a link to my site in "Friends of mine"?


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

[PicnicTutorials]

So how about a link to my site in "Friends of mine"?


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

Done!

[PicnicTutorials]

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!

[Pullo]

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?

[PicnicTutorials]

Huh. Well that's good I guess. Its happened to me since we put it together. I have just been ignoring it until now. Can one other person please look on their machine In ie8 and click th animation to OFF. Does the plane and clouds disappear or do they go to their default positions? Thanks.

http://www.websitecodetutorials.com/