By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,377 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,377 IT Pros & Developers. It's quick & easy.

Code not working onmouseover

P: 9
Hi

I have the following code for a dropdown menu that I am creating and the problem is that whilst the variables are being set correctly the for and if statement aren't functioning correctly.

Instead of allowing the dropdown menu to be activated onmouseover it flashes on/off briefly when the page is loaded and that's it.

Here is the code that I am working with:

Expand|Select|Wrap|Line Numbers
  1. function gatherItems(c){
  2.   //alert("Function has been called and the id is: "+c);
  3.   container = document.getElementById(c);
  4.   items = container.getElementsByTagName('a');
  5.   subs = container.getElementsByTagName('div');
  6.   alert(items.length+" "+subs.length);
  7.   //alert(items.id);
  8.   for(var i=0;i<items.length;i++){
  9.     if(items[i].id){
  10.       items[i].onmouseover = show(items[i].id);
  11.       items[i].onmouseout = delay();
  12.     }
  13.   }
  14.   /*for(var s=0;s<subs.length;s++){
  15.     if(subs[s].id){
  16.       subs[s].onmouseover = canceldelay();
  17.       subs[s].onmouseout = delay();
  18.     }
  19.   }*/
  20. }
Note: The functions being called onmouseover and onmouseout are working fine without this piece of code.
Feb 21 '12 #1

✓ answered by gits

please try the following explicit closure construct. i think it should work.

Expand|Select|Wrap|Line Numbers
  1. for(var i=0; i< items.length; i++) {
  2.     if(items[i].id){
  3.         items[i].onmouseover = function(idx) {
  4.             return function() { show(items[idx].id) };
  5.         }(i);
  6.  
  7.         items[i].onmouseout = delay();
  8.     }
  9. }
  10.  
assigning handlers in a loop leads to always have i = items.length in the end. closuring the index explicitly should fix the issue.

Share this Question
Share on Google+
6 Replies


gits
Expert Mod 5K+
P: 5,390
please try the following explicit closure construct. i think it should work.

Expand|Select|Wrap|Line Numbers
  1. for(var i=0; i< items.length; i++) {
  2.     if(items[i].id){
  3.         items[i].onmouseover = function(idx) {
  4.             return function() { show(items[idx].id) };
  5.         }(i);
  6.  
  7.         items[i].onmouseout = delay();
  8.     }
  9. }
  10.  
assigning handlers in a loop leads to always have i = items.length in the end. closuring the index explicitly should fix the issue.
Feb 22 '12 #2

P: 9
That has solved the problem of the dropdown not appearing, however it now won't go away without refreshing the page
Feb 22 '12 #3

gits
Expert Mod 5K+
P: 5,390
?? what does the delay-method do? i suppose it should trigger a close action? while assigning the handler you mustn't execute that, assign it like this:

Expand|Select|Wrap|Line Numbers
  1. items[i].onmouseout = delay;
that way you assign a reference to the delay-function which then is executed on mouseout.
Feb 23 '12 #4

P: 6
Hi...
I hope once you wrap the script in $(document).ready(function () { }); this will work correctly. Thanks for the code,i run the code but there is a delay only when i mouseover menu3 and i need in others too,only when i mouseover and mouseout in specific divs the settimeout shall be disabled. If you have control over the code, it is a lot simpler to just build the delay into the event handler from the beginning than wrapping it in on the client side.

thanks,
jackie

[Removed URL]
Feb 23 '12 #5

gits
Expert Mod 5K+
P: 5,390
@Jackie:

huh - can you please explain what that means? how is that post related to the above posts? what is menu3, what are the specific divs and how could one have no control over his/her code etc.?

regards
Feb 23 '12 #6

P: 9
Thanks for all your help, it now works perfectly :)
Mar 6 '12 #7

Post your reply

Sign in to post your reply or Sign up for a free account.