www.webdeveloper.com
Results 1 to 12 of 12

Thread: [RESOLVED] Bubble Problems

  1. #1
    Join Date
    Apr 2007
    Location
    Toronto
    Posts
    33

    resolved [RESOLVED] Bubble Problems

    Yes, it's embarrassing, but I'm having bubble problems

    Please, please can somebody help me?

    Here's the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head>
      <title>Bubbles Test</title>
      <meta name='description' content="Bubbles Test">
      <meta name='author' content='Web Wheeler'>
      <meta name='copyright' content='&copy; 2010'>
      <meta name='robots' content='noindex,nofollow'>
      <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
      <script type='text/javascript'>
        function bubbles() {
          scy=(document.all)?document.body.scrollTop:window.pageYOffset;
          scx=(document.all)?document.body.scrollLeft:window.pageXOffset;
          for (i=0; i < num; i++){
            sy = sp[i]*Math.sin(270*Math.PI/180);
            sx = sp[i]*Math.cos(s1[i]*5);
            yp[i]+=sy;
            xp[i]+=sx; 
            if (yp[i] < -40){
              yp[i]=y;
              xp[i]=x;
              sp[i]= 6+Math.random()*3;
              gr[i]=4;
              nz[i]=Math.random()*15+5;
            }
            if (n4){
              document.layers["bubble"+i].left=xp[i]+scx;
              document.layers["bubble"+i].top=yp[i]+scy;
            }
            if (ie){
              document.getElementById("bubble"+i).style.left=xp[i]+scx;
              document.getElementById("bubble"+i).style.top=yp[i]+scy;
              document.getElementById("bubble"+i).style.width=gr[i];
              document.getElementById("bubble"+i).style.height=gr[i]; 
            }
            if (n6||o6){
              document.getElementById("bubble"+i).style.left=xp[i]+scx;
              document.getElementById("bubble"+i).style.top=yp[i]+scy;
            }
            gr[i]+=rt[i]; 
            s1[i]+=s2[i];
            if (gr[i] > 14) gr[i]=15;
          }
          setTimeout('bubbles()',10);
        }
    
        function getObjectId(name) {
          if (document.getElementById) {
            this.obj=document.getElementById(name);
            this.style=document.getElementById(name).style;
          }else if (document.all) {
            this.obj=document.all[name];
            this.style=document.all[name].style;
          }else if (document.layers) {
            this.obj=getObjectNN4(document,name);
            this.style=this.obj;
          }
          return(this.obj);
        }
    
        function getObjectNN4(obj,name) {
          var x=obj.layers;
          var foundLayer;
          for (var i=0;i<x.length;i++) {
            if (x[i].id===name) { foundLayer=x[i]; }
            else if (x[i].layers.length) { var tmp=getObjectNN4(x[i],name); }
            if (tmp) { foundLayer=tmp; }
          }
          return foundLayer;
        }
    
        function getWindowHeight() {
          var windowHeight=0;
          if (typeof window.innerHeight==='number') {
            /***** Non-IE *****/    windowHeight=window.innerHeight;
          }else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            /***** IE 6+ in 'standards compliant mode' *****/    windowHeight=document.documentElement.clientHeight;
          }else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            /***** IE 4 compatible *****/    windowHeight=document.body.clientHeight;
          }
          return windowHeight;
        }
    
        function setIframeHeight() {
          var iframe=getObjectId('iframe');
          iframe.style.height=(getWindowHeight()-200)+'px';
        }
    
        function showBubbles() {
          n4=(document.layers);
          n6=(document.getElementById&&!document.all);
          ie=(document.all);
          o6=(navigator.appName.indexOf("Opera") != -1)?true:false;
          img0=new Image();
          img0.src="bubble.gif";
          num=(n6)?10:10;
          y=parseInt(document.getElementById("iframe").offsetHeight)+60;
          x=parseInt(document.getElementById("iframe").offsetLeft)+parseInt(document.getElementById("iframe").offsetWidth)-10;
          yp=new Array();
          xp=new Array();
          sp=new Array();
          rt=new Array();
          gr=new Array();
          s1=new Array();
          s2=new Array();
          nz=new Array();
          wh=(ie)?window.document.body.clientHeight:window.innerHeight;
          for (i=0; i < num; i++){                                                                
            yp[i]=Math.random()*wh-y;
            xp[i]=x;
            sp[i]= 6+Math.random()*3;
            s1[i]=0;
            s2[i]=Math.random()*0.1+0.05;
            gr[i]=4;
            nz[i]=Math.random()*15+5;
            rt[i]=Math.random()*0.5+0.1;
          }
          if (n4) for (i=0; i < num; i++) document.write("<LAYER NAME='bubble"+i+"' LEFT=0 TOP=-50>"+"<img src='bubble.gif' width="+nz[i]+" height="+nz[i]+"></LAYER>");
          if (ie) {
            document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
            for (i=0; i < num; i++) document.write('<img id="bubble'+i+'" src="'+img0.src+'" style="position:absolute;top:-50px;left:0px">');
            document.write('</div></div>');
          }
          if (n6||o6) for (i=0; i < num; i++) document.write("<div id='bubble"+i+"' style='position:absolute;top:-50px;left:0px'>"+"<img src="+img0.src+" width="+nz[i]+" height="+nz[i]+"></div>");
          bubbles();
        }
    
        window.onresize=setIframeHeight;
      </script>
    </head>
    <body onload='setIframeHeight();' style='background-color: #4682b4; color: #ffffff; font-family: sans-serif; font-size: 100&#37;; font-weight: normal; margin: 0 auto; text-align: center;'>
    <br><h2><u>Bubbles Test</u></h2>
    <br><br><iframe frameborder='1' id='iframe' style='height: 700px; width: 60%; overflow: auto;'></iframe>
    <script type='text/javascript'>
      showBubbles();
    </script>
    </body>
    </html>
    Here's a link to a partially working URL:

    Bubbles Test

    Here are the problems:

    1. Why does this code only seem work in quirks mode, and can it be changed to work in strict mode?
    2. Why can't I put showBubbles() in the <body onload='...'> tag?
    3. I want the bubbles to always come from the lower right-hand corner of the iframe, but I can't seem to get showBubbles() to work on window.onresize - I've tried to get it working but to no avail.
    4. I don't know javascript that well.

    If you'd like to try the code on your website, here's the bubble image:
    Attached Images Attached Images
    Last edited by web wheeler; 04-14-2010 at 02:14 PM. Reason: fixed typo

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    Strict, while scripting for Netscape4??
    Look for a modern invention

  3. #3
    Join Date
    Apr 2007
    Location
    Toronto
    Posts
    33
    OK, good point Justin. I've cleaned up the code a bit and made some changes to support different browser implementations of window size and window scrolling, and I also got rid of the DOCTYPE because that was just to put the browser into quirks mode, but I still have the same problems as before.

    The new code can be viewed on the "Bubbles Test" URL I posted.

    Even if you don't want to solve my problems for me, I completely understand that, but could you please point me in a direction to investigate?

    The main problems are:

    1. the code doesn't work in "standards compliant (strict?)" mode
    2. I can't get showBubbles() to work on window.onresize

    Thanks for your help!

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    The idea that usually gets best results is to start from nothing and write it yourself. However, I can't get past the window resize
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD><TITLE>bubbler</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/CSS>
    body{background-color: #4682b4; color: #ffffff; font-family: sans-serif; font-size: 100%; font-weight: normal; margin: 0 auto; text-align: center;}
    
    </STYLE>
    <SCRIPT type="text/javascript">
    function gwd(d){
    	if(navigator.appName!='Microsoft Internet Explorer'){d=='w'?d=innerWidth:d=innerHeight }
    	else{	d=='w'?d=document.body.clientWidth:d=document.body.clientHeight;}	return d	
    }
    function sih(){ 	var ifr=document.getElementById('iframe'); nh=gwd('h')-300+'px';  nw=gwd('w')*.66+'px'; alert(nw+' x '+nh);
    	ifr.style.height=nh; ifr.style.width=nw;
    }
    window.onresize =sih();
    </SCRIPT>
    <META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
    <body onload="sih()"  scroll="no" >
    <br><h2><u>Bubbles Test</u></h2>
    <p><iframe frameborder=1 id="iframe" src="" style="width:410px;height:410px"></iframe>
    
    </BODY></HTML>

  5. #5
    Join Date
    Apr 2007
    Location
    Toronto
    Posts
    33
    To fix the problem you're having, Justin, try window.onresize=sih; instead of window.onresize=sih();

    But, this is not the issue I'm having. The iframe resizes perfectly in the code I provided, but the application seems to freeze when I include showBubbles; on the window.onresize event.

    Also, as I posted before, the application only works in quirks mode, and I would like it to work in strict mode.

    Thanks very much for your help, Justin, but the solution is still no closer.

  6. #6
    Join Date
    Oct 2006
    Posts
    939
    Right. Thats why are started writing it from
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    solve my code and we can continue

  7. #7
    Join Date
    Apr 2007
    Location
    Toronto
    Posts
    33
    It looks to me like you're just trying to make a re-sizable iframe, right?

    If that's the case, then it's very easy: remove the alert and change window.onresize=sih(); to window.onresize=sih;

    If you want the iframe to resize in both the x and y dimensions, then change nw=gwd('w')*.66+'px'; to nw='75%';

    Your Working Code Here

    Is that what you're looking for, or did I miss something?

  8. #8
    Join Date
    Oct 2006
    Posts
    939
    Its not working in IE. If that isn't a problem?

  9. #9
    Join Date
    Apr 2007
    Location
    Toronto
    Posts
    33
    Yep, that is a problem... thanks!

    Here's what you need:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <head>
      <title>Re-Sizable Iframes Test</title>
      <meta name='description' content="Re-Sizable Iframes Test">
      <meta name='author' content='Web Wheeler'>
      <meta name='copyright' content='&copy; 2010'>
      <meta name='robots' content='noindex,nofollow'>
      <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
      <script type='text/javascript'>
        function getElementWithId(name) {
          if (document.getElementById) return(document.getElementById(name));
          if (document.all) return(document.all[name]);
        }
    
        function getWindowHeight() {
          var windowHeight=0;
          if (typeof window.innerHeight==='number') {
            windowHeight=window.innerHeight; /***** Non-IE *****/
          }else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            windowHeight=document.documentElement.clientHeight; /***** IE 6+ in 'standards compliant mode' *****/
          }else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            windowHeight=document.body.clientHeight; /***** IE 4 compatible *****/
          }
          return windowHeight;
        }
    
        function getWindowScroll() {
          var scrOfX = 0, scrOfY = 0;
          if( typeof(window.pageYOffset)=='number') { /***** Netscape compliant *****/
            scrOfY = window.pageYOffset;
            scrOfX = window.pageXOffset;
          } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { /***** DOM compliant *****/
            scrOfY = document.body.scrollTop;
            scrOfX = document.body.scrollLeft;
          } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { /***** IE6 standards compliant mode *****/
            scrOfY = document.documentElement.scrollTop;
            scrOfX = document.documentElement.scrollLeft;
          }
          return[scrOfX, scrOfY];
        }
    
        function setIframeHeight() {
          var iframe=getElementWithId('iframe');
          iframe.style.height=(getWindowHeight()-200)+'px';
        }
    
        window.onresize=setIframeHeight;
      </script>
    
    </head>
    <body onload='setIframeHeight();' style='background-color: #4682b4; color: #ffffff; font-family: sans-serif; font-size: 100%; font-weight: normal; margin: 0 auto; text-align: center;'>
    <br><h2><u>Re-Sizable Iframes Test</u></h2>
    <br><br><iframe frameborder='1' id='iframe' style='height: 700px; width: 60%; overflow: auto;'></iframe>
    </body>
    </html>
    Working Demo Here

    This is what I use.

  10. #10
    Join Date
    Oct 2006
    Posts
    939
    ok, thats fine, what to work with, on to add the bubbles
    Last edited by justinbarneskin; 04-17-2010 at 02:33 AM.

  11. #11
    Join Date
    Oct 2006
    Posts
    939
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <head>
      <title>Re-Sizable Iframes w/bubbles Test</title>
      <meta name='description' content="Re-Sizable Iframes Test">
      <meta name='author' content='Web Wheeler'>
      <meta name='copyright' content='&copy; 2010'>
      <meta name='robots' content='noindex,nofollow'>
      <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
      <script type='text/javascript'>
    
        function getElementWithId(name) {
          if (document.getElementById) return(document.getElementById(name));
          if (document.all) return(document.all[name]);
        }
    
        function getWindowHeight() {
          var windowHeight=0;
          if (typeof window.innerHeight==='number') {
            windowHeight=window.innerHeight; /***** Non-IE *****/
          }else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            windowHeight=document.documentElement.clientHeight; /***** IE 6+ in 'standards compliant mode' *****/
          }else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            windowHeight=document.body.clientHeight; /***** IE 4 compatible *****/
          }
          return windowHeight;
        }
    
        function getWindowScroll() {
          var scrOfX = 0, scrOfY = 0;
          if( typeof(window.pageYOffset)=='number') { /***** Netscape compliant *****/
            scrOfY = window.pageYOffset;
            scrOfX = window.pageXOffset;
          } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { /***** DOM compliant *****/
            scrOfY = document.body.scrollTop;
            scrOfX = document.body.scrollLeft;
          } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { /***** IE6 standards compliant mode *****/
            scrOfY = document.documentElement.scrollTop;
            scrOfX = document.documentElement.scrollLeft;
          }
          return[scrOfX, scrOfY];
        }
    
        function setIframeHeight() { clearTimeout(bub); //alert('IE pops this function twice')
          var iframe=getElementWithId('iframe'); 
          iframe.style.height=(getWindowHeight()-200)+'px'; showBubbles();
        }
    
        window.onresize=setIframeHeight;
      </script>
    </head>
    <body onload="setIframeHeight();" scroll="no" style='overflow:hidden;background-color: #4682b4; color: #ffffff; font-family: sans-serif; font-size: 100%; font-weight: normal; margin: 0 auto; text-align: center;'>
    <br><h2><u>Re-Sizable Iframes w/bubbles Test</u></h2>
    <br><br><iframe frameborder='1' id='iframe' style='height: 400px; width: 60%; overflow: auto;'></iframe>
    <div id="bubsHere" ></div>
    
      <script type='text/javascript'>
    function showBubbles() {
    	y=parseInt(document.getElementById("iframe").offsetHeight)+110;
    	x=parseInt(document.getElementById("iframe").offsetLeft)+parseInt(document.getElementById("iframe").offsetWidth)-10;
    	yp=new Array();	xp=new Array();	sp=new Array();	rt=new Array();	gr=new Array();	s1=new Array();	s2=new Array();	nz=new Array();
    	wh=getWindowHeight()
          for (i=0; i < num; i++){                                                                
            yp[i]=Math.random()*wh-y;
            xp[i]=x;
            sp[i]= 6+Math.random()*3;
            s1[i]=0;
            s2[i]=Math.random()*0.1+0.05;
            gr[i]=4;
            nz[i]=Math.random()*15+5;
            rt[i]=Math.random()*0.5+0.1;
          } var bub=''
            for (i=0; i < num; i++){ bub+='<img id="bubble'+i+'" src="'+img0.src+'" style="position:absolute;top:0px;left:0px;width:'+nz[i]+'px;height:'+nz[i]+'px;">';}
    	document.getElementById('bubsHere').innerHTML=bub
          bubbles();
        }
    function bubbles() {clearTimeout(bub);
    	var xy=getWindowScroll();	scx=xy[0]+'px';	scy=xy[1]+'px';
    	for (i=0; i < num; i++){
    		sy = sp[i]*Math.sin(270*Math.PI/180);	sx = sp[i]*Math.cos(s1[i]*5);
            yp[i]+=sy;        xp[i]+=sx; 
            if (yp[i] < -40){	yp[i]=y;	xp[i]=x;	sp[i]= 6+Math.random()*3;	gr[i]=4;	nz[i]=Math.random()*15+5;        }
              document.getElementById("bubble"+i).style.left=xp[i]+scx;
              document.getElementById("bubble"+i).style.top=yp[i]+scy;
              document.getElementById("bubble"+i).style.width=gr[i];
              document.getElementById("bubble"+i).style.height=gr[i]; 
    
            gr[i]+=rt[i];	s1[i]+=s2[i];
            if (gr[i] > 14) gr[i]=15;
          }
    	bub= setTimeout('bubbles()',bubspeed);
        }
    	
        var n6=(document.getElementById&&!document.all);
        var ie=(document.all);
        var o6=(navigator.appName.indexOf("Opera") != -1)?true:false;
        var num=10;
        img0=new Image();
        img0.src="bubble.gif";
    	var bub; var bubspeed=50; 
    </script>
    </body>
    </html>

  12. #12
    Join Date
    Apr 2007
    Location
    Toronto
    Posts
    33

    resolved

    Justin, your code works perfectly. Thanks so much for your help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles