Online Shopping : Computers : Programming : Languages : PHP : access : Folders : Humphrey

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

115 of 180 people (64%) answered Yes
Recently 7 of 10 people (70%) answered Yes

Entry

Hide a combo box under a javascript menu in IE browser

Apr 2nd, 2009 07:38
engatoo engatoo, 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  [email protected]
http://www.roo7e.com
http://www.roo7e.com
http://www.al33ab.com
http://ksacam.com
http://chat.ksacam.com
http://ksacam.info
http://oo2o.com
http://s4cam.com
http://saudi4cam.com				
http://voice.ksacam.com
http://سعودي-كام.oo2o.com
http://سعوديكام.com
http://xn--mgbply5cnrr.com
http://www.3rabstarz.com/vb
http://www.3rabstarz.com/vb
http://www.3rabstarz.com/
http://www.3rabstarz.com/vb
http://www.3rabstarz.com/
http://www.dir.3rabstarz.com/
http://www.up.3rabstarz.com
http://www.3rabstarz.com/vb/forumdisplay.php?f=5
http://www.3rabstarz.com/vb/forumdisplay.php?f=116
http://www.3rabstarz.com/vb/forumdisplay.php?f=66
http://www.3rabstarz.com/vb/forumdisplay.php?f=78
http://www.3rabstarz.com/vb/forumdisplay.php?f=147
http://www.3rabstarz.com/vb/forumdisplay.php?f=2
http://www.3rabstarz.com/vb/forumdisplay.php?f=31
http://www.3rabstarz.com/vb/forumdisplay.php?f=136
http://www.3rabstarz.com/vb/forumdisplay.php?f=34
http://www.3rabstarz.com/vb/forumdisplay.php?f=89
http://www.3rabstarz.com/vb/forumdisplay.php?f=26
http://www.3rabstarz.com/vb/forumdisplay.php?f=72
http://www.3rabstarz.com/vb/forumdisplay.php?f=73
http://www.3rabstarz.com/vb/forumdisplay.php?f=149
http://www.3rabstarz.com/vb/forumdisplay.php?f=150
http://www.3rabstarz.com/vb/forumdisplay.php?f=151
http://www.3rabstarz.com/vb/forumdisplay.php?f=152
http://www.3rabstarz.com/vb/forumdisplay.php?f=67
http://www.3rabstarz.com/vb/forumdisplay.php?f=3
http://www.3rabstarz.com/vb/forumdisplay.php?f=37
http://www.3rabstarz.com/vb/forumdisplay.php?f=115
http://www.3rabstarz.com/vb/forumdisplay.php?f=76
http://www.3rabstarz.com/vb/forumdisplay.php?f=77
http://www.3rabstarz.com/vb/forumdisplay.php?f=36
http://www.3rabstarz.com/vb/forumdisplay.php?f=153
http://www.3rabstarz.com/vb/forumdisplay.php?f=122
http://www.3rabstarz.com/vb/forumdisplay.php?f=118
http://www.3rabstarz.com/vb/forumdisplay.php?f=119
http://www.3rabstarz.com/vb/forumdisplay.php?f=120
http://www.3rabstarz.com/vb/forumdisplay.php?f=121
http://www.3rabstarz.com/vb/forumdisplay.php?f=35
http://www.3rabstarz.com/vb/forumdisplay.php?f=65
http://www.3rabstarz.com/vb/forumdisplay.php?f=7
http://www.3rabstarz.com/vb/forumdisplay.php?f=9
http://www.3rabstarz.com/vb/forumdisplay.php?f=11
http://www.3rabstarz.com/vb/forumdisplay.php?f=142
http://www.3rabstarz.com/vb/forumdisplay.php?f=143
http://www.3rabstarz.com/vb/forumdisplay.php?f=146
http://www.3rabstarz.com/vb/forumdisplay.php?f=140
http://www.3rabstarz.com/vb/forumdisplay.php?f=137
http://www.3rabstarz.com/vb/forumdisplay.php?f=114
http://www.3rabstarz.com/vb/forumdisplay.php?f=117
http://www.3rabstarz.com/vb/forumdisplay.php?f=113
http://www.3rabstarz.com/vb/forumdisplay.php?f=51
http://www.3rabstarz.com/vb/forumdisplay.php?f=84
http://www.3rabstarz.com/vb/forumdisplay.php?f=138
http://www.3rabstarz.com/vb/forumdisplay.php?f=139
http://www.3rabstarz.com/vb/forumdisplay.php?f=15
http://www.3rabstarz.com/vb/forumdisplay.php?f=130
http://www.3rabstarz.com/vb/forumdisplay.php?f=97
http://www.3rabstarz.com/vb/forumdisplay.php?f=102
http://www.3rabstarz.com/vb/forumdisplay.php?f=101
http://www.3rabstarz.com/vb/forumdisplay.php?f=104
http://www.3rabstarz.com/vb/forumdisplay.php?f=131
http://www.3rabstarz.com/vb/forumdisplay.php?f=103
http://www.3rabstarz.com/vb/forumdisplay.php?f=99
http://www.3rabstarz.com/vb/forumdisplay.php?f=59
http://www.3rabstarz.com/vb/forumdisplay.php?f=60
http://www.3rabstarz.com/vb/forumdisplay.php?f=39
http://www.3rabstarz.com/vb/forumdisplay.php?f=40
http://www.3rabstarz.com/vb/forumdisplay.php?f=42
http://www.3rabstarz.com/vb/forumdisplay.php?f=4
http://www.3rabstarz.com/vb/forumdisplay.php?f=1
http://www.3rabstarz.com/vb/forumdisplay.php?f=88
http://www.3rabstarz.com/vb/forumdisplay.php?f=148
http://www.3rabstarz.com/vb/forumdisplay.php?f=62
http://www.3rabstarz.com/vb/forumdisplay.php?f=63
http://www.3rabstarz.com/vb/forumdisplay.php?f=64
http://www.3rabstarz.com/vb/forumdisplay.php?f=6
http://www.3rabstarz.com/vb/forumdisplay.php?f=12
http://www.3rabstarz.com/vb/forumdisplay.php?f=96
http://www.3rabstarz.com/vb/forumdisplay.php?f=58
http://www.3rabstarz.com/vb/forumdisplay.php?f=38