3 Replies - 26897 Views - Last Post: 04 August 2008 - 11:39 PM

#1 Trake  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 115
  • Joined: 29-June 07

javascript changing div background-color

Posted 04 August 2008 - 07:55 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: javascript changing div background-color

#2 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1134
  • View blog
  • Posts: 7,094
  • Joined: 07-September 06

Re: javascript changing div background-color

Posted 04 August 2008 - 04:30 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 Trake  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 115
  • Joined: 29-June 07

Re: javascript changing div background-color

Posted 04 August 2008 - 09:46 PM

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
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1134
  • View blog
  • Posts: 7,094
  • Joined: 07-September 06

Re: javascript changing div background-color

Posted 04 August 2008 - 11:39 PM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1