Showing Dynamic DIV above SELECT Box

Posted by Hitesh Agrawal

January 25, 2008

This article will teach you on showing Dynamic Div Box above Select Control using JavaScript. Basically this problem is specific for Microsoft Browser i.e. Internet Explorer, In Microsoft Internet Explorer the POP UP DIV goes in background if there was any SELECT control and because of this the html content shown inside the div was not getting displayed because of the Select Control.

Dynamic DIV

Fig: Select Box Above DIV Content

SOLUTION

In Internet Explorer HTML controls like SELECT, IFRAME comes under Windows Control which has the highest Index. So to best approach to hide the select box under DIV message is to insert another windows control in between the Select Box and DIV Message. So an empty iframe was inserted between the two.

Dynamic DIV

FIG: DIV Structure Along with Iframe and Select Control
As you can see that an empty IFRAME overrides the the SELECT box property and the IFRAME control now has the highest layer for Window based control. Now going ahead will need to use JavaScript coding to Show/Hide the DIV and the Iframe.

JAVASCRIPT CODE

function ShowDiv(divid,iframe, state)
{
	var DivRef = document.getElementById(divid);
	var IfrRef = document.getElementById(iframe);
	if(state)
	{
		DivRef.style.display = "block";
		IfrRef.style.width = DivRef.offsetWidth;
		IfrRef.style.height = DivRef.offsetHeight;
		IfrRef.style.top = DivRef.style.top;
		IfrRef.style.left = DivRef.style.left;
		IfrRef.style.zIndex = DivRef.style.zIndex - 1; 
		IfrRef.style.display = "block";
	}
	else
	{
		DivRef.style.display = "none";
		IfrRef.style.display = "none";
	}
}

Explanation for JavaScript Code:

Here I am accepting the DIV id , Iframe id and the state(refers to showing or hiding the div) in the function parameters
If the state parameter passed false i.e. We want to hide the div and we are hiding both the Iframe and the div
But if the state is true then following changes are made:
Assigning Iframe width and height as per the Div width and height
Assigning Iframe left and top coordinates as per the Div width and height
Assigning z-index of the Iframe one less than the z-index of the select box control there by making the priority of the Iframe higher than the select box control

DIV and IFRAME POSITION

<a href="#" onclick="ShowDiv('div','iframe', true); return false;">
<img src="image.gif" border="0" style="margin: 0px;" /></a>
<div id="div">div message</div>
<iframe id="iframe" scrolling="no" frameborder="0"></iframe>

Explanation for HTML Code:

Here I am calling ShowDiv JavaScript function when user clicks on the image. I am passing the div id and the iframe id that will be shown
The DIV to be show is defined below that. Please note that the positioning details for the DIV needs to be passed in style attribute.
On similar lines the iframe to be show is defined below that. Please note that the positioning details for the Iframe needs to be passed in style attribute.

Bookmark It

Hide Sites

Custom Search

Javascript

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.