This works in ie6, I assume it will work in any DOM Level 2 compliant browser,
<script> function hide(){ elements = document.getElementsByTagName('select'); for (var i = 0; i < elements.length; i++) { if (elements[i].style.visibility == 'visible') elements[i].style.visibility = 'hidden'; else elements[i].style.visibility = 'visible'; } } </script> <input type="Button" value="Try" onclick="hide()"><br><br> <select name="test1" style="visibility:Visible;"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> <option value="1">5</option> </select> <br><br> <select name="test2" style="visibility:Visible;"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> <option value="1">5</option> </select> <br><br> <select name="test3" style="visibility:Visible;"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> <option value="1">5</option> </select> <br><br> <select name="test4" style="visibility:Visible;"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> <option value="1">5</option> </select> -----Original Message----- From: webguy [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 15:26 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area Basically I want to copy the functionality that coolmenus http://www.dhtmlcentral.com/projects/coolmenus/ does to hide selects, when a menu opens over them. The bit of code I want is just give me all then element within a region of the screen. I can then do if (elementtype = select) { hide element. } example template using coolmenus below ============================================================== <html> <head> <title>Coolmenus example - CoolMenus4 DHTML script made by Thomas Brattli from DHTMLCentral.com. Visit for more great scripts.</title> <style> /* DEFAULT STYLES ---- NEEEDED START */ .clCMEvent{position:absolute; width:99%; height:99%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:visible} .clCMAbs{position:absolute; visibility:hidden; left:0; top:0} /* DEFAULT STYLES ---- NEEEDED END */ .clT,.clTover,.clS,.clSover,.clS2,.clS2over{position:absolute; width:120; font-family:arial,helvetica; cursor:pointer; cursor:hand; ;} .clT,.clTover{padding:4px; font-size:12px; font-weight:bold} .clS,.clSover{padding:2px; font-size:11px; font-weight:bold} .clS2,.clS2over{padding:2px; font-size:11px;} .clT,.clS,.clS2{color:#006699; background-color:#CDDBEB; layer-background-color:#CDDBEB;} .clTover{color:#FCCE55; background-color:#336699; layer-background-color:#336699;} .clSover{color:white; background-color:#339966; layer-background-color:#339966} .clS2{background-color:silver; width:230; layer-background-color:silver;} .clS2over{background-color:#00cccc; width:230; layer-background-color:#00cccc; color:black} .clStest{position:absolute; font-family:verdana; font-size:10px; color:red; layer-background-color:silver; background-color:silver;cursor:pointer; cursor:hand; } .clStestover{position:absolute; color:#ffff33; font-weight:bold; font-family:courier; layer-background-color:#00ccff; background-color:#00ccff; cursor:pointer; cursor:hand; } .clB1{position:absolute; layer-background-color:#ff9933; background-color:#ff9933; visibility:hidden} .clB2{position:absolute; layer-background-color:#996600; background-color:#996600; visibility:hidden} .clB3{position:absolute; layer-background-color:red; background-color:red; visibility:hidden} .clB{position:absolute; background-color:#336699; layer-background-color:#336699; visibility:hidden} .clBar{position:absolute; width:10; height:10; visibility:hidden; layer-background-color:#336699; background-color:#336699;} .clNoLink{position:absolute; font-family:arial,helvetica;} .clNoLink2{position:absolute; padding:2px; font-size:11px; color:#006699; layer-background-color:silver; background-color:silver; font-family:arial,helvetica;} .clNoLink3{position:absolute; background-color:#CDDBEB; layer-background-color:#CDDBEB; font-family:arial,helvetica;} </style> <script language="JavaScript1.2" src="coolmenus4.js"> /*********************************************************************** **** ** Copyright (c) 2001 Thomas Brattli ([EMAIL PROTECTED]) DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com Version 4.0_beta This script can be used freely as long as all copyright messages are intact. Extra info - Coolmenus reference/help - Extra links to help files **** CSS help: http://192.168.1.31/projects/coolmenus/reference.asp?m=37 General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35 Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47 Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48 Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49 Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50 ************************************************************************ **** **/ </script> <script language="JavaScript1.2" src="cm_addins.js"> /*********************************************************************** **** ** Copyright (c) 2001 Thomas Brattli ([EMAIL PROTECTED]) Coolmenus add-in file for more advanced featuers.. ************************************************************************ **** **/ </script> </head> <body topmargin=0 marginheight=0> <script> /*** This is the menu creation code - place it right after you body tag Feel free to add this to a stand-alone js file and link it to your page. **/ var oM=new makeCM("oM") oM.pxBetween =0 oM.fromTop=0 oM.fromLeft=10 oM.menuPlacement="center" oM.wait=600 oM.fillImg="cm_fill.gif" oM.zIndex=100 oM.resizeCheck=1 oM.zIndex=100 oM.onlineRoot="" oM.offlineRoot="file:///C|/myfiles/" oM.rows=1 //Background bar properties oM.useBar=1 oM.barWidth="100%" oM.barHeight="menu" oM.barX=0 oM.barY="menu" oM.barClass="clBar" oM.barBorderX=0 oM.barBorderY=2 oM.barBorderClass="clB3" //Level properties //Syntax for fast creation (advanced users only) //oM.level[1]=new cm_makeLevel(width,height,regClass,overClass,borderX,borderY,borderClass ,row s,align,offsetX,offsetY,arrow,arrowWidth,arrowHeight) oM.level[0]=new cm_makeLevel() oM.level[0].width=120 oM.level[0].height=20 oM.level[0].regClass="clT" oM.level[0].overClass="clTover" oM.level[0].borderX=1 oM.level[0].borderY=0 oM.level[0].borderClass="clB2" oM.level[0].rows=0 oM.level[0].align="bottom" oM.level[0].offsetX=0 oM.level[0].offsetY=0 oM.level[0].arrow=0 oM.level[0].arrowWidth=0 oM.level[0].arrowHeight=0 oM.level[1]=new cm_makeLevel() oM.level[1].width=120 oM.level[1].height=null oM.level[1].regClass="clS" oM.level[1].overClass="clSover" oM.level[1].borderX=1 oM.level[1].borderY=10 oM.level[1].borderClass="clB1" oM.level[1].align="bottomright" oM.level[1].rows=1 oM.level[1].arrow="menu_arrow.gif" oM.level[1].arrowWidth=10 oM.level[1].arrowHeight=10 oM.level[2]=new cm_makeLevel() oM.level[2].width=60 oM.level[2].height=22 oM.level[2].borderClass="clB3" oM.level[2].regClass="clS2" oM.level[2].borderX=3 oM.level[2].borderY=1 oM.level[2].rows=0 oM.level[2].borderX=5 oM.level[2].borderY=2 oM.level[2].offsetX=0 oM.level[2].offsetY=0 oM.level[2].overClass="clS2over" oM.level[2].align="bottom" //oM.level[1]=new cm_makeLevel(width,height,regClass,overClass,borderX,borderY,borderClass ,row s,align,offsetX,offsetY,arrow,arrowWidth,arrowHeight) oM.level[3]=new cm_makeLevel(0,0,"","",3,3,"clB",0,"left") oM.level[3].filter="progid:DXImageTransform.Microsoft.Fade(duration=0.5) " oM.level[4]=new cm_makeLevel(0,0,"","",3,3,"clB2",0,"left") oM.level[4].filter="" oM.level[4].slidepx=10 oM.level[5]=new cm_makeLevel(0,0,"","",3,3,"clB2",0,"left") oM.level[5].slidepx=0 oM.level[5].clippx=10 oM.level[6]=new cm_makeLevel(0,0,"","",3,3,"clB2",1,"right") oM.level[6].clippx=10 oM.level[6].regClass="clS" oM.level[6].overClass="clSover" oM.level[6].border=null oM.level[6].borderClass="clB1" oM.level[7]=new cm_makeLevel(0,0,"","",3,3,"clB2",1,"right") oM.level[7].clippx=10 /****************************************** Menu item creation: myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout) *************************************/ oM.makeMenu('top0','','Align left','other_tests/test.html','',100,'','','','','',"left") oM.makeMenu('0sub10','top0','New scripts','test.html','',110,20) oM.makeMenu('0sub11','top0','All scripts','script/index.asp','',110,30) oM.makeMenu('0sub13','top0','Sub columns<br>aligned bottom','','',110,80,'','','',0,'right') oM.makeMenu('','0sub13','Item') oM.makeMenu('','0sub13','Item') oM.makeMenu('0sub12','top0','Sub columns<br>aligned bottom','','',110,80,'','','',0,'right') oM.makeMenu('','0sub12','Item') oM.makeMenu('','0sub12','Item') oM.makeMenu('aa','0sub12','With subs aligned bottom','','',150) oM.makeMenu('','aa','Item') oM.makeMenu('tt','0sub12','Item') oM.makeMenu('','tt','Item') oM.makeMenu('kk','0sub12','Item') oM.makeMenu('','kk','Item') oM.makeMenu('top1','','','','',100,0,'img1.gif','img1_on.gif','','',"bot tom" ) oM.makeMenu('1sub10','top1','Different class','script/index.asp?new=1','',150,30,'','','clStest',"clStestover", "rig ht") oM.makeMenu('1sub11','top1','Different class','script/index.asp','',150,20,'','','clStest',"clStestover") oM.makeMenu('1sub12','top1','Regular','','',150,30) oM.makeMenu('1sub13','top1','Different class','script/index.asp','',150,30,'','','clStest',"clStestover") oM.makeMenu('1sub14','top1','Subs aligned left','','',150,20,'','','','','left') oM.makeMenu('','1sub14','Item') oM.makeMenu('bb','1sub14','Subs aligned top','','',150,0,'','','','','top') oM.makeMenu('','bb','Item') oM.makeMenu('','bb','Item') oM.makeMenu('','1sub14','Item') oM.makeMenu('top2','','Align top','','',100,0,'','','','',"top",0) oM.makeMenu('2sub12','top2','Columns<br>aligned<br>topleft','','',94,70, '',' ','','','topleft') oM.makeMenu('','2sub12','Item') oM.makeMenu('','2sub12','Item') oM.makeMenu('','2sub12','Item') oM.makeMenu('','2sub12','Item') oM.makeMenu('','2sub12','Item') oM.makeMenu('','2sub12','Item') oM.makeMenu('2sub10','top2','','','',94,20,'img_sub.gif','img_sub_on.gif ') oM.makeMenu('2sub11','top2','All scripts','script/index.asp','',94,20) oM.makeMenu('top3','','Align right','','',100,0,'','','','',"right") oM.makeMenu('3sub10','top3','No link item','','',150,30,'','','','','','',1) oM.makeMenu('3sub11','top3','Columns aligned bottom left','','',150,30,'','','','','bottomleft') oM.makeMenu('cc','3sub11','Align bottom','','',150,0,'','','','','bottom') oM.makeMenu('','cc','Item','','',150) oM.makeMenu('ff','cc','Align left with filter (ie only)<br>Go down for more add-in<br>effects','','',150,50,'','','','','left') oM.makeMenu('','ff','Item','','',130) oM.makeMenu('','ff','Item','','',130) oM.makeMenu('','ff','Item','','',130) oM.makeMenu('','ff','Item','','',130) oM.makeMenu('ee','ff','Align righttop with slide','','',130,0,'','','','','righttop') oM.makeMenu('','ee','Item','') oM.makeMenu('','ee','Nolink','','',0,0,'','','clNoLink2','','','',1) oM.makeMenu('','ee','Item','') oM.makeMenu('dd','ff','Align lefttop with slide','','',130,0,'','','','','lefttop') oM.makeMenu('','dd','Item','','',150) oM.makeMenu('','dd','Item','','',150) oM.makeMenu('gg','dd','Align bottom with clip','','',150,0,'','','','','bottom') oM.makeMenu('','gg','Item','','',150) oM.makeMenu('','gg','Item','','',150) oM.makeMenu('hh','gg','columns with clip','','',150,0) oM.makeMenu('','hh','Item','','',50) oM.makeMenu('','hh','Nolink','','',50,0,'','','clNoLink3','','','',1) oM.makeMenu('','hh','Item','','',50) oM.makeMenu('','hh','Item','','',50) oM.makeMenu('','3sub11','Item') oM.makeMenu('','3sub11','Item') oM.makeMenu('','3sub11','Item') oM.makeMenu('','3sub11','Item') oM.construct() </script> <br /> <form action="" > <select name=""> <option>xxxxxxxxxxxxxxxx</option> <option>xxxxxxxxxxxxxxxx</option> </select> <select name=""> <option>xxxxxxxxxxxxxxxx</option> <option>xxxxxxxxxxxxxxxx</option> </select> <select name=""> <option>xxxxxxxxxxxxxxxx</option> <option>xxxxxxxxxxxxxxxx</option> </select> <select name=""> <option>xxxxxxxxxxxxxxxx</option> <option>xxxxxxxxxxxxxxxx</option> </select> <select name=""> <option>xxxxxxxxxxxxxxxx</option> <option>xxxxxxxxxxxxxxxx</option> </select> <select name=""> <option>xxxxxxxxxxxxxxxx</option> <option>xxxxxxxxxxxxxxxx</option> </select> </form> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Hide subs example:<br> <a href="#" onclick="oM.m['0sub10'].hide=1">Turn of sub "0sub10" - oM.m['0sub10'].hide=1</a> <br> <a href="#" onclick="oM.m['0sub10'].hide=0">Turn on sub "0sub10" - oM.m['0sub10'].hide=0</a> <br> <a href="#" onclick="oM.m['0sub11'].hide=1">Turn of sub "0sub11" - oM.m['0sub11'].hide=1</a> <br> <a href="#" onclick="oM.m['0sub11'].hide=0">Turn on sub "0sub11" - oM.m['0sub11'].hide=0</a> <br> <br> <br> <br> </body> </html> -----Original Message----- From: John McCosker [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 15:04 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area >>I want to hide all elements in a region (ie5+, nn6+) > That won't work either, I need to hide selects in this region. Due to > an issue in IE, select box show though divs, no matter what z-index > they have. > I need terefore to make any select in this region hidden. This happens if the form elements are overlapping the divs and not contained within the divs, but peole are assuming you mean within, Can you prevent overlapping? Do select boxs appear and dissappear? A diagram would be good! -----Original Message----- From: webguy [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 14:47 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area I know how to hide elements, in fact I know how to everything I need, but I'd prefer to use some code thats been tested etc . Basically the functionality is given top,left,width, and height , figure out the elements of type "select" that appear in this region and set style.visibilty = 'hidden' ( or visible) for each of them anyone know of any code to do this? Thansk WG -----Original Message----- From: Michael Tangorre [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 14:28 To: CF-Talk Subject: Re: JS question / DOM hiding all elements in square area using style sheets and JS events if needed change the visibility property. I forget the list of elements you can apply this to, but I am sure the table, tr, td, div, span work. visibility: hidden; If you need an example or more assistance, let me know. Mike ----- Original Message ----- From: "webguy" <[EMAIL PROTECTED]> To: "CF-Talk" <[EMAIL PROTECTED]> Sent: Monday, June 02, 2003 9:29 AM Subject: RE: JS question / DOM hiding all elements in square area > That won't work either, I need to hide selects in this region. Due to > an issue in IE, select box show though divs, no matter what z-index > they have. > I need terefore to make any select in this region hidden. > > Thanks WG > > -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > Sent: 02 June 2003 14:21 > To: CF-Talk > Subject: Re: JS question / DOM hiding all elements in square area > > > webguy wrote: > > I want to hide all elements in a region (ie5+, nn6+) > > > > So I have these pixel values for the region > > > > left,top,weight,height > > > > What the easiest way to do this ? > > Create an empty div and apply a style to give it the right size, > position and z-index. > > Jochem > > > > > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Archives: http://www.houseoffusion.com/cf_lists/index.cfm?forumid=4 Subscription: http://www.houseoffusion.com/cf_lists/index.cfm?method=subscribe&forumid=4 FAQ: http://www.thenetprofits.co.uk/coldfusion/faq This list and all House of Fusion resources hosted by CFHosting.com. The place for dependable ColdFusion Hosting. http://www.cfhosting.com Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4