Javascript Issue (Changing background of parent element on onmouseover)

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Jul 2007
Posts: 29
Reputation: xander85 is an unknown quantity at this point 
Solved Threads: 1
xander85's Avatar
xander85 xander85 is offline Offline
Light Poster

Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #1
Dec 28th, 2008
The Javascript first...

(Purpose: When a user hovers over any link that is contained inside of a <li> tag, then change the background color of the <li>...)

1 - May have an issue with my elements, being that it is not possible to change the background on <li> elements...

2 - Possibly an issue of where I am using the "SomeElement".parentNode...

3 - Some other issue that I may be overlooking...

Javascript Syntax (Toggle Plain Text) 
  1. window.onload = initMenu();
  2.  
  3. function initMenu() {
  4.     for(i=0; i < document.links.length; i++) { 
  5.         var thisLink = document.links[i];
  6.         if(thisLink.parentNode.tagName == "LI"){
  7.             setActivity(thisLink);
  8.         }
  9.     }
  10. }
  11.  
  12. function setActivity(thisLink){
  13.     thisLink.onmouseover = mouseOver(thisLink);    
  14.     thisLink.onmouseout = mouseOut(thisLink);
  15. }
  16.  
  17. function mouseOver(thisLink) {
  18.     this.style.backgroundColor = '#D3FF06';
  19.     return this;
  20. }
  21.  
  22. function mouseOut(thisLink) {
  23.     this.style.backgroundColor = '#171717';
  24.     return this;
  25. }

That is the way the Javascript file reads for the site that I am building. Though, it is not functioning. If a Javascript connoisseur will be so kind to point out any syntactical/logical errors please do. I have been trying to make this work and haven't been able to for a few days now; while working on other projects...
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 3
Reputation: kissmyawesome is an unknown quantity at this point 
Solved Threads: 1
kissmyawesome kissmyawesome is offline Offline
Newbie Poster

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
1
  #2
Dec 29th, 2008
You're on the right track but need to change a few things. Here's the revised code with a comment number next to the changes:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. window.onload = initMenu; // 1
  2.  
  3. function initMenu() {
  4. 	var links=document.getElementsByTagName('a'); // 2
  5.     for(i=0; i < links.length; i++) { 
  6.         var thisLink = links[i];
  7.         if(thisLink.parentNode.tagName == "LI"){
  8.             setActivity(thisLink);
  9.         }
  10.     }
  11. }
  12.  
  13. function setActivity(thisLink){
  14.     thisLink.onmouseover = mouseOver;    // 3
  15.     thisLink.onmouseout = mouseOut;
  16. }
  17.  
  18. function mouseOver() {
  19.     this.parentNode.style.backgroundColor = '#D3FF06';  // 4
  20.     return this;
  21. }
  22.  
  23. function mouseOut() {
  24.     this.parentNode.style.backgroundColor = '#171717';
  25.     return this;
  26. }

1. When you're setting in an event handler, you only need to assign the function to the handler. In your code, you were calling the actual function rather than assigning it. This meant initMenu() ran before the browser had even gotten to creating the DOM nodes.

2. Whenever possible, you should always use the W3C 'document.getElements...' methods rather than collections such as document.links, .forms or .images.

3. Again, you only need to assign the handler, not call it.

4. Whenever a handler is fired, the 'this' keyword points to the element that you registered it against. In this case you registered 'onmouseover' against a link, so use .parentNode to access the list item.

Hope that makes sense!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,647
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 473
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
1
  #3
Dec 29th, 2008
> Whenever possible, you should always use the W3C
> 'document.getElements...' methods rather than collections such as
> document.links, .forms or .images

links is a standard property of the document DOM element. It would be interesting to know the reasons of preferring the long winded and probably expensive document.getElementsByTagName() route.

@xander85:
AFAICR, there is a pure CSS solution which perfectly fits your scenario. I can't think of a better solution than letting the rendering engine do all the heavy lifting for you rather than you doing it yourself. The CSS solution has the advantage of working even when Javascript is disabled. Maybe something like:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. li a {
  2.   background-color: #999;
  3. }
  4. li a:hover {
  5.   background-color: #333;
  6. }
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 29
Reputation: xander85 is an unknown quantity at this point 
Solved Threads: 1
xander85's Avatar
xander85 xander85 is offline Offline
Light Poster

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #4
Dec 29th, 2008
•
•
•
•
Originally Posted by kissmyawesome View Post
You're on the right track but need to change a few things. Here's the revised code with a comment number next to the changes:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. window.onload = initMenu; // 1
  2.  
  3. function initMenu() {
  4. 	var links=document.getElementsByTagName('a'); // 2
  5.     for(i=0; i < links.length; i++) { 
  6.         var thisLink = links[i];
  7.         if(thisLink.parentNode.tagName == "LI"){
  8.             setActivity(thisLink);
  9.         }
  10.     }
  11. }
  12.  
  13. function setActivity(thisLink){
  14.     thisLink.onmouseover = mouseOver;    // 3
  15.     thisLink.onmouseout = mouseOut;
  16. }
  17.  
  18. function mouseOver() {
  19.     this.parentNode.style.backgroundColor = '#D3FF06';  // 4
  20.     return this;
  21. }
  22.  
  23. function mouseOut() {
  24.     this.parentNode.style.backgroundColor = '#171717';
  25.     return this;
  26. }

1. When you're setting in an event handler, you only need to assign the function to the handler. In your code, you were calling the actual function rather than assigning it. This meant initMenu() ran before the browser had even gotten to creating the DOM nodes.

2. Whenever possible, you should always use the W3C 'document.getElements...' methods rather than collections such as document.links, .forms or .images.

3. Again, you only need to assign the handler, not call it.

4. Whenever a handler is fired, the 'this' keyword points to the element that you registered it against. In this case you registered 'onmouseover' against a link, so use .parentNode to access the list item.

Hope that makes sense!

1. When you're setting in an event handler, you only need to assign the function to the handler. In your code, you were calling the actual function rather than assigning it. This meant initMenu() ran before the browser had even gotten to creating the DOM nodes.

Makes perfect sense, thanks for clarifying my error! great post. I have also made the other changes to my code. Works great!

4. Whenever a handler is fired, the 'this' keyword points to the element that you registered it against. In this case you registered 'onmouseover' against a link, so use .parentNode to access the list item.

I had this before, should have never touched that. Thanks for pointing that out. Would have cause more unneeded angst...



As for the pure CSS solution, that would work only with the background color of that particular element, this case the anchor. There is no way to select the parent of an element using pure CSS; that I know of...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,647
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 473
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #5
Dec 29th, 2008
A pure CSS solution:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.     <meta http-equiv="Script-Content-Type" content="text/javascript">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <title>Example</title>
  8.     <style type="text/css">
  9.       li a {
  10.         background-color: #abc;
  11.       }
  12.       li a:hover {
  13.         background-color: #def;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body id="bdy">
  18.     <div>
  19.     <ul>
  20.       <li><a href="http://www.google.co.in/">Google</a></li>
  21.     </ul>
  22.     </div>
  23.   </body>
  24. </html>
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 29
Reputation: xander85 is an unknown quantity at this point 
Solved Threads: 1
xander85's Avatar
xander85 xander85 is offline Offline
Light Poster

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #6
Dec 29th, 2008
•
•
•
•
Originally Posted by ~s.o.s~ View Post
A pure CSS solution:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.     <meta http-equiv="Script-Content-Type" content="text/javascript">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <title>Example</title>
  8.     <style type="text/css">
  9.       li a {
  10.         background-color: #abc;
  11.       }
  12.       li a:hover {
  13.         background-color: #def;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body id="bdy">
  18.     <div>
  19.     <ul>
  20.       <li><a href="http://www.google.co.in/">Google</a></li>
  21.     </ul>
  22.     </div>
  23.   </body>
  24. </html>

That only changes the anchors background color, not the <li></li> background color...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,647
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 473
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #7
Dec 29th, 2008
If that's your requirement then you need to change your original code which is as of now setting the onmouseover property of A elements and not LI elements in which the A elements are nested i.e. instead of thisLink, the element in consideration should be thisLink.parentNode.
Last edited by ~s.o.s~; Dec 29th, 2008 at 1:26 pm.
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 3
Reputation: kissmyawesome is an unknown quantity at this point 
Solved Threads: 1
kissmyawesome kissmyawesome is offline Offline
Newbie Poster

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #8
Dec 29th, 2008
@ ~s.o.s~ - there are a few reasons I'd use getElementsByTagName. The first is that the links collection only includes anchors with an href attribute; its unlikely but still possible that an <a> tag might not have this attribute when the page is loaded (some other script might add it, for example).

Secondly, you can use it on any element in your document, not just the root node. That wasn't required in this circumstance, but if xander85 happens to look up some documentation about it, he'll learn how useful it can be.

Lastly, its simply a more modern way of doing things (and is not very process-intensive at all). Google 'getElementsByTagName' and the chances are you'll come across some current stuff regarding recent browsers and DOMs; maybe you'll read about 'getElementsByClassName' too. Google 'document.links' and you'll find articles talking about Netscape 2 - no thanks.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,647
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 473
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Javascript Issue (Changing background of parent element on onmouseover)

 
0
  #9
Dec 29th, 2008
> Secondly, you can use it on any element in your document, not
> just the root node.

Agreed; looking up anchor elements nested inside a given node would be one of the valid reasons for using getElementsByTagName().

> and is not very process-intensive at all

The reason I said it was a bit processing intensive is because the links collections of the document element is populated when the DOM is created out of the markup but getElementsByTagName requires a traversal through the entire DOM tree to collect all those anchor elements. So, even though it isn't processing intensive in an absolute sense, when compared to document.links, it surely looks so.
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate api automatically beta boarder box bug calendar card checkbox child class column cookies createrange() css cursor decimal design dom download dropdown editor element error events explorer file firehose flash form forms google gwt html htmlform ie8 iframe image() images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jump listbox math matrixcaptcha microsoft mimic mp3 mp4 mysql object onmouseoutdivproblem onmouseover onreadystatechange parameters parent passing php player post problem progressbar rating regex runtime search select session shopping size sql star starrating stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC