Techie Zone

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.

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.

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.

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.

Custom Search

Popular Articles:

• JavaScript XML Parsing on Microsoft Internet Explorer
• Declaring Variables in Javascript
• Implementing Stack Object in JavaScript
• Javascript Optimization Techniques
• JavaScript XML Parsing on Mozilla Firefox / Opera Browsers
• Convert XML Document to String in JavaScript
• Timers Function in JavaScript
• Objects in Javascript
• JavaScript Tutorial – Sorting Numeric Array
• How to make sequential ajax call