[RESOLVED] Bubble Problems

**web wheeler** · 04-14-2010 12:54 PM

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:

**justinbarneskin** · 04-15-2010 07:23 PM

Strict, while scripting for Netscape4??
Look for a modern invention

**web wheeler** · 04-16-2010 12:04 PM

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!

**justinbarneskin** · 04-16-2010 02:01 PM

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>

**web wheeler** · 04-16-2010 04:04 PM

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.

**justinbarneskin** · 04-16-2010 06:22 PM

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

**web wheeler** · 04-16-2010 07:10 PM

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?

**justinbarneskin** · 04-16-2010 07:46 PM

Its not working in IE. If that isn't a problem?

**web wheeler** · 04-16-2010 11:49 PM

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.

**justinbarneskin** · 04-17-2010 01:25 AM

ok, thats fine, what to work with, on to add the bubbles

**justinbarneskin** · 04-17-2010 12:27 PM

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>

**web wheeler** · 04-18-2010 11:25 AM

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

Thread: [RESOLVED] Bubble Problems

Thread Tools

Display

[RESOLVED] Bubble Problems

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions