Internet Explorer has several bugs in it but one of them that I was able to find a solution to was showing my DIV tags over certain controls like a dropdown. This code is based off of some code that Joe King designed which I have enhanced.

Well here I am again with another article that I hope will help you in your quest for the perfect site or application. In this article I am actually going to talk a bit about JavaScript and an issue in Internet Explorer. If you have ever tried to create a paragraph of text that shows up when you click on a button or hover over a word then you may have come across the issue as I did. The issue is that if you use a <div> tag to hold your text and then change its display from "none" to "block" and your placement of the <div> falls over a dropdown or listbox the dropdown or listbox will cover up your text.

This is because the listbox and dropdown are actually derived from Windows form controls, not web based controls. Now in my quest for a solution I have come across multiple solutions. The first is to just rearrange your page. Well sometimes we just can't do that because it is out of our hands. The second is to hide any controls that might fall under the <div> when it is shown and then show them when it is hidden. I don't like this idea because it makes it seem like something has changed on the form. So if I did not look at the values of the dropdown or listbox then, at least to me, it seems like it may have changed and I would like to know why, even if it did not actually change. Just a pet peeve I guess. The third option and the one I have taken and improved upon was quite clever.

This new method was created by Joe King, Sample for using a DIV IFRAME shim to cover over SELECT Boxes and other windowed controls in IE. His idea was to use an <IFRAME> to cover up the dropdown or listbox and then place the div just above it. Works quite nicely as long as you have absolute position and the left and top set for the <div>. But what if you don't? Well that is where my code below comes in. You pass in 4 parameters that are explained more below. My idea has to do with finding three objects in the page:

1. <div> tag where your text will be.
2. <IFRAME> tag that will be used to cover the controls
3. The control you want your dive to show up next to. (example: a help image where you want the text to show up next to)
4. The position where you want to show your <div> tag. (values can be left, right, top or bottom)

Just as a note though you must have a different <IFRAME> if you intend on having any of your <div> tags sticking around. If you have one <div> that sticks around and then you have another that is run as a mouseover and then mouseout to hide it will mess things up a bit. So just be forewarned.

Example:

In the example above you can run your mouse over the help image and you will see how the text is show over the dropdowns. Also something to note is this is an Internet Explorer issue so NO it has not been tested with Netscape or Opera or any other browser.

<input style="display:block;z-index:99999;position:absolute;white-space:nowrap;" 
type="image" name="helpImage" id="helpImage" 
onmouseover="javascript:toggleDisplay('helpImage_div','HelpShim','helpImage','bottom');" 
onmouseout="javascript:toggleDisplay('helpImage_div','HelpShim','helpImage','');" 
src="HLP.BMP" border="0" />

<div style="display:none;z-index:99999;position:absolute;white-space:nowrap;" 
id="helpImage_div">Select your font and font size.</div>

<iframe id="HelpShim" src="javascript:false;" scrolling="no" frameborder="0" 
style="position:absolute; top:0px; left:0px; display:none;"></iframe>

The code above shows the source of the image, <div> and <iframe>. You will notice in the first tag that there is a mouseover and mouseout. This is where we call the function to toggle our div to show. You could do a click event just as easily. The second is our <div> tag where we will keep the text. And the third tag is the <iframe>. Pretty simple but hard to find.

<script language="javascript">
function toggleDisplay(div,iframe,objpos,pos)
{
	var t=0;
	var l=0;
	var state=false;

	var cNode = document.getElementById(objpos);
	while(cNode.tagName!='BODY'){ 
       		l+=cNode.offsetLeft; 
       		t+=cNode.offsetTop; 
       		cNode=cNode.offsetParent; 
    	}

	var DivRef = document.getElementById(div);
	var IfrRef = document.getElementById(iframe);
   	var ObjPos = document.getElementById(objpos);

	if (DivRef.style.display=="none") {
		state=true;
	} else {
		state=false;
	}

   	if(state)
   	{
    		DivRef.style.display = "block";
    		IfrRef.style.width = DivRef.offsetWidth;
    		IfrRef.style.height = DivRef.offsetHeight;
	
	switch (pos) {
		case "left": 
    			DivRef.style.top = t;
    			DivRef.style.left = (l-ObjPos.offsetWidth);
    			IfrRef.style.top = t;
    			IfrRef.style.left = (l-ObjPos.offsetWidth);
	  		break;
		case "right": 
			DivRef.style.top = t;
			DivRef.style.left = (l+ObjPos.offsetWidth);
    			IfrRef.style.top = t;
    			IfrRef.style.left = (l+ObjPos.offsetWidth);
	  		break;
		case "bottom": 
			DivRef.style.top = (t+ObjPos.offsetHeight);
    			DivRef.style.left = l;
    			IfrRef.style.top = (t+ObjPos.offsetHeight);
    			IfrRef.style.left = l;
	  		break;
		case "top": 
    			DivRef.style.top = (t-ObjPos.offsetHeight);
    			DivRef.style.left = l;
    			IfrRef.style.top = (t-ObjPos.offsetHeight);
    			IfrRef.style.left = l;
	  		break;
        	}


    	IfrRef.style.zIndex = DivRef.style.zIndex - 1;
    	IfrRef.style.display = "block";
    	IfrRef.style.backgroundColor = "black";
   	}
   	else
   	{
    		DivRef.style.display = "none";
    		IfrRef.style.display = "none";
   	}

}

A special thanks to Joe King for coming up with the idea.
So until next time. Cya.
Stanley
http:///www.glass-images.com

Author Name: Stanley Glass Jr
Bio: Stanley has been programming for about 10 years now. Starting first with Basic. With the introduction of the Internet he found a new desire. A desire to create web pages. Once he created his first he was addicted to it. Html, then javascript, then Perl, on to ASP, and then on to VB and now ending with VB.NET and ASP.NET.