JavaScript Menubox Visibility Error

J

jmensch

I'm reasonably new to JavaScript and DHTML,
so I'm sorry if this is an obvious mistake.

The following snippet of code is intended to
make the menu -- the absolute-positioned <div>
section -- disappear when one mouses over the
graphic, but instead it generates a "document.
menu_admin has no properties" error in Firefox
and does nothing in IE. Can someone tell me
what it is that I'm doing wrong here?

Ironically, when you replace "menu_admin"
with "omv" in the function, it works fine to
make the image disappear, but no such luck
with the <div>-box.

-- Julian Mensch

----------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<style type="text/css">
<!--
.menu1
{
position: absolute;
left: 100px;
top: 100px;
background-color: #000077;
color: #FFFFFF;
z-index: 2;
visibility:visible;
}
-->
</style>


</head>
<body>

<div id="menu_admin" class="menu1">
<b>Admin Pages</b>
<br>Add New Book
<br>List Popular
<br>Edit User Accounts
<br>Backup Database
</div>

<img id="omv" src="tab_admin.gif" onMouseOver="onMouseOver1()">

<script language="javascript">
function onMouseOver1()
{
document.menu_admin.style.visibility = "hidden";
}
</script>
</body>
</html>
 
L

Lasse Reichstein Nielsen

The following snippet of code is intended to
make the menu -- the absolute-positioned <div>
section -- disappear when one mouses over the
graphic, but instead it generates a "document.
menu_admin has no properties" error in Firefox
Click to expand...

You are expecting the document element to contain a property
with the same name as the id attribute of your div element.
It doesn't. The correct way to access an element with an id
is to use
document.getElementById("menu_admin")
and not just "document.menu_admin" or even "menu_admin".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Click to expand...

You are claiming to write XHTML ...
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<style type="text/css">
<!--
Click to expand...

.... and in XHTML, a comment like this would make the entire
content of the style element disappear. "Luckily", the browser
doesn't treat your page as XHTML.

I recommend just using HTML for now.
<div id="menu_admin" class="menu1"> ....
</div>

<img id="omv" src="tab_admin.gif" onMouseOver="onMouseOver1()">
Click to expand...

The "alt" attribute is required on img elements.

In XHTML, attribute names are case sensitive, so it should be
"onmouseover" in all small letters.
<script language="javascript">
Click to expand...

Should be
function onMouseOver1()
{
document.menu_admin.style.visibility = "hidden";
Click to expand...

This should then be:
document.getElementById("menu_admin").style.visibility = "hidden";

Good luck
/L
 
R

RobG

I'm reasonably new to JavaScript and DHTML,
so I'm sorry if this is an obvious mistake.

The following snippet of code is intended to
make the menu -- the absolute-positioned <div>
section -- disappear when one mouses over the
graphic, but instead it generates a "document.
menu_admin has no properties" error in Firefox
and does nothing in IE.
Click to expand...

It generates an error in IE too, you may not have IE setup to report
scripting errors. Read the group FAQ:

Can someone tell me
what it is that I'm doing wrong here?

Ironically, when you replace "menu_admin"
with "omv" in the function, it works fine to
Click to expand...

Not 'ironically'. Browsers create an image collection that can be
addressed the same way you address array elements, e.g.

document.images[0]
or
document.images['omv']
or
document.images.omv

or (less preferred)
document.<image_name>
or
document.<image_id>

You can do the same with forms, but not most other elements.
make the image disappear, but no such luck
with the <div>-box.

-- Julian Mensch

----------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Click to expand...

Your doctype indicates XHTML, but your code is HTML 4. Which do you
really want? Probably HTML 4 is the best option unless you have a
good reasons for XHTML.
<head>
<title>Untitled Page</title>

<style type="text/css">
<!--
Click to expand...

There is no need to hide style declarations, it is likely harmful if
you really do want XHTML.
.menu1
{
position: absolute;
left: 100px;
top: 100px;
background-color: #000077;
color: #FFFFFF;
z-index: 2;
visibility:visible;
}
-->
Click to expand...

And here.
</style>


</head>
<body>

<div id="menu_admin" class="menu1">
<b>Admin Pages</b>
<br>Add New Book
<br>List Popular
<br>Edit User Accounts
<br>Backup Database
</div>

<img id="omv" src="tab_admin.gif" onMouseOver="onMouseOver1()">

<script language="javascript">
Click to expand...

The language attribute is depreciated, type is required:

function onMouseOver1()
{
document.menu_admin.style.visibility = "hidden";
Click to expand...

You can't refer to a document element this way, use something like:

if (document.getElementById) {
var x = document.getElementById('menu_admin');
} else if (document.all) {
var x = document.all['menu_admin'];
} else { return; }

if ( x && x.style ) {
x.style.visibility = 'hidden';
}
 
J

jmensch

Thank both of you graciously for the reply.
The top two lines that claim to write XHTML
are in fact auto-generated by Microsoft Web
Developer 2005 for ASP.NET, so I'm not sure
I should change them.

I will familiarize myself more completely with
the differences between HTML 4 and XHTML,
however. This warning probably saved me a
good deal of anguish in the future, so now I
owe the two of you twice-over. :)

I will read the FAQ in more detail, too.

-- Julian Mensch
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Help with my responsive home page 2
Need help , Having problem with Drag n Drop... 1
Aligned to the left 3
I am trying to detect Which image id="" was clicked ? 22
In javascript, XML File Create, File Save 2
How to position the *tooltip* comment on these buttons? 9
Help me sort out this script 1

Members online

Total: 32 (members: 2, guests: 30)
Robots: 443

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top