Drop-down Layers... help!

[W1LL]

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:

<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

[beetle]

Try this instead:

<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>

[W1LL]

Thanks so much. Just one little problem... the second menu (Lyr1) doesn't work at all.

- Will

[W1LL]

Never mind... I've got it all sorted now. Thanks beetle!

- Will

[beetle]

Hmmm, maybe a browser issue? What are you running? I coded and successfully tested that script on IE5.0

Are you getting any errors?

[beetle]

No problem.