Drop-down Layers... help!, Web Development: Sagefix Boards

Current Location : Home > Web Development > JavaScript > Drop-down Layers... help!

Main Menu

SageFix - Let's Fix

Board Categories

Web Site Designing

Graphics

Web Development

.NET

-	Classic ASP

-	JavaScript

PHP

WebSite Management

-	Promotion Techniques

-	Search Engine Optimization

Databases

MySQL

Tutorials

Database Connection Strings

Contact Us

1 - 6 of 6 [Total 1 Pages]

Drop-down Layers... help! Jul 28, 2002, 18:33

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>

I used two lots of the same code for simplicity, because both the menu's are of different heights.

- Will

Jul 29, 2002, 01:52

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, 06:31	3
	Thanks so much. Just one little problem... the second menu (Lyr1) doesn't work at all. - Will

	Jul 29, 2002, 07:21	4
	Never mind... I've got it all sorted now. Thanks beetle! - Will

	Jul 29, 2002, 07:25	5
	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, 07:34	6
	No problem.

1 - 6 of 6 [Total 1 Pages]