/    Sign up×
Community /Pin to ProfileBookmark

Please Help me fix my code

Copy linkTweet thisAlerts:
May 18.2009

Hello all javascript experts. I have a real problem on my hands and honestly, I’ve been trying to fix this for almost a year now. I’m trying to create a basic drop down menu using the onmousemouseover command. I dont have any problem getting the menu layer to appear when you move your mouse over the button and I can make the menu layer disappear when they move the mouse off the button. The problem is I want the menu layer to stay while they’re moving their mouse over it to make a choice.

The code I’m using is listed below.

Everything else works, the only problem I’m having is with the checkMenu function. All though I need this affect with 3 different menu layers I’ve been practicing with just one which I’ve given the ID “resources”. I think the problem is in the if statement. [B][SIZE=”4″]Why isn’t it working!!?[/SIZE][/B]

window.onload = initAll;

function initAll(){
document.getElementById(“resourcesbtn”).onmouseover = openMenu;
document.getElementById(“trainingbtn”).onmouseover = openMenuOne;
document.getElementById(“marketingbtn”).onmouseover = openMenuTwo;
document.getElementById(“resourcesbtn”).onmouseout = checkMenu;
document.getElementById(“trainingbtn”).onmouseout = checkMenuOne;
document.getElementById(“marketingbtn”).onmouseout = checkMenuTwo;

}
function openMenu(){
document.getElementById(“resources”).style.display = “block”;
}
function openMenuOne(){
document.getElementById(“training”).style.display = “block”;
}
function openMenuTwo(){
document.getElementById(“marketing”).style.display = “block”;
}
function checkMenu(){
if(document.getElementById(“resources”).onmouseover){
document.getElementById(“resources”).style.display = “block”;
}
else{
document.getElementById(“resources”)style.display = “none”;
}
}

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAMay 18.2009 — Wow - that's a really complicated version. You might check into this one: http://htmldog.com/articles/suckerfish/dropdowns/
Copy linkTweet thisAlerts:
@jawauneauthorMay 18.2009 — Well....I understand this one and I dont want to redo everything. All I want to do is get it fixed. I know that the problem is in the checkMenu function. I just want to know what I'm missing.

Basically, I just need to know how to properly write it so that my if statement will make it display "block" when the mouse is over it, else make it display "none". I'm not writing it right. Can someone please tell me what the problem is in that checkMenu function?
Copy linkTweet thisAlerts:
@Y_LessMay 18.2009 — onmouseover is a callback, not a state. It will be true if you have defined something to happen when the mouse goes over, even if the mouse is not over at that moment.
Copy linkTweet thisAlerts:
@FangMay 19.2009 — Possibly:function checkMenu() {
obj=document.getElementById("resources");
obj.style.display = (obj.style.display != "block")? "block" : "none";
}
Copy linkTweet thisAlerts:
@jawauneauthorMay 19.2009 — Your code almost worked. I cut and pasted it but as soon as I try to move the mouse off of the button and unto the menu layer it disappears. How do you modify it so that it'll stay as display = "block while the mouse curser hovers over it?
Copy linkTweet thisAlerts:
@Y_LessMay 19.2009 — Well you've not posted your HTML but you need to have the menu contents as a child of the menu header:

<i>
</i>&lt;li&gt;Menu 1
&lt;ul&gt;
&lt;li&gt;Menu 1 Item 1&lt;/li&gt;
&lt;li&gt;Menu 1 Item 2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;


That way while you're mouseovering the menu contents you're still technically mouseovering the header too.
Copy linkTweet thisAlerts:
@jawauneauthorMay 20.2009 — Nooo htat doesn't sound right. Listen, can someone just show me how to correctly right my "if statement" so that it is saying if the mouse is over the "resources" div it will display as "block" else make it display as "none"? If can get the syntax of that working correctly everything should be fine.
Well you've not posted your HTML but you need to have the menu contents as a child of the menu header:

<i>
</i>&lt;li&gt;Menu 1
&lt;ul&gt;
&lt;li&gt;Menu 1 Item 1&lt;/li&gt;
&lt;li&gt;Menu 1 Item 2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;


That way while you're mouseovering the menu contents you're still technically mouseovering the header too.[/QUOTE]
Copy linkTweet thisAlerts:
@FangMay 20.2009 — Give an example of the html you are using
Copy linkTweet thisAlerts:
@jawauneauthorMay 20.2009 — well if I show you the HTML it wont help you any because everything is in divs the resources div is a list but its not a sub list. Its just stand alone by itself.
Copy linkTweet thisAlerts:
@jawauneauthorMay 21.2009 — Can someone please show me how to write a function with an onmouseover if statement?

Here is the current function that I was using but its not working. I obviously dont have the syntax correct. Display as "block" else make it display as "none".

function checkMenu() {

var menu = document.getElementById("resources");

if (menu.onmouseover){

menu.style.display = "block";

else{menu.style.display = "none"}

}[/QUOTE]
Copy linkTweet thisAlerts:
@Y_LessMay 21.2009 — onmouseover is a callback, not a state.[/quote]

You do:

element.onmouseover = function ()
{
alert("The mouse is now over the thing");
}

element.onmouseout = function ()
{
alert("Now it's not");
}

Not:

if (element.onmouseover)
{
alert("The mouse is now over the thing");
}
else
{
alert("Now it's not");
}

See the difference? A few links on events:

[URL]https://developer.mozilla.org/En/DOM/Event[/URL]

https://developer.mozilla.org/en/DOM...dEventListener

[URL]http://en.wikipedia.org/wiki/DOM_Events[/URL]
Copy linkTweet thisAlerts:
@jawauneauthorMay 22.2009 — You do:

element.onmouseover = function ()
{
alert("The mouse is now over the thing");
}

element.onmouseout = function ()
{
alert("Now it's not");
}

Not:

if (element.onmouseover)
{
alert("The mouse is now over the thing");
}
else
{
alert("Now it's not");
}

See the difference? A few links on events:

[URL]https://developer.mozilla.org/En/DOM/Event[/URL]

https://developer.mozilla.org/en/DOM...dEventListener

[URL]http://en.wikipedia.org/wiki/DOM_Events[/URL][/QUOTE]

I understand what your aying but here is the problem. I know how to write a function to get the "resource" div to appear onmouseover and I know how to make another function work to make the "resource" div disappear onmouseout.

The function that I listed above is actually supposed to run onmouseout. The onmouseover function works just fune.

Basically, I'm trying to get that checkMenu function to ckeck if the mouse is over the "resources" div before it makes it disappear. Thats why I assumed an if stament would be the best way to go.
Copy linkTweet thisAlerts:
@Y_LessMay 23.2009 — So you're looking for something like:

<i>
</i>var over = false;
resource.onmouseover = function ()
{
over = true;
}

resource.onmouseout = function ()
{
over = false;
}

checkMenu = function ()
{
if (over)
{
// Do something
}
else
{
// Do something else
}
}


(Or some better event attach method)?
×

Success!

Help @jawaune spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...