Random thoughts from an unusual company

Thing-a-Day 4: Shimmy-Shim-Shim

Tim Davis  16 July 2009 08:00:00
This is Day 4 of my week of tips for web development in Domino. I hope some of you find them useful.

I have been talking about Web 2.0 dialog effects. Today I want to mention a problem you may encounter when positioning divs in IE. Controls such as drop-down comboboxes will keep showing through your dialog from behind no matter what you do with the z-index.

This is because IE is terrible IE uses Windows itself to draw these kind of controls, lifting them out of the normal hierarchy.

To fix this problem, you use a technique known as the "iframe shim". This is where you put a blank iframe behind your div. The windows controls don't show through an iframe, so they don't show through your div.

You can create the shim with javascript. like this:

      var shim = document.createElement("iframe");
      shim.id="myShim";
      shim.style.position="absolute";
      shim.style.zIndex="1";
      shim.style.width=myDialog.offsetWidth +"px";
      shim.style.height=myDialog.offsetHeight +"px";
      shim.style.top=myDialog.top +"px";
      shim.style.left=myDialog.left +"px";
      shim.setAttribute("frameborder","0");
      shim.setAttribute("src","javascript:false;");
      document.body.appendChild(shim);

Notice the line where you set the content of the iframe to be javascript:false. This avoids you getting security warnings in some browsers.

When you want to get rid of it, use something like this:

      var shim = document.getElementById("myShim");
      document.body.removeChild(shim);

If you are using a darkened background effect, you will want your shim to be the size of the background, not just the dialog, otherwise these controls with show through that as well.

Tomorrow: Keeping your dialog positioned when scrolling.
Comments
No Comments Found