SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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>
    I used two lots of the same code for simplicity, because both the menu's are of different heights.

    - Will

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    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>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    PHP Developer W1LL's Avatar
    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

  4. #4
    PHP Developer W1LL's Avatar
    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

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    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?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •