Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Menu drop down to drop up in Layers

    I am trying to get a menu drop down to "drop up". Which means that if I hover over an image, the hidden menu list would appear and sit ABOVE the image. Currently, I can only get it to do that by adding white space. I have to do this without the white space.

    I have inherited code that was from oreilly's DHTML book in this example. Do you think its easier to use another code base or move in another direction?

    Here's my code in a zip file (attaching file for first time, may not show up).

    In my code sample, I have the original drop down that I am trying to convert to a "drop up". Is this possible with the existing code?

    This code also doesn't work in Netscape/Mozilla 1.4+, but works in Netscape 4.X. Which I am investigating. If time permits, thoughts on why would be greatly appreciated.
    Attached Files Attached Files

  • #2
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you in advance for any help provided. I have already figured out the Netscape issue and I am no longer using oreilly's DHTML JS file. Here's my new code base:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Layers Example</title>
    <style type="text/css">
    	#innerlogo {position:absolute; left:0; top:0; visibility:hidden}
    	#innernew {position:absolute; left:0; top:0; visibility:hidden}
    	#inneronline {position:absolute; left:0; top:0; visibility:hidden}
    	#innerstats {position:absolute; left:0; top:0; visibility:hidden}
    	#innerbday {position:absolute; left:0; top:0; visibility:hidden}
    	#innerlock {position:absolute; left:0; top:0; visibility:hidden}
    	
    	#outerlogo {position:relative;}
    	#outernew {position:relative;}
    	#outeronline {position:relative;}
    	#outerstats {position:relative;}
    	#outerdday {position:relative;}
    	#outerlock {position:relative;}
    	
    	#innerlogoBottom {position:absolute; left:0; top:0; visibility:hidden}
    	#innernewBottom {position:absolute; left:0; top:0; visibility:hidden}
    	#inneronlineBottom {position:absolute; left:0; top:0; visibility:hidden}
    	#innerstatsBottom {position:absolute; left:0; top:0; visibility:hidden}
    	#innerbdayBottom {position:absolute; left:0; top:0; visibility:hidden}
    	#innerlockBottom {position:absolute; left:0; top:0; visibility:hidden}
    	
    	#outerlogoBottom {position:relative;}
    	#outernewBottom {position:relative;}
    	#outeronlineBottom {position:relative;}
    	#outerstatsBottom {position:relative;}
    	#outerddayBottom {position:relative;}
    	#outerlockBottom {position:relative;}
    </style>
    
    <script language="Javascript1.1">
    ///////////////////////////////////////////////////////////////////////////////////
    	function showLayer(layer_divid) {
    		if (document.layers){	// NS 4
    			document.layers[layer_divid].visibility = "show";
    		} else if (document.all){	//	ie
    			document.all(layer_divid).style.visibility = "visible";
    		} else if (document.getElementById){	//	NS 6+
    			document.getElementById(layer_divid).style.visibility = "visible";
    		}
    	}
    	
    	function hideLayer(layer_divid) {
    		if (document.layers){	// NS 4
    			document.layers[layer_divid].visibility = "hide";
    		} else if (document.all){	//	ie
    			document.all(layer_divid).style.visibility = "hidden";
    		} else if (document.getElementById){	//	NS 6+
    			document.getElementById(layer_divid).style.visibility = "hidden";
    		}
    	}
    ///////////////////////////////////////////////////////////////////////////////////
    var divArrayTop = new Array(6);
    divArrayTop[0] = "innerlogo";
    divArrayTop[1] = "innernew";
    divArrayTop[2] = "inneronline";
    divArrayTop[3] = "innerstats";
    divArrayTop[4] = "innerbday";
    divArrayTop[5] = "innerlock";
    
    var divArrayBottom = new Array(6);
    divArrayBottom[0] = "innerlogoBottom";
    divArrayBottom[1] = "innernewBottom";
    divArrayBottom[2] = "inneronlineBottom";
    divArrayBottom[3] = "innerstatsBottom";
    divArrayBottom[4] = "innerbdayBottom";
    divArrayBottom[5] = "innerlockBottom";
    
    function showTop(divno) {
    	for (i=0; i < divArrayTop.length; i++) {
    		if (i == divno) {showLayer(divArrayTop[i]);} else {hideLayer(divArrayTop[i])}
    		hideLayer(divArrayBottom[i]);
    	}
    }
    
    function showBottom(divno) {
    	for (i=0; i < divArrayBottom.length; i++) {
    		if (i == divno) {showLayer(divArrayBottom[i]);} else {hideLayer(divArrayBottom[i])}
    		hideLayer(divArrayTop[i]);
    	}
    }
    </script>
    </head>
    
    <body>
    <table cellspacing="0" cellpadding="10" border="0">
    	<tr>
    		<td><a href="#" onMouseover="showTop(0);"><img src="http://www.codingforums.com/logo.gif" border="0"/></a>
    			<div id="outerlogo"><div id="innerlogo">coding forums <br> coding forums <br> coding forums <br> coding forums <br></div></div>
    		</td>
    		<td><a href="#" onMouseover="showTop(1);"><img src="http://www.codingforums.com/images/statusicon/forum_new.gif" border="0"/></a>
    			<div id="outernew"><div id="innernew">new link <br> new link <br> new link <br> new link <br> new link <br> new link</div></div>
    		</td>
    		<td><a href="#" onMouseover="showTop(2);"><img src="http://www.codingforums.com/images/misc/whos_online.gif" border="0"/></a>
    			<div id="outeronline"><div id="inneronline"><a href="#">online</a>  <br> online  <br> online  <br> online  <br> <a href="#">online</a>  <br> online</div></div>
    		</td>
    		<td><a href="#" onMouseover="showTop(3);"><img src="http://www.codingforums.com/images/misc/stats.gif" border="0"/></a>
    			<div id="outerstats"><div id="innerstats">stats <br> stats <br> stats <br> stats <br> stats <br> stats <br> stats</div></div>
    		</td>
    		<td><a href="#" onMouseover="showTop(4);"><img src="http://www.codingforums.com/images/misc/birthday.gif" border="0"/></a>
    			<div id="outerdday"><div id="innerbday">birthday <br> birthday <br> birthday <br> birthday <br> birthday <br> birthday</div></div>
    		</td>
    		<td><a href="#" onMouseover="showTop(5);"><img src="http://www.codingforums.com/images/statusicon/forum_old_lock.gif" border="0"/></a>
    			<div id="outerlock"><div id="innerlock">locked <br> locked <br> locked <br> locked <br> locked <br> locked</div></div>
    		</td>
    	</tr>
    </table>
    <table cellspacing="0" cellpadding="10" border="0">
    	<tr>
    		<td>Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  Junk content to be here.  </td>
    	</tr>
    </table>
    <table cellspacing="0" cellpadding="10" border="0">
    	<tr>
    		<td><div id="outerlogoBottom"><div id="innerlogoBottom">coding forums <br> coding forums <br> coding forums <br> coding forums <br></div></div><a href="#" onMouseover="showBottom(0);"><img src="http://www.codingforums.com/logo.gif" border="0"/></a>
    		</td>
    		<td><div id="outernewBottom"><div id="innernewBottom">new link <br> new link <br> new link <br> new link <br> new link <br> new link</div></div><a href="#" onMouseover="showBottom(1);"><img src="http://www.codingforums.com/images/statusicon/forum_new.gif" border="0"/></a>
    		</td>
    		<td><div id="outeronlineBottom"><div id="inneronlineBottom"><a href="#">online</a>  <br> online  <br> online  <br> online  <br> <a href="#">online</a>  <br> online</div></div><a href="#" onMouseover="showBottom(2);"><img src="http://www.codingforums.com/images/misc/whos_online.gif" border="0"/></a>
    		</td>
    		<td><div id="outerstatsBottom"><div id="innerstatsBottom">stats <br> stats <br> stats <br> stats <br> stats <br> stats <br> stats</div></div><a href="#" onMouseover="showBottom(3);"><img src="http://www.codingforums.com/images/misc/stats.gif" border="0"/></a>
    		</td>
    		<td><div id="outerddayBottom"><div id="innerbdayBottom">birthday <br> birthday <br> birthday <br> birthday <br> birthday <br> birthday</div></div><a href="#" onMouseover="showBottom(4);"><img src="http://www.codingforums.com/images/misc/birthday.gif" border="0"/></a>
    		</td>
    		<td><div id="outerlockBottom"><div id="innerlockBottom">locked <br> locked <br> locked <br> locked <br> locked <br> locked</div></div><a href="#" onMouseover="showBottom(5);"><img src="http://www.codingforums.com/images/statusicon/forum_old_lock.gif" border="0"/></a>
    		</td>
    	</tr>
    </table>
    
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've figured it out. I just needed to think about it a little more. Thanks for those that took a look.


  •  

    Posting Permissions

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