We had the same problem a while back on our site, but our designer insisted on the drop down menus, we tried several ways and came to your conclusion short term fixes may cause long term problems. Besides it niggles away at the back of you mind, "Damn I just didnt do that quite the way I wanted",
http://www.andronics.co.uk we went with a re-design that kept everything away from that damn menu, we stuck in large gifs to take up the menu real-estate. -----Original Message----- From: webguy [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 17:22 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area OK thanks everyone, but I think I didn't ask the question correctly!! It is true you can usually stick in a fix to avoid issues. But I'm a nerd and as a nerd, I never (well nearly never) allow this kind of tight couple-ing in an app. IMHO an element like a menu should be responsible for it self. So in these case, the menu should be responable for dispaying properly. So in my world A menu hiding stuff under it to display = fine. (it has focus, the gui is behaving correctly) A select hiding itself if its under an open menu = crap. (it doesn't have focus, it doesn't carea about the menu) This kind of stuff makes it harder in the short term but means that the menu is self contained. If the main content of the page is changed later (and the menu remains the same) i want the menu to still work even if I add or remove a select from the page... Hope that clarifies my (nerdy) position :-) Thanks All WG -----Original Message----- From: John McCosker [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 16:53 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area //In fact this would probably hide ALL selects on a page //document.getElementsByTagName('select').style.visibility = 'hidden'; Im not sure it would actually it may throw an error as it would be an array of select objects, this diagram would represent your cool menus -------------------------------------------- menu item one | menu item two | menu item 3 | -------------------------------------------- your select boxes just below --------------------------------------------- box 1 | box 2 | box 3 | --------------------------------------------- now I didnt know you can make select elements change visibility without being inside a div, but if you can, why not customise your event handler that triggers the menus, pass an extra value that represents each select box item in the select array array. <a href="..." onMouseOver="coolmenusHandlers();killSelect(0);" onMouseOut="coolmenusHandlers();showSelect(0);">menu 1</a> <a href="..." onMouseOver="coolmenusHandlers();killSelect(1);" onMouseOut="coolmenusHandlers();showSelect(1);">menu 2</a> <a href="..." onMouseOver="coolmenusHandlers();killSelect(2);" onMouseOut="coolmenusHandlers();showSelect(2);">menu 3</a> function killSelect(i){ document.getElementsByTagName["select"][i].style.visibility = 'hidden'; } function showSelect(i){ document.getElementsByTagName["select"][i].style.visibility = 'visible'; } otherwise embed the selects within divs giving the same id for each div and do function killSelect(i){ document.getElementById["divId"][i].style.visibility = 'hidden'; } function showSelect(i){ document.getElementById["divId"][i].style.visibility = 'visible'; } -----Original Message----- From: webguy [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 16:41 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area Yes that will hide all selects on a page, but not only hide the one that are in region defined by top,left,width,height. In fact this would probably hide ALL selects on a page document.getElementsByTagName('select').style.visibility = 'hidden'; wg -----Original Message----- From: Craig Dudley [mailto:[EMAIL PROTECTED] Sent: 02 June 2003 16:21 To: CF-Talk Subject: RE: JS question / DOM hiding all elements in square area 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 Get the mailserver that powers this list at http://www.coolfusion.com Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
