AJAX

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

Offline

Light Poster

Javascript Issue (Changing background of parent element on onmouseover)

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...

 Help with Code Tags 
 Javascript Syntax (Toggle Plain Text) 
window.onload = initMenu();
 
function initMenu() {
    for(i=0; i < document.links.length; i++) { 
        var thisLink = document.links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}
 
function setActivity(thisLink){
    thisLink.onmouseover = mouseOver(thisLink);    
    thisLink.onmouseout = mouseOut(thisLink);
}
 
function mouseOver(thisLink) {
    this.style.backgroundColor = '#D3FF06';
    return this;
}
 
function mouseOut(thisLink) {
    this.style.backgroundColor = '#171717';
    return this;
}
window.onload = initMenu();

function initMenu() {
    for(i=0; i < document.links.length; i++) { 
        var thisLink = document.links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}

function setActivity(thisLink){
    thisLink.onmouseover = mouseOver(thisLink);    
    thisLink.onmouseout = mouseOut(thisLink);
}

function mouseOver(thisLink) {
    this.style.backgroundColor = '#D3FF06';
    return this;
}

function mouseOut(thisLink) {
    this.style.backgroundColor = '#171717';
    return this;
}

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...

•

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)

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
window.onload = initMenu; // 1
 
function initMenu() {
	var links=document.getElementsByTagName('a'); // 2
    for(i=0; i < links.length; i++) { 
        var thisLink = links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}
 
function setActivity(thisLink){
    thisLink.onmouseover = mouseOver;    // 3
    thisLink.onmouseout = mouseOut;
}
 
function mouseOver() {
    this.parentNode.style.backgroundColor = '#D3FF06';  // 4
    return this;
}
 
function mouseOut() {
    this.parentNode.style.backgroundColor = '#171717';
    return this;
}
window.onload = initMenu; // 1

function initMenu() {
	var links=document.getElementsByTagName('a'); // 2
    for(i=0; i < links.length; i++) { 
        var thisLink = links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}

function setActivity(thisLink){
    thisLink.onmouseover = mouseOver;    // 3
    thisLink.onmouseout = mouseOut;
}

function mouseOver() {
    this.parentNode.style.backgroundColor = '#D3FF06';  // 4
    return this;
}

function mouseOut() {
    this.parentNode.style.backgroundColor = '#171717';
    return this;
}

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!

•

Join Date: Jun 2006

Posts: 7,620

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

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

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
li a {
  background-color: #999;
}
li a:hover {
  background-color: #333;
}
li a {
  background-color: #999;
}
li a:hover {
  background-color: #333;
}

I don't accept change; I don't deserve to live.

•

Join Date: Jul 2007

Posts: 29

Reputation: xander85 is an unknown quantity at this point

Solved Threads: 1

xander85

Offline

Light Poster

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

Dec 29th, 2008

•

Originally Posted by kissmyawesome

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:
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
window.onload = initMenu; // 1
 
function initMenu() {
	var links=document.getElementsByTagName('a'); // 2
    for(i=0; i < links.length; i++) { 
        var thisLink = links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}
 
function setActivity(thisLink){
    thisLink.onmouseover = mouseOver;    // 3
    thisLink.onmouseout = mouseOut;
}
 
function mouseOver() {
    this.parentNode.style.backgroundColor = '#D3FF06';  // 4
    return this;
}
 
function mouseOut() {
    this.parentNode.style.backgroundColor = '#171717';
    return this;
}
window.onload = initMenu; // 1 function initMenu() { var links=document.getElementsByTagName('a'); // 2 for(i=0; i < links.length; i++) { var thisLink = links[i]; if(thisLink.parentNode.tagName == "LI"){ setActivity(thisLink); } } } function setActivity(thisLink){ thisLink.onmouseover = mouseOver; // 3 thisLink.onmouseout = mouseOut; } function mouseOver() { this.parentNode.style.backgroundColor = '#D3FF06'; // 4 return this; } function mouseOut() { this.parentNode.style.backgroundColor = '#171717'; return this; }
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...

•

Join Date: Jun 2006

Posts: 7,620

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

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

Dec 29th, 2008

A pure CSS solution:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <style type="text/css">
      li a {
        background-color: #abc;
      }
      li a:hover {
        background-color: #def;
      }
    </style>
  </head>
  <body id="bdy">
    <div>
    <ul>
      <li><a href="http://www.google.co.in/">Google</a></li>
    </ul>
    </div>
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <style type="text/css">
      li a {
        background-color: #abc;
      }
      li a:hover {
        background-color: #def;
      }
    </style>
  </head>
  <body id="bdy">
    <div>
    <ul>
      <li><a href="http://www.google.co.in/">Google</a></li>
    </ul>
    </div>
  </body>
</html>

I don't accept change; I don't deserve to live.

•

Join Date: Jul 2007

Posts: 29

Reputation: xander85 is an unknown quantity at this point

Solved Threads: 1

xander85

Offline

Light Poster

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

Dec 29th, 2008

•

Originally Posted by ~s.o.s~

A pure CSS solution:
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <style type="text/css">
      li a {
        background-color: #abc;
      }
      li a:hover {
        background-color: #def;
      }
    </style>
  </head>
  <body id="bdy">
    <div>
    <ul>
      <li><a href="http://www.google.co.in/">Google</a></li>
    </ul>
    </div>
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Script-Content-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Example</title> <style type="text/css"> li a { background-color: #abc; } li a:hover { background-color: #def; } </style> </head> <body id="bdy"> <div> <ul> <li><a href="http://www.google.co.in/">Google</a></li> </ul> </div> </body> </html>

That only changes the anchors background color, not the <li></li> background color...

•

Join Date: Jun 2006

Posts: 7,620

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

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

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.

•

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)

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.

•

Join Date: Jun 2006

Posts: 7,620

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

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

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.