...

View Full Version : Menu drop down to drop up in Layers



Oakendin
06-09-2004, 07:16 PM
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 (http://www.oreilly.com/catalog/dhtmlref2/) 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.

Oakendin
06-09-2004, 07:34 PM
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:



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

Oakendin
06-09-2004, 10:14 PM
I've figured it out. I just needed to think about it a little more. Thanks for those that took a look.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum