PDA

View Full Version : [RESOLVED] Changing Link Colour with Javascript

revolver_ocelot
07-09-2009, 04:21 PM
Hey All

I have a DHTML page where I can change the background and font colour of a div. This works fine with a little Javascript but the link colour doesnt change. Is there any way of changing the colour of the links as well as the text?

here's my current page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<!-- Style Imports -->
<link href="../cssfiles/style.css" rel="stylesheet" type="text/css" media="screen" />
<link REL="SHORTCUT ICON" HREF="http://gaimyo.com/largefavicon.ico">

<!-- Script Imports -->
<script src="../scripts/setcolors.js"></script>
<script language="Javascript">

function init()
{
if ( get_cookie( "backgroundColor" ) )
{
var div = document.getElementById( "mainBody" ) ;
div.style.backgroundColor = get_cookie( "backgroundColor" ) ;
}

if ( get_cookie( "fontColor" ) )
{
var div = document.getElementById( "mainBody" ) ;
div.style.color = get_cookie( "fontColor" ) ;
}
}

function forward()
{
location.href="http://www.clrcloud.com/testpages/testIntroduction" ;
}

window.onload = init ;
</script>

</head>

<body>
<div id="wrapper">

<div id="mainBody">
<h3>Test Introduction</h3><br />
The following test consists of three sections with each section having two parts. Each section will cover one of the three major areas of
science: Physics, Chemestry and Biology.<br /><br />

During each part of the test, either a word cloud or a piece of text will be presented to you containing information about a topic
in one of the three main areas of science.<br /><br />

At the end of each section you will be asked a small number of questions on the topics you have covered.<br /><br />

At the end of the test you will be invited to give your own opinions on how you felt about using word clouds to learn.<br /><br />

If you would like, you can provide your name and email address to receive feedback about the results of this research project, however this is
not necessary if you wish to remain anonymous.<br /><br />

When you are ready, click the button below to begin the test.<br /><br /><br />

<div align="center"><button type="button" id="testButton" onclick="forward()">Begin</button></div>

</div>

<div id="footer">
<ul>
<li>
<table>
<tr>
<td>
<form action="#" name="bgColorForm">Set background color:
<select name="bgSelectField"onChange="setBackgroundColor()">
<option value="#F8F8FA">default</option>
<option value="#000000">black</option>
<option value="#006400">dark green</option>
<option value="LightGreen">light green</option>
<option value="LightBlue">light blue</option>
<option value="#F0E68C">light yellow</option>
<option value="#FFA500">orange</option>
<option value="#FF00FF">pink</option>
<option value="Gray">gray</option>
<option value="White">white</option>
</select>
</form>
</td>
<td>
&nbsp; &nbsp; | &nbsp; &nbsp;
</td>
<td>
<form action="#" name="fontColorForm">Set font color:
<select name="fontSelectField"onChange="setFontColor()">
<option value="#000000">default</option>
<option value="#8B4513">brown</option>
<option value="#000000">black</option>
<option value="#006400">dark green</option>
<option value="LightGreen">light green</option>
<option value="LightBlue">light blue</option>
<option value="#F0E68C">light yellow</option>
<option value="#FFA500">orange</option>
<option value="#FF00FF">pink</option>
<option value="Gray">gray</option>
<option value="White">white</option>
</select>
</form>
</td>
</tr>
</table>

</body>
</html>


I may be missing a few brackets but dont worry they're there on the actual page. All the JS file setcolour.js does is gets the value of the option field and stores it in a cookie, where its actually used is in red

Thanks for any help you can give
Mandarin
07-09-2009, 04:55 PM
Links are styled separately from standard body text, so your JavaScript needs to style them separately as well. Try adding something like this to setcolors.js:

function setFontColor() {
var getColor = document.fontColorForm.fontSelectField.options[document.fontColorForm.fontSelectField.selectedIndex].value;
var div = document.getElementById( "mainBody" );
div.style.color = getColor;
var links = div.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].style.color = getColor;
}
set_cookie( "fontColor", getColor );
}

You'd also need to add something similar to your inline init() function after you get the cookie for fontColor. Note that this solution would style all text to the same color, so your links should have additional styles to distinguish them – like underlines.
revolver_ocelot
07-10-2009, 10:56 AM
Thanks Mandarin that worked perfectly, didn't have to change a thing.

All I did was added the code to both my setcolor.js file and my init function on the page, thanks again!