[Javascript] "Multiple" Select controls and popup objects.

Mike Dougherty mdougherty at pbp.com
Thu Apr 22 08:10:59 CDT 2004


When I first encountered this Select (and Object and Iframe?) problem, I was using a DHTML menu 
that I couldn't get in front of the objects already on the page.  Upon reading through source at 
Microsoft's own page, I saw that basically their solution was to hide the offending tags while the 
menu item was being displayed.  (They have since changed their page to make this problem less 
obvious)  Here's the code:  (ok, so it's not the most elegant hack)

<span id='menuitem' 
     onMouseOver="hideOnTops(); displayMenuList();"
     onMouseOut="showOnTops(); hideMenuList();">MenuItem</span>


/* select/object controls b/c MS renders these objects at z-index: >100 */

	function HideOnTops() 	{
			hideElement("SELECT");
			hideElement("OBJECT");
		} /* HideOnTops() */
	function ShowOnTops()	{
			showElement("SELECT");
			showElement("OBJECT");
		} /* ShowOnTops() */


	// hideElement & showElement were directly "Inspired" by www.microsoft.com's main page
	function hideElement(elmID) {
		for (i = 0; i < document.all.tags(elmID).length; i++) {
			obj = document.all.tags(elmID)[i];
			if (! obj || ! obj.offsetParent) continue;

			// Find the element's offsetTop and offsetLeft relative to the BODY tag.
			objLeft   = obj.offsetLeft;
			objTop    = obj.offsetTop;
			objParent = obj.offsetParent;
			while (objParent.tagName.toUpperCase() != "BODY") {
				objLeft  += objParent.offsetLeft;
				objTop   += objParent.offsetTop;
				objParent = objParent.offsetParent;
				} /* while(..) */
			// Adjust the element's offsetTop relative to the dropdown menu
			x = 0 // these lines added because x and y
			y = 0 // weren't defined 
			objTop = objTop - y;
	
			obj.style.visibility = "hidden";
			} /* for(i) */
		} /* hideElement(elmID) */
		
	function showElement(elmID)	{
		for (i = 0; i < document.all.tags(elmID).length; i++) {
			obj = document.all.tags(elmID)[i];
			if (! obj || ! obj.offsetParent) continue;
			obj.style.visibility = "";
			} /* for(i) */
		} /* showElement(elmID) */



More information about the Javascript mailing list