Entry

Hide a combo box under a javascript menu in IE browser

Dec 2nd, 2003 11:28
John Sutton, Mike Hall of www.brainjar.com

Using Javascript to allow Javascript menu(s) to properly
overlay (hide) a combo box (select list) in the IE browser.
We use a Javascript menu done by Mike Hall (www.brainjar.com).
If you have your own menu, you should be able to use the
concepts, and subroutines I list below to do it yourself. Since we
use Mr. Hall's menu system, I just modified his code slightly
to perform this task.
In order to have the menus properly cover up a combo box
when they drop down add the code below.
1). 	Use a style sheet to provide relative positioning.
	<style type="text/css">
		<!--
			span.infox {
  				position: relative;	
			}
		-->
	</style>
2).	Enclose the combo boxes (<select> </select>) in
	<span> </span> tags with the labels as shown.
	<span id="dropx" class=infox> 		
		<select>
			<option>....</option>
			<option>....</option>
		</select>
	</span>
	(where x of dropx is numeric 1, 2, 3... for as many drop boxes 
you have drop1, drop2...)
2). 	When a menu button is pressed, you must calculate
    	the coordinates of the menu (top-left, bottom-right),
    	and you must determine the corrdinates of the combo
    	boxes (top-left, bottom-right). Knowing the coordinates
    	you must calculate if the boxes are under a menu. If 
    	so, you hide them. If not, they are visible.
    	The code below is a modified version of the Mike Hall's
    	Javascript menu with the extra code to determine
    	the corrdinates of the combo box(es).
    	function depressButton(button) {
  		var x, y;
  		var x1,y1,x2,y2
  		var itemlist_length;
  		// Update the button's style class to make it look like 
it's
  		// depressed.
 		button.className += " menuButtonActive";
  		// Position the associated drop down menu under the 
button and
  		// show it.
  		x = getPageOffsetLeft(button);
  		y = getPageOffsetTop(button) + button.offsetHeight;
  		// For IE, adjust position.
  		if (browser.isIE) {
    			x += button.offsetParent.clientLeft;
    			y += button.offsetParent.clientTop;
  		}
  		button.menu.style.left = x + "px";
  		button.menu.style.top  = y + "px";
  		//
  		//	Establish coordinates of the drop down menu
  		//
  		//	x1 = x of top,left
  		//	y1 = y of top,left
  		//	x2 = x of bottom, right
  		//	y2 = y of bottom, right
  		//
  		x1 = x;
  		y1 = y;
  		x2 = x + button.menu.offsetWidth;
  		y2 = y + button.menu.offsetHeight;
  		// works for IE ONLY
  		//*********************************
  			var objectid;
  			var objectx;
  			var ix;
  			var xy = Array();
  			//
  			//	Search for all objects which begin
  			//	with the name 'drop'. These should
  			//	be the combo boxes enclosed in a 
  			//	<span class=infox> </span> tag set.
  			//	In style.php you will find a style for
  			//	span.infox with a relative position
  			//	for correct coordinates translation in
  			//	relation to the drop down menu(s).
  			//
			if (document.all) {
				for(ix=0; ix <document.all.length; 
ix++) {
					objectid = document.all[ix].id;
					objectx = document.all[ix];
					if (objectid.substring(0,4) 
== "drop") {
						//
						//	Defines box
(area) coordinates of an object
						//	a combo box in 
this case.
						//
						//	xx = x of 
top,left
						//	yy = y of 
top,left
						//	xx2 = x of 
bottom, right
						//	yy2 = y of 
bottom, right
						//
						xx = getPageOffsetLeft
(objectx);
  						yy = getPageOffsetTop
(objectx);
  						xx2 = xx + 
objectx.offsetWidth;
  						yy2 = yy + 
objectx.offsetHeight;
						document.all
[ix].style.visibility = 'visible';
						if (xx >= x1 && xx <= 
x2) {
							if (yy >= y1 && 
yy <= y2) {
	document.all[ix].style.visibility = 'hidden';
							}
						}
						if (xx2 >= x1 && xx2 <= 
x2) {
							if (yy2 >= y1 
&& yy2 <= y2) {
	document.all[ix].style.visibility = 'hidden';
							}
						}
        if (xx <= x1 && xx2 >= x2) {
		if (yy >= y1 && yy2 <= y2) {
			document.all[ix].style.visibility = 'hidden';
		}
	}
					}
				}
			}
  		//*********************************	
  		// Find the width of a menu item.
  		if (button.menu.length > 0) {
  			button.menu.style.visibility = "visible";
  		}	
	}
3). 	Here are the subroutines (included in Mike Hall's Javascript 
code)
	that perform the proper object positioning.
	function getPageOffsetLeft(el) {
  		var x;
  		// Return the x coordinate of an element relative to 
the page.
  		x = el.offsetLeft;
  		if (el.offsetParent != null) {
    			x += getPageOffsetLeft(el.offsetParent);
		}
  		return x;
	}
	function getPageOffsetTop(el) {
  		var y;
  		// Return the x coordinate of an element relative to 
the page.
  		y = el.offsetTop;
  		if (el.offsetParent != null) {
    			y += getPageOffsetTop(el.offsetParent);
    		}
  		return y;
	}
3). 	When the button is "reset", restore combo box visibility.
	function resetButton(button) {
  		// Restore the button's style class.
  		removeClassName(button, "menuButtonActive");
  		//
  		//	Turn on all 'drop downs' if not visible
  		//
  		// works for IE ONLY
  		//*********************************
  			var objectid;
  			var ix;
			if (document.all) {
				for(ix=0; ix <document.all.length; 
ix++) {
					objectid = document.all[ix].id;
					if (objectid.substring(0,4) 
== "drop") {
						document.all
[ix].style.visibility = 'visible';
					}
				}
			}
  		//*********************************
  		// Hide the button's menu, first closing any sub menus.
  		if (button.menu != null) {
    			closeSubMenu(button.menu);
    			button.menu.style.visibility = "hidden";
  		}
	}
Share the knowledge!
John J. Sutton  jsutton@littlerock.state.ar.us