I've not got time to test this but I think that the below method is
sound and think it fits in with your viewpoint and it is pretty pseudo
<script>
function init() {
// Build up menu HTML
var menuHTML = "<select............";
document.writeMe.innerHTML = menuHTML;
}
function hideSelect() {
document.writeMe.innerHTML = '';
}
function showSelect() {
init();
}
</script>
<!--- This would be positioned over the selects --->
<div id="ddMenu">
<a href="#" onMouseOver="hideSelect()"
onMouseOut="showSelect">Click me</a>
</div>
<div id="writeMe">
<!-- This area is filled dynamically with the HTML... you could
even hardcode it in so it is always there
</div>
Would something like that not work for you? Got code doing similar
kicking about if you want to see it... not what you are looking for?
> -----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,b
> orderClass
> ,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,b
> orderClass
> ,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(dur
ation=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',"clS
> testover",
> "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
