[Trake]

Hi all,

I am trying to change the background color of a div to show which page page is currently being used and I can't get it to work, I've Googled loads of stuff but everything I've tried doesn't work so here it is:

<script type="text/javascript" language="javascript">	
//get the page URL and take the substring after the ?
qsFull = window.location.search.substring(1);
//split the substring based on the location of the =
qsValue = qsFull.split("=");
//check on the value of querystring parameter and write the appropriate headline
if(qsValue[1] == "no")
{
	document.writeln('<h1>Div1<\/h1>');
	document.getElementById('div1').style.backgroundColor = '#D4DBE7';
}
else
{
	document.writeln('<h1>Div2<\/h1>');
	document.getElementById('div2').style.backgroundColor = '#D4DBE7';
}
</script>

<style>
.class1 {
	display: block;
	border: 1px solid #D4DBE7;
	width: 100px;
	height: 25px;
	margin: 5px 0;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
}
#div1 {
	float: left;
	background-color: #FFF;
}
#div2 {
	float: right;
	background-color: #FFF;
}

</style>

<div style="width: 240px; height: 25px;">
<label>Choose Online or Offline</label>
<a href="/EN/test/test.asp?offline=no" id="div1" class="class1">Online</a>
<a href="/EN/test/test.asp?offline=yes" id="div2" class="class1">Offline</a>
</div>
<div style="clear: both; height: 0;"></div>

Thanks in advance for any help

Ian

[BetaWar]

you could easily do something like so:

<script>
function toBG(obj, color){
  obj.style.backgroundColor = color;
}
</script>

<style>
.object{
  background: #333;
  width: 200px;
  height: 200px;
}
</style>

<div class="object" onmouseover="toBG(this, '#ffffff')" onmouseout="toBG(this, '#333333')">Content and stuff here</div>

But it looks like you are jsut working with links so you could do this:

<style>
a#div1{
  background: #f00;
}
a#div1:hover{
  background: #eee;
}
</style>

<a href="" id="div1">TEST</a>

Though the second example uses pure CSS it doesn't work in older browsers (like IE 6) unless you are applying it to links and links alone.

Hope tha thelps.

[Trake]

Thanks BetaWar but I think I wasn't specific enough, what I want to do is detect which page I'm on (which works fine) and then based on the result change the background color of a div. While :hover or :active work they only work while the link is hovered or clicked, I want the div to stay that color until the user moves to another page.

Regards

Ian

[BetaWar]

Oh okay, sorry my misunderstanding. In that case you have the code set up correctly but the issue is that it is running before the rest of the page is loaded, so you could put it into a function that you call onload or you could more that particular portion of thejavascript to the very bottom of the page (beofre the </body></html> tags). Sadly HTML loads linearly, from top to bottom then the images are loaded as fast as they can be. (I have tested it and it is working in IE 6)

Hope tha thelps.