Help! change the color background of a link.

Page 1 of 1

7 Replies - 1252 Views - Last Post: 17 June 2012 - 02:12 PM

#1 M1CK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 27-May 12

Help! change the color background of a link.

Posted 17 June 2012 - 05:50 AM

Hello, I'm new to Javascript. Any help will be appreciated.

I'm building a website using frames where I have a menu with links on a top frame. The a items in the menu need to adopt and maintain a certain background color when the user clicks on them.

Here's what I've tried with little result:

On <head>:

<script type="text/javascript">
<!--
function onLink(aLink){
document.link.style.background.color = white; //resets current active link
document.getElementById(aLink).style.background.color = red; //sets the red background color for specified link
}
-->
</script>

On body:
<a href="kana.html" id="kana" target="rightFrame" onclick="onLink();"> &nbsp;KANA&nbsp;</a>&nbsp;<a href="kanji.html" id="kanji" target="rightFrame" onclick="onLink();">&nbsp;KANJI&nbsp;</a>&nbsp;<a href="words.html" id="words" target="rightFrame" onclick="onLink();">&nbsp;WORDS&nbsp;</a>&nbsp;<a href="sentences" id="sentences" target="rightFrame" onclick="onLink();">&nbsp;SENTENCES&nbsp;</a>&nbsp;<a href="grammar" id="grammar" target="rightFrame" onclick="onLink();">&nbsp;GRAMMAR&nbsp;</a>&nbsp;<a href="resources.html" id="resources" target="rightFrame" onclick="onLink();">&nbsp;RESOURCES&nbsp;</a>


Is This A Good Question/Topic? 0
  • +

Replies To: Help! change the color background of a link.

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: Help! change the color background of a link.

Posted 17 June 2012 - 08:15 AM

Hey.

First of all, what is document.link supposed to be referring to? Have you, somewhere, set this to the last active link? (I don't see it in your code.)

OK, so you need two things to happen when the user clicks a button: 1) The background color of the last active link is reset, 2) The link just clicked needs to have it's background color changed.

For the first part, the simplest solution is to just fetch all the links and set the background color of them all. It sounds inefficient, but in an event that happens this rarely it doesn't really matter.

The document.getElementsByTagName lets you get a list of all elements of a certain type on the page. You can use that to loop through all the links on your page and change their appearance. The function can also be called on other DOM elements, so if the links are in a container (which I recommend) then you can call it on that container instead, so you don't accidentally change a link that isn't in the menu.
var container = document.getElementById("menu");
var links = container.getElementsByTagName("a");

for (var i = 0, l < links.length; i < l; ++i) {
    // Edit each link here, by doing something like:
    links[i].style.color = "#f00";
}


The second part is simpler. You can simply pass the link element that was clicked to the Javascript handler, and then edit the styles on that.
// Assuming the link looks like:
<a href="kana.html" target="rightFrame" onclick="onLink(this);">

// You'd want the Javascript function do look more like this:
function onLink(newActiveLink) {
    // Update all the other links
    // ...

    // And then update the new active link
    newActiveLink.style.backgroundColor = "#f00";
}

Was This Post Helpful? 1
  • +
  • -

#3 M1CK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 27-May 12

Re: Help! change the color background of a link.

Posted 17 June 2012 - 11:13 AM

View PostAtli, on 17 June 2012 - 04:15 PM, said:

Hey.

First of all, what is document.link supposed to be referring to? Have you, somewhere, set this to the last active link? (I don't see it in your code.)


Hello Atli, thank you very much for your answer. It put me in the right direction. 
document.link
was supposed to magically refer to all links on page :D

My script isn't working yet. I'll post how it is now rigth away
Was This Post Helpful? 0
  • +
  • -

#4 M1CK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 27-May 12

Re: Help! change the color background of a link.

Posted 17 June 2012 - 11:22 AM

now I have this in the <header>:
<script type="text/javascript">
<!--
function onLink(newActiveLink){
//resets current active link:
var container = document.getElementById("menu");
var links = document.container.getElementsByTagName("a");
for (var i = 0; l < links.length; ++i;) {
   links[i].style.backgroundColor="#FFFFFF";
}
//sets the red background color for specified link:
newActiveLink.style.backgroundColor="#990000";
}
-->
</script>

And in the body I have this:
<div id="menu">
<p align="right"><a href="intro/index.html" target="submenu">&nbsp;INTRO&nbsp;</a>&nbsp;<a href="about/index.html" target="submenu">&nbsp;ABOUT&nbsp;</a></p>
<h1><span class="style1">NIHONGO</span> EXPRESS . COM</h1>
<h2>Mick is learning Japanese! Lessons, Word Lists, Resources...</h2>
<p style="margin-top:12px;"><a href="kana/index.html" target="submenu" onclick="onLink(this);"> &nbsp;KANA&nbsp;</a>&nbsp;<a href="kanji/index.html" target="submenu" onclick="onLink(this);">&nbsp;KANJI&nbsp;</a>&nbsp;<a href="words/index.html" target="submenu" onclick="onLink(this);">&nbsp;WORDS&nbsp;</a>&nbsp;<a href="sentences/index.html" target="submenu" onclick="onLink(this);">&nbsp;SENTENCES&nbsp;</a>&nbsp;<a href="grammar/index.html" target="submenu" onclick="onLink(this);">&nbsp;GRAMMAR&nbsp;</a>&nbsp;<a href="resources/index.html" target="submenu" onclick="onLink(this);">&nbsp;RESOURCES&nbsp;</a></p>
</div>

I thought that should work but does nothing, where is the problem? I've spent a lot of time trying several options but none works.
Here you have the website where I'm implementing it: NihongoExpress.com

Argh! Coding is hard!
Any help is highly apreciated.
Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: Help! change the color background of a link.

Posted 17 June 2012 - 11:44 AM

You've got an error in your for loop. Two, actually, but the first should be showing in the Error Console.

Firefox reports it as:

Quote

Timestamp: 17.6.2012 18:42:32
Error: missing ) after for-loop control
Source File: http://nihongoexpress.com/top.html
Line: 12, Column: 37
Source Code:
for (var i = 0; l < links.length; ++i;) {

You've got an extra ; after the ++i statement.

As for the second error. In my example I set a l value after the i value to store the length of the array. (A habit I picked up when using other languages, where reading the length of a list can be more expensive than reading a property is.) Your code doesn't do this, but you seem to have used l rather than i in the second part of the for loop.
Was This Post Helpful? 1
  • +
  • -

#6 M1CK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 27-May 12

Re: Help! change the color background of a link.

Posted 17 June 2012 - 12:09 PM

Thank you again Atli, I have corrected the errors you pointed (how blind I was) but the script keeps failing to do anything.

Here's how it looks now:
<script type="text/javascript">
<!--
function onLink(newActiveLink){
//resets current active link:
var container = document.getElementById("menu");
var links = document.container.getElementsByTagName("a");
for (var i = 0; i < links.length; ++i) {
   links[i].style.backgroundColor="#FFFFFF";
}
//sets the red background color for specified link:
newActiveLink.style.backgroundColor="#990000";
}
-->
</script>


I don't now what to try next... any ideas?
Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: Help! change the color background of a link.

Posted 17 June 2012 - 01:05 PM

Did you check the Error Console? It's telling me this when clicking a link:

Quote

Timestamp: 17.6.2012 20:03:09
Error: document.container is undefined
Source File: http://nihongoexpress.com/top.html
Line: 11

You should only be using container, not document.container.
Was This Post Helpful? 1
  • +
  • -

#8 M1CK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 27-May 12

Re: Help! change the color background of a link.

Posted 17 June 2012 - 02:12 PM

View PostAtli, on 17 June 2012 - 09:05 PM, said:

Did you check the Error Console?

No, just in this post I learnt about it.
I have good news... the script work flawesly now! Finally we got it!
Atli, you did most of the work: thank youu very much!
Here is how it looks now. Everybody free to adapt and reuse it as needed.

In <head>:
<script type="text/javascript">
<!--
function onLink(newActiveLink){
//resets current active link:
var container = document.getElementById("menu");
var links = container.getElementsByTagName("a");
for (var i = 0; i < links.length; ++i) {
   links[i].style.backgroundColor="#FFFFFF";
   links[i].style.borderColor="#000000";
}
//sets the red background color for specified link:
newActiveLink.style.backgroundColor="#F0F0F0";
newActiveLink.style.borderColor="#F0F0F0";
}
-->
</script>


In body:
<div id="menu">
<p align="right"><a href="intro/index.html" target="submenu" onclick="onLink(this);">&nbsp;INTRO&nbsp;</a>&nbsp;<a href="about/index.html" target="submenu" onclick="onLink(this);">&nbsp;ABOUT&nbsp;</a></p>
<h1><span class="style1">NIHONGO</span> EXPRESS . COM</h1>
<h2>Mick is learning Japanese! Lessons, Word Lists, Resources...</h2>
<p style="margin-top:12px;"><a href="kana/index.html" target="submenu" onclick="onLink(this);"> &nbsp;KANA&nbsp;</a>&nbsp;<a href="kanji/index.html" target="submenu" onclick="onLink(this);">&nbsp;KANJI&nbsp;</a>&nbsp;<a href="words/index.html" target="submenu" onclick="onLink(this);">&nbsp;WORDS&nbsp;</a>&nbsp;<a href="sentences/index.html" target="submenu" onclick="onLink(this);">&nbsp;SENTENCES&nbsp;</a>&nbsp;<a href="grammar/index.html" target="submenu" onclick="onLink(this);">&nbsp;GRAMMAR&nbsp;</a>&nbsp;<a href="resources/index.html" target="submenu" onclick="onLink(this);">&nbsp;RESOURCES&nbsp;</a></p>
</div>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1