expand div onmouseover, should be simple -- please help!

yokopolaris · 12-26-2012, 10:10 PM

Hi everyone,

So I've been working on this site and I think I must be tired or something because I can't for the life of me figure out why this script isn't working! I'm trying to make a simple mouse over drop down menu. I want to mouse over a tab and have it change the display property of the div below it. I watched the script in firebug and when I mouse over it the script window says:

Quote:

function onmouseover(event) {
expandDiv('tools');
}

/*and*/

function onmouseout(event) {
hideDiv('tools');
}

This is the HTML:

Quote:

<div class="tab"><a href="" onmouseover="expandDiv('tools');" onmouseout="hideDiv('tools');">Tools</a>
<br />
<div id="tools" class="menu">
<ul>
<li>Rakes</li>
<li>Leaf Grabbers</li>
<li>Bulb Augers</li>
<li>Trowels</li>
<li>Scoops</li>
<li>Weeders</li>
<li>Composting</li>
<li>Easy Reachers</li>
<li>Pruning Saws</li>
<li>Scissors</li>
<li>Shears</li>
<li>Knives</li>
<li>Grass & Hedge Shears</li>
<li>Tool & Shear Sharpeners</li>
</ul>
</div>
</div>

The script:

Quote:

And the CSS:

Quote:

.tab {
display:none;
text-align:center;
width:8%;
float:left;
margin-top:.8em;
margin-right:2em;
}

Any help you can give would be awesome. I know I'm doing something stupid but I need a fresh pair of eyes to find it.

Old Pedant · 12-26-2012, 10:47 PM

Oh...I see the problem: When you set the display in CSS, it is *NOT* available via element.style.display. But in any case, there is NO REASON for you to use an if test in your expandDiv and hideDiv functions! You don't want to toggle the display; you want to set it directly.

Easy fix:

Code:

function expandDiv( id)
{
    document.getElementById(id).style.display = "block";
}
function hideDiv(id)
{
    document.getElementById(id).style.display = "none";
}

AndrewGSW · 12-26-2012, 10:49 PM

Code:

function onmouseover(event) {
expandDiv('tools');
}

/*and*/

function onmouseout(event) {
hideDiv('tools');
}

..is, apparently the code that displays in Firebug.

It works for me, apart from the fact that nothing is initially visible. So use

Code:

.tab {
    display: block;
/* .. and possibly.. */
#tools {
    display: none;

Also, use href="#" for the link.

Old Pedant · 12-26-2012, 10:49 PM

And your CSS makes no sense.

Code:

.tab {
    display:none;
    ...
}

That will initially hide *EVERYTHING*, even the <a> toggler!

You need, instead,

Code:

#tools { 
    display : none;
    ...
}

EDIT: Andrew beat me to it.

Old Pedant · 12-26-2012, 10:51 PM

Actually, even if you use <a href="#"> you also need to add an onclick to your <a> tag:

Code:

<a href="#" onclick="return false;" ...>

so that it will do nothing at all if clicked on.

A better answer might be to use a <span> instead of <a>.

AndrewGSW · 12-26-2012, 11:13 PM

Quote:

A better answer might be to use a <span> instead of <a>.

I agree

there is no reason to use a link if it isn't a link.

Old Pedant · 12-26-2012, 11:48 PM

Realistically, this whole thing could be done ultra simple, once the CSS is corrected:

Code:

<div class="tab">
  <span 
    onmouseover="document.getElementById('tools').style.display='block';"
    onmouseout ="document.getElementById('tools').style.display='none';"
>Tools</span>
<br />
<div id="tools" class="menu">
<ul>
...

Maybe not best coding style, but the simplest.

coothead · 12-27-2012, 12:15 AM

Hi there yokopolaris,

and a warm welcome to these forums.

Have you not considered just using CSS as a possible solution?

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>get your tools here...</title>

<style type="text/css">
#tools {
    float:left;
    cursor:pointer;
 }
#tools ul {
    display:none;
 }
#tools:hover ul {
    display:block;
 }
</style>

</head>
<body>

<div id="tools">Tools
<ul>
 <li>Rakes</li>
 <li>Leaf Grabbers</li>
 <li>Bulb Augers</li>
 <li>Trowels</li>
 <li>Scoops</li>
 <li>Weeders</li>
 <li>Composting</li>
 <li>Easy Reachers</li>
 <li>Pruning Saws</li>
 <li>Scissors</li>
 <li>Shears</li>
 <li>Knives</li>
 <li>Grass &amp; Hedge Shears</li>
 <li>Tool &amp; Shear Sharpeners</li>
</ul>
</div>

</body>
</html>

coothead