SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Drop-down Layers... help!
-
Jul 28, 2002, 17:33 #1
- Join Date
- Apr 2001
- Location
- Leicester, UK
- Posts
- 459
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Drop-down Layers... help!
I've more or less finished making an address book, but it's the login page I'm having trouble with. I've used 'Layers' to make the sign up and login screens come from the top of the screen... (a dynamic menu as such). When you click the down arrow, then up, it's fine. But then when you click down again, it just flickers. The page is http://www.cbuk.org/adbook_public. The code is below:
Code:<script language="JavaScript"> <!-- var menu_speed=8; var menu_width=275; var menu0_height=123; var menu1_height=92; var instant_close=0; var total=2; if(document.all) { doc = "document.all"; sty = ".style"; htm = "" } else if(document.layers) { doc = "document"; sty = ""; htm = ".document" } function position0Layers() { abcObj0 = eval(doc + '["Lyr0"]' + sty); abcObj0.left = (menu_width*0)+5; abcObj0.top = -93; abcObj0.height=menu0_height; } function position1Layers() { abcObj1 = eval(doc + '["Lyr1"]' + sty); abcObj1.left = (menu_width*1)+5; abcObj1.top = -62; abcObj1.height=menu1_height; } function pullitup0() { abcObj0 = eval(doc + '["Lyr0"]' + sty); if (window.dropdown) { clearInterval(dropdown) } pullup0=setInterval("uplift0()",1) } function pullitup1() { abcObj1 = eval(doc + '["Lyr1"]' + sty); if (window.dropdown) { clearInterval(dropdown) } pullup1=setInterval("uplift1()",1) } function dropitdown0() { abcObj0 = eval(doc + '["Lyr0"]' + sty); if (window.pullup) { clearInterval(pullup0) } dropdown=setInterval("downlift0()",1) } function dropitdown1() { abcObj1 = eval(doc + '["Lyr1"]' + sty); if (window.pullup) { clearInterval(pullup1) } dropdown=setInterval("downlift1()",1) } function uplift0() { var x_pos1 = parseInt(abcObj0.top); if(x_pos1 >= -(menu0_height-40) ) { if(instant_close==1) { abcObj0.top= -93; } else if(instant_close==0) { abcObj0.top = -93; } } else if (window.pullup) { clearInterval(pullup); } } function uplift1() { var x_pos1 = parseInt(abcObj1.top); if(x_pos1 >= -(menu1_height-40) ) { if(instant_close==1) { abcObj1.top= -62; } else if(instant_close==0) { abcObj1.top = -62; } } else if (window.pullup) { clearInterval(pullup); } } function downlift0() { var x_pos1 = parseInt(abcObj0.top); if(x_pos1 < 0) { abcObj0.top = x_pos1+menu_speed; } else if (window.dropdown) { clearInterval(dropdown); } } function downlift1() { var x_pos1 = parseInt(abcObj1.top); if(x_pos1 < 0) { abcObj1.top = x_pos1+menu_speed; } else if (window.dropdown) { clearInterval(dropdown); } } function start() { position0Layers(); position1Layers(); } // end it--> </script>
- Will
-
Jul 29, 2002, 00:52 #2
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try this instead:
Code:<style> #Lyr0 { position: absolute; z-index: 1; visibility: visible; top: -93px; left:5; height: 123 } #Lyr1 { position: absolute; z-index: 1; visibility: visible; top: -62px; left:280; height: 123 } </style> <script language="JavaScript"> <!-- var menu_speed=8; var Lyr0h = 93; var Lyr1h = 62; var moving; function getObj(objName) { if(document.all) var tempObj = eval("document.all."+objName); else if(document.layers) var tempObj = eval("document.getElemendById["+objName+"]"); return tempObj; } function moveLayer(layerName, dir) { layerObj = getObj(layerName); var x_pos = parseInt(layerObj.currentStyle.top); if (dir == 'up') { var uBound = parseInt("-"+ eval(layerName+'h')); if(x_pos > uBound) { layerObj.style.top = x_pos - menu_speed; pullup = setTimeout("moveLayer('"+layerName+"','"+dir+"');",1); } } else if (dir == 'down') { var x_pos = parseInt(layerObj.currentStyle.top); if(x_pos < 0) { layerObj.style.top = x_pos + menu_speed; dropdown = setTimeout("moveLayer('"+layerName+"','"+dir+"');",1); } } if (window.moving) clearTimeout(moving); } // end it--> </script> {...HTML...} <div id="Lyr0"> {...HTML...} <a href="#" onClick="moveLayer('Lyr0','down')"><img src="pics/down.bmp" alt="Down"></a> <sup>LOGIN</sup> <a href="#" onClick="moveLayer('Lyr0','up')"><img src="pics/top.bmp" alt="Up"></a> {...HTML...} </div> <div id="Lyr1"> {...HTML...} <a href="#" onClick="moveLayertdown('Lyr1','down')"><img src="pics/down.bmp" alt="Down"></a> <sup>LOGIN</sup> <a href="#" onClick="moveLayer('Lyr1','up')"><img src="pics/top.bmp" alt="Up"></a> {...HTML...} </div>
-
Jul 29, 2002, 05:31 #3
- Join Date
- Apr 2001
- Location
- Leicester, UK
- Posts
- 459
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks so much. Just one little problem... the second menu (Lyr1) doesn't work at all.
- Will
-
Jul 29, 2002, 06:21 #4
- Join Date
- Apr 2001
- Location
- Leicester, UK
- Posts
- 459
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Never mind... I've got it all sorted now. Thanks beetle!
- Will
-
Jul 29, 2002, 06:25 #5
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmmm, maybe a browser issue? What are you running? I coded and successfully tested that script on IE5.0
Are you getting any errors?
-
Jul 29, 2002, 06:34 #6
Bookmarks