PDA

Click to See Complete Forum and Search --> : Hiding DIVs that "don't exist"??

stovellp
04-26-2003, 03:26 AM
Hi. I've been doing Javascript on and off for the past few years, and I've been working with a script recently, which just does not want to work.

This is what the page looks like:

<!----- Paul's Fancy Schmancy Menu Test --->
<html>
<head>
<title>Paul's Fancy Schmancy Menu Test</title>

<script langauge="Javascript">
function showMenu()
{
document.Menu1.style="position:absolute; TOP:8pt; LEFT:0pt; WIDTH:0pt; HEIGHT:0pt; Z-INDEX:66;";
}
</script>
</head>

<body>
<div ID="Menu1" style="position:absolute; TOP:8pt; LEFT:0pt; WIDTH:0pt; HEIGHT:0pt; Z-INDEX:44;">
<table bgcolor="#000000" width="20%">
<tr>
<td width="100%"><a href="javascript: showMenu();">Hello</a> </td>
</tr>
</table>
</div>

<div id="Menu2" style="position:absolute; visibility:hidden; TOP:8pt; LEFT:0pt; WIDTH:0pt; HEIGHT:0pt; Z-INDEX:55;">
<table bgcolor="#000000" width="20%">
<tr>
<td width="100%"><a href="Hello.html">bye</a> </td>
</tr>
</table>
</div>

</body>
</html>

Now, the idea is that when I click 'Hello', the table with 'Bye' should become visible.

I would swear that this is right, yet for some reason its not working. Instead, I get the error:
document.Menu1 is not an object
So obviousley I am wrong. If anyone could tell me how I can access the style of that DIV any other way, I would be very gratefull.

~ Paul
khalidali63
04-26-2003, 06:59 AM
you have the "bye" table in the div tag,thats good,you initially have visibility for this div to be hidden,thats good too,but you are not making it visible at any point,add this line in the function showMenu

document.getElementById("Menu2").style.visibility="visible";
stovellp
04-26-2003, 07:58 AM
Thankyou sssoooooooooooo much!!! I could have sworn I used getElementById() before, but it didn't work.

lol, thank you very much!

~ Paul
stovellp
04-26-2003, 08:28 AM
Ahhh, thankyou very much... I understand that now :D

Thanks to your help, I went on to creating my own little menu system. I added a function to hide the table too when it shows:

<!----- Paul's Fancy Schmancy Menu Test --->
<html>
<head>
<title>Paul's Fancy Schmancy Menu Test</title>
<script langauge="Javascript">
//-------------------------------------------
function showMenu()
{
document.getElementById("Menu2").style.visibility="visible";
}
//-------------------------------------------
function hideMenu()
{
document.getElementById("Menu2").style.visibility="hidden";
}
</script>
</head>

<body>

<!------ Menu 1 ---->
<table style="position:absolute; TOP:8pt; LEFT:0pt; WIDTH:0pt; HEIGHT:0pt; Z-INDEX:44;" bgcolor="#000000" width="20%">
<tr>
<td width="100%"><a href="javascript: showMenu()">Menu</a> </td>
</tr>
</table>

<!------ Popup Menu ---->
<DIV id="Menu2" style="position:absolute; visibility:hidden; TOP:8pt; LEFT:0pt; WIDTH:0pt; HEIGHT:0pt; Z-INDEX:55;">
<table bgcolor="#000000" width="30%" onmouseout="hideMenu()">
<tr>
<td width="100%"><a href="Hello.html">Downloads</a></td>
</tr>
<tr>
<td width="100%"><a href="Hello.html">Products</a></td>
</tr>
<tr>
<td width="100%"><a href="Hello.html">Search</a></td>
</tr>
</table>
</DIV>

</body>
</html>


You would have seen these types of menus before, you mouseover and they show, u select a link, etc. You move your mouse away, they hide again. Unfortunately I'm stuck with hiding them.

What I mean it, it hides just fine, but as soon as I move my mouse off any of the links. This is not what I want, I need the table to stay shown until the user selects a link, or moves their mouse away from the table.

I figured that by doing the 'onmouseout' on the table or the DIV, I'd avoid this, but that unfortunately didn't work.

Theres probably a much simpler way to do this, and if there is I would be glad if you could please tell me :)

~ Paul

And thanks for all your help so far, its much appreciated!
stovellp
04-26-2003, 09:03 AM
Ok, I understood what you were getting at, the width/height restraints I put in were affecting where 'onmouseout' occurs.

I did as you suggested, and got this line:

<DIV id="Menu2" style="position:absolute; visibility:hidden; TOP:25pt; LEFT:0pt; Z-INDEX:55;" onmouseout="hideMenu()">

Unfortunately, the same thing is still occuring, the menu hides as soon as I move the mouse, even if I keep it on the table. :(
khalidali63
04-26-2003, 09:37 AM
just add this line in the table elements deffinition
onmouseover="showMenu()" onmouseout="hideMenu()"
so that it looks like
<table bgcolor="#000000" width="30%" onmouseover="showMenu()" onmouseout="hideMenu()" >

An you are set to go
stovellp
04-26-2003, 09:46 AM
Thankyou very much!! That worked perfectly! I understand it all now, thanks mate! :)
stovellp
04-26-2003, 08:15 PM
Yes that is what I had before, except I didn't have the 'onmouseover' handler for the table, only mouseout, which is what must have been my mistake :) Thanks very much for helping me with this you guys! :D

~ Paul