JS Popup menu problem 1

[DanT07]

Hi,

Im fairly new to javascript and usually end up copying / pasting code as i dont properly understand. However I have tried making my own popup menu using the simple script:

function showMenu(layer){
layer.style.display = "block";
};

function hideMenu(layer){
layer.style.display = "none";
}

and calling these functions using onMouseOver="showMenu(Layer1)" command. This works fine except in Mozilla based browsers it doesnt hide the menu. Does anyone know why?
The page can be seen at

http://www.inspiracode.com/inspv4/menu.htm

Thanks for any help

 

[cLFlaVA]

try something like this instead:

<td width="100" onMouseOver="showMenu('Layer1')" onMouseOut="hideMenu('Layer1')">

function showMenu(objName){
    document.getElementById(objName).style.display = "block";
}

function hideMenu(objName){
    document.getElementById(objName).style.display = "none";
}

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[adam0101]

It works for me (amazingly) even without using getElementById. Sort of, anyway. I think you either need to move the divs out of the <TD>, or add the onmouseout event to the divs as well.

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

 

[stormbind]

Mozilla sometimes needs you to pass the event aswell as the object.

--Glen

Memoria mihi benigna erit qui eam perscribam

 

[DanT07]

Ive tried that but it doesnt seem to make any difference.

Sorry I dont think i described the problem very well either.

If you move out of the table it hides the menu fine but i also have:

onMouseOver="showMenu('Layer1')" onMouseOut="hideMenu('Layer1')"

attached to the layer tag too so that if you move over the layer it stays visible. IE is fine but in Firefox you have to move out of the layer, then back in, then back out again for it to hide.

 

[adam0101]

You see, it works if you move your mouse up, but not down. I believe it's because since the divs are within the TD, you're not actually leaving the TD so the onmouseout event doesn't fire. However, then leaving the div doesn't fire the onmouseout event of the TD either. Here's what you can do:

- Set a global variable to be used for a timer reference.
- In TD and DIV onmouseout, set a timer that will close the menu.
- In TD and DIV onmouseover, cancel the timer and show the menu if hidden.

The timer is so the menu doesn't close while you're moving the mouse from the menu link to the menu or vice versa.

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

 

[BillyRayPreachersSon]

Do you really need to support Netscape v4? It's about 6 years old, hardly used, and supports hardly any of todays web standards.

If you don't, I'd ditch the use of the layer element altogether, in favour of the div element.

Hope this helps,
Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[BillyRayPreachersSon]

Sorry - ignore that. I've just viewed your source, and found you have no layer tag ("attached to the layer tag" was misleading).

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[DanT07]

Hehe yeah for some reason I refer to div's as layers. It is a div element.

Anyway I can try adding the timer like Adam says but as i said im only learning so I will have to find out how to do this first!

 

[adam0101]

Hmm, I should've read your code a little more closely. I see you already have outmouseout events in your divs.

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

 

[adam0101]

You know, as admirable as your actions are by actively trying to learn how to create a menu, it might be easier for you to find a working example of what you want to create and look at the code to see how it works. There are a lot of things to consider when making a DHTML menu - such as what to do when the menu will overlap a select box (which will show through the menu). Many have spent tons of time finding and solving these problems. Rather than reinvent the wheel, I suggest you look at, and learn from, the code that others have written.

Here are some good places to start:

http://www.dynamicdrive.com/

http://siteexperts.com/

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

 

[DanT07]

I know exactly what you mean. Ive tried dozens of them yet they all seem to come with their own unique problems. I think probably the best thing i can do is to find some other way to display my menu :-/

Thanks for the help anyway.

Dan

 

[cLFlaVA]

my favorite example:

http://www.alistapart.com/articles/dropdowns/

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[DanT07]

Hi,

Ive taken your advice and gone for a menu system that is already out there.

http://www.inspiracode.com/menu/menu.htm

The one i chose is along the same lines as your example cLFlaVA. Again it works perfectly in IE and Opera but in Firefox there is a big flicker problem. Is there a way to reduce this flicker or is it just something i will have to put up with?

Thanks again,
Dan

 

[adam0101]

It looks like FireFox is having a hard time redrawing the page. I looked on Google for an answer and found this. Maybe it'll be a non-issue with the next release of FireFox.

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

 

[DanT07]

Ah good hopefully it wont be too long until its released then.

Thanks,
Dan