Display layer based on browser width

Greg K posted this at 21:50 — 27th February 2007.

Joined: Nov 2003

The following script can be used to display a layer only if a the browser window is at least the specified value.

Why? With more and and more "widscreen" displays, there can be a lot wasted space if you don't want to have a site that truly flows to fill all the width. But if you fill it with "extra content", you end up with scroll bars for people on narrow screens.

So with this, you can create a layer, place it say at (1,1) and visibility to hidden. Then call this script that will move it to final location and make it visible if the browser is wide enough.

function KG_WideShow(iMinWidth,oLayer,iLeft,iTop)
{
  if (parseInt(navigator.appVersion)>3)
  {
    var brWidth = 0;
    var kgObj;
    
    var ns = navigator.appName == "Netscape";
    var ie = navigator.appName.indexOf("Microsoft")!= -1;
    var op = navigator.appName.indexOf("Opera")!= -1;
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && 
                 (navigator.appName == "Microsoft Internet Explorer") && 
                 (parseInt(navigator.appVersion) >= 4);
  
    if (ns) brWidth = window.innerWidth;
    if (ie || op) brWidth = document.body.offsetWidth;

    if (brWidth > iMinWidth)
    {
      // GET DOCUMENT OBJECT
      if       (ns4)    kgObj = document[oLayer];
      else if  (ns5)    kgObj = document.getElementById(oLayer);
      else              kgObj = document.all ? document.all[oLayer] : null;
        
      if (ns5 || macIE5)
      {
        iLeft += "px";
        iTop += "px";
      }
        
      if (ns4)
      {
        kgObj['visibility'] = 'visible';
        kgObj['left'] = iLeft;
        kgObj['top'] = iTop;
      }
      else
      {
        kgObj['style']['visibility'] = 'visible';
        kgObj['style']['left'] = iLeft;
        kgObj['style']['top'] = iTop;
      }
    }
  }
}

'In your page, you can create the layer such as:

<div id="optcontent">
  <p>Optional Content info if browser is wide enough.</p>
  <p>The browser window needs to be at least 990 pixels wide for these optional DIV's to show.</p>
</div>

and in your CSS (not all these are needed, mainly just the top 4):

#optcontent
{
  visibility: hidden;
  position: absolute;
  top: 1px;
  left: 1px;
  margin: 0px;
  padding: 5px;
  width: 170px;
  height: 300px;
  background-color:#ffffff;
}

Finally, call the javascript in the BODY onLoad using the following:

KG_WideShow(minWidth,Layer,xPos,yPos);
minWidth = the minimum width of the browser for it to display layer
Layer = The ID of the layer to show
xPos, yPos = Left & Top alues to give the layer when shown.

So for the example code I gave above, you can use:
<body onLoad="KG_WideShow(990,'optcontent',790,275);">If you have several layers to control, you may want to place them all in a function, and call that function with the onload like the following (snipped from my page, which is why doesn't display the openng and <script> tags)

    function KG_PageLoad()
    {
       KG_WideShow(990,'optheader',790,15);
       KG_WideShow(990,'optcontent',790,275);
    }
  &lt;/script&gt;
</head>
<body onLoad="KG_Pageload();">

The code is from various examples elsewhere that I pick and choose the best method that semed to work for me. Most of the browser checking is from what dreamweaver puts out.

Let me know if you find a problem with this, especially if for a certain browser it dosn't work, as this is code that I put together for use in my own sites. I couldn't find canned script to do it, so after finally testing it (with browsers I have) and it seems to work, figured I'd place it here for others to use.

-Greg

PS. One note, the javascript code is not written to handle if you pass it bad values (layers that don't exist, etc.) because if you use this, you should be testing it to make sure it is working right, not just putting out code that should handle a typo on your part.

demonhale posted this at 00:44 — 28th February 2007.

He has: 3,278 posts

Joined: May 2005

good tip, I suggest adding a sample page, the script in action...

Greg K posted this at 03:21 — 28th February 2007.

He has: 2,145 posts

Joined: Nov 2003

Here is a sample of the code: http://wtvgames.com/kgWideShow

This sample is designed for the main content to fit in 800wide, I also created a link designed for content to fit in 640 wide (for those stuck at 800x600 and wouldn't be able to test the first one.

I'm also playing around with adding code to reevaluate the size whenever the browser is resized, once done they will be linked to from the sample. Currently you have to hit RELOAD/REFRESH after resizing the window (which for regular browsing, most people don't resize much while visiting a site, so don't feel not automatically doing it doesn't take away from the functionality)

{EDIT 2007-02-27} Editied original posted code to work with Opera 9 as well on Win XP

I'm using I am using Firefox 2 and IE 7 on WinXP, both those are working fine.

-Greg