Log in

View Full Version : Bubble script not working in FF



Hieronymus
09-19-2005, 10:59 PM
Hy There,

I just 'installed' the bubble-script on a webpage. It's showing quite nice in Internet Explorer, but it is not working in Firefox. I realy need it to work in Firefox.

Please take a look at it at:
http://hetwalhalla.nl/inhoud.html

I can't think of anything that should skrew this up in firefox if it should work in that browser. I didn't do anything weird. The menu works with the 'sliding doors', but I got a extra piece of javascript making a nice greating according to the time of the day. Not thing that might interfere with the bubble script.

So, I need help.

thanx in advance.

jscheuer1
09-20-2005, 04:18 AM
It's your doctype. In FF, with that doctype (and many others), left and top positions must be expressed in units or else they are ignored. The script can easily be updated to use units for FF. Find these two lines in the code:

document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);Change them to this:

document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px';
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px';

Hieronymus
09-20-2005, 08:26 AM
Thanx. It works.

At the moment I'm having trouble adjusting the speed. Lower values (like -10, or 0.1) don't work. So this afternoon I'll try it on a faster computer. Maybe it's just this laptop that's a bit slow.

edit: Actually, the bubbles go slower in FF then in MSIE. (I've reset the speed to 2)

jscheuer1
09-20-2005, 03:17 PM
Yes, I was going to comment on that before (the speed) but, you hadn't brought it up. There appears to be something fundamentally wrong with the approach taken in the script. Because I was testing/working on it, at on point I had four browsers windows open with this script running in them. I have a fairly fast machine, much faster than any available when the script was first written. However, my entire computer started to slow down. Once I closed all but one of those instances of the script, the speed of my computer picked right up again.

The bubbles do run more slowly in Mozilla than IE. On that front, since the bubble's movement speed is overseen by a repeating timeout whose interval (in milliseconds) is set by the speed variable, values less than 0 are meaningless.

jscheuer1
09-20-2005, 04:22 PM
Here is a mod of a similar script that, although it suffers to a degree from the same problem as regards speed, is nowhere near as bad (any script that constantly updates the screen will be a bit of a drain on cpu speed):

<script type="text/javascript">
<!--

//Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
//Modified by Dynamic Drive for NS6 functionality
//visit http://www.dynamicdrive.com for this script
//Modified by jscheuer1 in http://www.dynamicdrive.com/forums
//to fall up, add doctype compatibility & account for
//differences in speeds among browsers

var speed=60 // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="bubble.gif";
Image1=new Image();
Image1.src=grphcs[1]="bubble.gif"
Image2=new Image();
Image2.src=grphcs[2]="bubble.gif"
Image3=new Image();
Image3.src=grphcs[3]="bubble.gif"
Image4=new Image();
Image4.src=grphcs[4]="bubble.gif"
Image5=new Image();
Image5.src=grphcs[5]="bubble.gif"

//////////////// Stop Editing //////////////

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all||window.opera)?1:0;

speed=ns6? speed-12 : speed

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= (Math.random()*5+3)*-1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:iecompattest().scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:iecompattest().scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < 0 ){
Ypos[i]=WinHeight+60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=(Math.random()*5+3)*-1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i])+'px';
document.getElementById("si"+i).style.top=Ypos[i]+hscrll+'px';
}
else{
eval("document.all.si"+i).style.left=Xpos[i]+'px';
eval("document.all.si"+i).style.top=Ypos[i]+hscrll+'px';
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',speed);
}

window.onload=fall
//-->
</script>The script goes in the body, like the other one.

Hieronymus
09-25-2005, 05:48 PM
If you take a look at this site:

http://www.hetwalhalla.nl/ (works in MSIE only)

You'll see a working bubble script. Bubbles only go upward. Which is good enough for me. The page doesn't work in FF. That's why I updated the layout to this page:

http://www.hetwalhalla.nl/inhoud.html

The script on the original site doesn't uses as much CPU power as the one here. The script is in the file /script.js It's mixed with some code for the menu. But I can't sort it out. Can anyone help me.

In the new layout (inhoud.html) the menu works with CSS and the sliding doors princible. So I do not need that part of the CSS code anymore.

can anybody help me with that or tell me why the 'old' script on the original layout is so much faster?

Jeroen

jscheuer1
09-25-2005, 06:57 PM
The script I posted solves all those problems already. If you want no side to side movement (though, I cannot imagine why) just change this line:

sx = Speed[i]*Math.cos(Cstep[i]);to:

sx = 0;If you just want to reduce the side to side movement, do this:

sx = Speed[i]*Math.cos(Cstep[i])/2;The bigger you make the number 2, the less the lateral sway.