Results 1 to 8 of 8

Thread: Bubble Effect Help

  1. #1
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Bubble Effect Help

    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??

  2. #2
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Can you post a link to the page in question?
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  3. #3
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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).
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  5. #5
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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?
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  7. #7
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #8
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

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
  •