← Being trustworthy and making a difference

Hurricane Katrina →

Browser resize, iFrames, toggling the sidebar and JS debugging

August 30th, 2005 | JavaScript/CSS

A project that I am working on, teaches me some cool Javascript techniques every now and then. We needed to show a navigation area and the main content area. The obvious answer was to use frames. We also had to have something that can control both these frames. I decided on using iFrames since they would be flexible and serve the purpose of the project well.

There are two cool things that I want to write about today.

  1. Toggling the display of iFrames - turn on the navigation frame or turn it off
  2. Automatically resizing the frames when the browser size changes - user resizes, maximize window etc

The code will follow, but the major issues came up because of the differences between Firefox and IE. The window.onresize event fires when the window gets resized, and when you resize the iframe on that, you get another resize event. So this gets in a loop and can lead to a crash. Firefox emits the onresize event only once. The IE specific window.onresizeend event is sent only once - when the window is first opened - I did not get it even after resizing the window after the initial display.

The toggle seemed simple - make the visibility property of the iFrame style to either 'visible' or 'hidden' and I would have the toggle in place. That works, but only in Firefox! And then, what's the use of hiding the navigation bar if your main frame does not expand to utilize the space created! So you need to resize the frames too!

Apart from all that, I also found a handy debugging method! If I printed all the properties of an object, I would be able to figure out a lot more on what's happening and what's available on a particular browser. Checkout the printVars() function in the code. We do something similar to that very often in PHP and Flash ActionScript and doing that in JavaScript was much better than using alert's for debugging!

PLAIN TEXT
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <title>Browser Resize and IFrames handling</title>
  5. <script type="text/javascript" language="javascript">

PLAIN TEXT
JavaScript:
  1. var resizeTimeout = undefined;
  2. var resizeInProgress = false;
  3.  
  4. function resizeComplete()
  5. {
  6.     clearTimeout(resizeTimeout);
  7.     resizeInProgress = false;
  8. }
  9.  
  10. function resetHandler()
  11. {
  12.     if (isBrowser("IE") && resizeInProgress == false)
  13.     {
  14.         if (resizeTimeout != undefined)
  15.         {
  16.             clearTimeout(resizeTimeout);
  17.         }
  18.         resizeTimeout = setTimeout("resetSize();", 500);
  19.     }
  20.     else if (isBrowser("FF"))
  21.     {
  22.         resetSize();
  23.     }
  24. }   
  25. function resetSize(obj)
  26. {
  27.     var w;
  28.     var h;
  29.     var deductW = 210;
  30.     var deductH = 110; 
  31.    
  32.     var myWidth = 0, myHeight = 0;
  33.     if( typeof( window.innerWidth ) == 'number' )
  34.     {
  35.         //Non-IE
  36.         myWidth = window.innerWidth;
  37.         myHeight = window.innerHeight;
  38.     }
  39.     else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
  40.     {
  41.         //IE 6+ in 'standards compliant mode'
  42.         myWidth = document.documentElement.clientWidth;
  43.         myHeight = document.documentElement.clientHeight;
  44.     }
  45.     else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
  46.     {
  47.         //IE 4 compatible
  48.         myWidth = document.body.clientWidth;
  49.         myHeight = document.body.clientHeight;
  50.     }
  51.    
  52.     if (isBrowser("IE"))
  53.     {
  54.         clearTimeout(resizeTimeout);
  55.         resizeTimeout = setTimeout("resizeComplete();", 1500);
  56.         w = myWidth - deductW;
  57.         h = myHeight - deductH;
  58.         resizeInProgress = true;
  59.         //alert("w "+w+", h"+h);
  60.         try
  61.         {
  62.             navFrame.resizeTo(200,h);
  63.             mainFrame.resizeTo(w,h);
  64.         }
  65.         catch(e)
  66.         {
  67.             //alert(e.message);
  68.         }
  69.     }
  70.     else if (isBrowser("FF"))
  71.     {
  72.         var obj = MM_findObj("navFrame");   
  73.         var obj2 = MM_findObj("mainFrame");
  74.         w = myWidth - deductW;
  75.         h = myHeight - deductH;
  76.         obj.setAttribute("height", h );      
  77.         obj2.setAttribute("width", w );  
  78.         obj2.setAttribute("height", h );               
  79.     }   
  80. }
  81. window.onresize = resetHandler;
  82.  
  83. function printVars(obj)
  84. {
  85.     var str = "OBJECT: "+obj+"<br />";
  86.     for(var prop in obj)
  87.     {
  88.         str += "prop "+prop+" - "+obj[prop]+"<br />";
  89.     }
  90.     MM_findObj("debugMsg").innerHTML = str;
  91. }
  92.  
  93. function isBrowser(which)
  94. {
  95.     var toCheck;
  96.     switch (which)
  97.     {
  98.         case "IE" : toCheck = "MSIE";
  99.                     break;
  100.         case "FF" : toCheck = "Firefox";
  101.                     break;         
  102.     }
  103.     if (undefined != toCheck)
  104.     {
  105.         return (navigator.userAgent.indexOf(toCheck) != -1)
  106.     }
  107.     return false;
  108. }
  109.  
  110. var TOCVisible = true;
  111. function toggleTOC()
  112. {
  113.     var obj = MM_findObj("navFrame");   
  114.     var obj2 = MM_findObj("mainFrame"); 
  115.     if (TOCVisible)
  116.     {
  117.         if (isBrowser("IE"))
  118.         {
  119.             navFrame.resizeTo(0,410);
  120.             mainFrame.resizeTo(760,410);
  121.             mainFrame.moveTo(9,60);
  122.         }
  123.         else if (isBrowser("FF"))
  124.         {
  125.             obj.setAttribute("width", 0);      
  126.             obj.style.visibility = 'hidden';
  127.             obj2.setAttribute("width", 760 );      
  128.             obj2.style.left = '0px';
  129.         }
  130.         TOCVisible = false;
  131.     }
  132.     else
  133.     {
  134.         if (isBrowser("IE"))
  135.         {
  136.             navFrame.resizeTo(200,410);
  137.             mainFrame.resizeTo(560,410);
  138.             mainFrame.moveTo(209,60);
  139.         }
  140.         else if (isBrowser("FF"))
  141.         {
  142.             obj.setAttribute("width", 200);  
  143.             obj.style.visibility = 'visible';
  144.             obj2.setAttribute("width", 560 );      
  145.             obj2.style.left = '209px';     
  146.         }      
  147.         TOCVisible = true;
  148.     }   
  149.     //printVars(obj2.style);
  150. }
  151.  
  152. function MM_findObj(n, d) { //v4.01
  153.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  154.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  155.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d .forms.length;i++) x=d.forms[i][n];
  156.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  157.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  158. }
  159.  
  160. function init()
  161. {
  162.     resetSize();
  163. }

PLAIN TEXT
HTML:
  1. </script>
  2. </d></script></head>
  3. <body onLoad="init();">
  4. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  5.   <tr>
  6.     <td><h2 color="#CCCCCC">Resizing browser, turning on and off side bar, with iFrames</h2></td>
  7.   </tr>
  8. </table>
  9. <!-- MAIN CONTENT AREA STARTS HERE -->
  10. <table width="100%" border="0" cellpadding="0" cellspacing="1">
  11.   <tr>
  12.     <td valign="top" align="left" width="200"> <iframe name="navFrame" id="navFrame" style="visibility:visible" src="nav.htm" width="200" height="410" frameborder="0" marginheight="0" marginwidth="0"></iframe> </td>
  13.     <td valign="top" align="left"> <iframe name="mainFrame" id="mainFrame" src="main.htm" width="560" height="410" frameborder="0" marginheight="0" marginwidth="0"></iframe> </td>
  14.   </tr>
  15. </table>
  16. <!-- MAIN CONTENT AREA ENDS HERE -->
  17. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  18.   <tr>
  19.     <td align="center" bgcolor="#CCCCCC"><a href="#" onClick="toggleTOC();">Toggle Navigation</a></td>
  20.   </tr>
  21. </table>
  22. <div id="debugMsg"></div>
  23. </body>
  24. </html>

I am not putting in any code explanation here, hope you find the code easy to follow. You will need to create the nav.htm and main.htm files to test this.

Comments welcome!

 

0 comments ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment