• Home
• About

Showing Dynamic DIV above SELECT Box

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.

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.

Similar Posts

• Convert XML Document to String in JavaScript
• Calculating DIV Position in JavaScript
• JavaScript XML Parsing on Microsoft Internet Explorer
• JavaScript XML Parsing on Mozilla Firefox / Opera Browsers
• JavaScript XML Parser Properties
• FORM POST in PHP using AJAX
• Check For Special Characters in JavaScript
• Debugging JavaScript Code for Errors
• Data Communication between JavaScript and Adobe Flash Movie
• Two Dimensional Arrays in JavaScript

Custom Search

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.