PDA

View Full Version : Why does using Javascript stop animations?



julsmavis
11-29-2004, 09:03 PM
Hello. Since I've successfully used it on other Christmas pages in previous years, I wanted to use the fabulous snow script on my Christmas 2004 page, but I found that all the animations stop working when I added the javascript. (This was a frustrating exercise--it took me a while to figure out why my animations had stopped! :mad: I realize now that the previous pages contained no animated gifs.) I've tried putting it in at the top and the bottom of the page, but something in the script blocks the movement of the animated gifs.

I'd also like to know if I can make the snow keep scrolling down the entire page. I tried changing the page length from 600 to 2000 (and other values) but to no avail. :confused:

Thanks for any help. :)

Julia
See what I did at:
www.members.shaw.ca/jmsbc/Cmas2004/cmas2004.htm

simonf
11-30-2004, 04:32 AM
Hi

Did you try placing a new layer on the page and adding the script into this area, as it works for me.... as for the whole page, I'm still looking to see if it can be modified to do this. rgds,Simonf :cool:

julsmavis
11-30-2004, 05:27 AM
Many thanks for this idea. No, I hadn't thought to try a new layer, 'cos I'm not as familiar with layers in website building as I am in Photoshop. However, at your recommendation, I pasted the html code onto a new layer at the top of the page. Again I get snow, but I don't get animations, either in my preview or upon uploading it to the net. And now the page takes forever to download, although I can't see a connection between using layers and the speed of downloading. I'm very disappointed, and if you can think of anything else to make it work, I will be delighted, 'cos the snow really is a deluxe addition. Thanks again!
Julia

simonf
11-30-2004, 06:53 AM
Hi

Try pasting this into your body, modify the red bit ot reflect your image path

<div style="position: absolute; width: 100%; height: 2419px; z-index: 1; left: 0px; top: 0px" id="layer1">
<script language="JavaScript1.2">

/******************************************
* Snow Effect Script- By Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/


//Configure below to change URL path to the snow image
var snowsrc="images/snow3.gif"
// Configure below to change number of snow to render
var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"><\/layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

</script></div>

rgds,Simonf :cool:

Gabber
11-30-2004, 02:37 PM
"Hello. Since I've successfully used it on other Christmas pages in previous years, I wanted to use the fabulous snow script on my Christmas 2004 page, but I found that all the animations stop working when I added the javascript. (This was a frustrating exercise--it took me a while to figure out why my animations had stopped! I realize now that the previous pages contained no animated gifs.) I've tried putting it in at the top and the bottom of the page, but something in the script blocks the movement of the animated gifs.

I'd also like to know if I can make the snow keep scrolling down the entire page. I tried changing the page length from 600 to 2000 (and other values) but to no avail. "

forget about this snow script... there are others much more appealing that don't even use images! for real! :) search the web...
oh, but yes, many of these kind of "animated" javascripts will stop gif files... no way around it.

julsmavis
12-07-2004, 06:15 AM
Thanks for your efforts, Simon, but unfortunately I had no luck with the new script. The snow is the same as before, and the gifs lose their animation. I'll just have to use the snow effect on another page.

And Gabber, thanks for your reply, too. However, most of the other scripts I tried interferes with animations, so I'm giving up on on the snow idea for now. Darn.

drewjr
12-10-2004, 12:18 AM
to get the snow to fall the full length visit this thread.
falling snow (http://www.dynamicdrive.com/forums/showthread.php?t=967)

good luck!
drewjr