Results 1 to 7 of 7

Thread: Bubble script not working in FF

  1. #1
    Join Date
    Sep 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Bubble script not working in FF

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:
    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:
    Code:
    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';
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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)
    Last edited by Hieronymus; 09-20-2005 at 08:29 AM. Reason: more info...

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):
    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:
    Code:
    sx = Speed[i]*Math.cos(Cstep[i]);
    to:
    Code:
    sx = 0;
    If you just want to reduce the side to side movement, do this:
    Code:
    sx = Speed[i]*Math.cos(Cstep[i])/2;
    The bigger you make the number 2, the less the lateral sway.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •