Bubble Effect Help

**devinrayolsen** · 06-03-2008, 04:16 PM

1) Script Title: Bubble Effect

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/bubble.htm

3) Describe problem:
Hi,
the problem I am having with this script is that it simply will not work with Fire Fox yet works fine with IE. The script says it works with FF1+ IE5+ Opr7+ and works fine with Fire Fox when you visit the script URL above.
Once you implement the script however into a HTML document the Images show up but they do not float up like they should and rather just collect in the upper left hand corner of the screen and don't move.

Can anyone please help me get this to work with FF??

**Jas** · 06-04-2008, 02:47 AM

Can you post a link to the page in question?

**devinrayolsen** · 06-04-2008, 07:10 PM

Hi Jas,
I posted a link to where the script resides on dynamicdrive.com

http://www.dynamicdrive.com/dynamicindex3/bubble.htm

Try it out, when you goto that link using fire fox you will see that the effect works, but when you try to grab the script/images and implement it your self into a HTML page the script only works with IE and not fire fox.

Thanks m8.

**Jas** · 06-05-2008, 04:12 AM

I'm sorry, I meant to a page where you are implementing it. But in the mean time, I will try implementing it myself to see if I can make it work (I'll have to do that tomorrow, though).

**devinrayolsen** · 06-05-2008, 09:01 PM

Oh sorry yeah I don't have a hosting right now so I cant post a version of my own up. I appreciate the help Jas I have been pulling my hair out over this one for sometime now.

I Look forward to your results!

**Jas** · 06-06-2008, 03:51 PM

So, I tested the script and it does in fact work. Put this in an HTML file:

Code:

<html>
<head></head>
<body>
<script language="JavaScript1.2">
<!-- Begin

//Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
//Based on code by Altan d.o.o. (snow@altan.hr)
//For full source code and installation instructions to this script, visit http://www.dynamicdrive.com

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "bubble.gif"
snow[1] = "bubble.gif"
snow[2] = "bubble.gif"

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 = 1800;

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();
j = 0;

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\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
                } else {
                        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" 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; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
                } else {
                        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
                }
        }
        if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() {  // Netscape main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
                yp[i] -= sty[i];                if (yp[i] < -50) {
                        xp[i] = Math.random()*(doc_width-am[i]-30);
                        yp[i] = doc_height;
                        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]+pageYOffset;
                document.layers["dot"+i].left = xp[i] + 
am[i]*Math.sin(dx[i]);
        }
        setTimeout("snowNS()", speed);
}

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

if (ns4up) {
        snowNS();
} else if (ie4up||ns6up) {
        snowIE_NS6();
}
// End -->
</script>
</body>
</html>

I tested it with Firefox 2.0 (and IE7) on Windows Vista OS.

My best guess is that you have another script conflicting with this one. Can you post the code for the page you are working on?

**devinrayolsen** · 06-06-2008, 06:35 PM

Hum well it seems because I had this in my html document the script wouldn't work with FF.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Try adding that bit into the document.
Strang huh?

Thanks man!

**Jas** · 06-07-2008, 01:32 AM

Ah, yes, the DOCTYPE. I've had some problems like that in the past. One thing you can try is adding this bit of code to the head section of your web page (I doubt it will work, but there is a chance):

Code:

<style type="text/css">
html, body{
    width:100%;
    height:100%;
}
</style>

It explicitly tells the browser how big to make the html and body tags.

If that doesn't work, you may have to choose between the script and the DOCTYPE.

Thread: Bubble Effect Help

Thread Tools

Search Thread

Bubble Effect Help

Bookmarks

Bookmarks

Posting Permissions