Programming Help

Web Development



What's Here?

  • Members: 109,554
  • Replies: 414,456
  • Topics: 63,026
  • Snippets: 2,288
  • Tutorials: 611
  • Total Online: 1,338
  • Members: 59
  • Guests: 1,279

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 109,554 Programmers for FREE! Ask your question and get quick answers from experts. There are 1,338 online right now! We've got more than 500 tutorials and 2,000 snippets. Join and find out why Dream.In.Code is the #1 programming help community on the internet! Registration is fast and FREE... Join Now!



javascript changing div background-color

 
 Reply to this topicStart new topic

javascript changing div background-color
Trake
post 4 Aug, 2008 - 07:55 AM
Post #1


D.I.C Head

**
Joined: 29 Jun, 2007
Posts: 52


My Contributions
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:

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


HTML
<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
User is offlineProfile CardPM

Go to the top of the page


BetaWar
post 4 Aug, 2008 - 04:30 PM
Post #2


#include <soul.h>

Group Icon
Joined: 7 Sep, 2006
Posts: 1,266



Thanked 38 times

Dream Kudos: 775
My Contributions
you could easily do something like so:

CODE

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

CODE
<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.
User is offlineProfile CardPM

Go to the top of the page

Trake
post 4 Aug, 2008 - 09:46 PM
Post #3


D.I.C Head

**
Joined: 29 Jun, 2007
Posts: 52


My Contributions
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
User is offlineProfile CardPM

Go to the top of the page

BetaWar
post 4 Aug, 2008 - 11:39 PM
Post #4


#include <soul.h>

Group Icon
Joined: 7 Sep, 2006
Posts: 1,266



Thanked 38 times

Dream Kudos: 775
My Contributions
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.
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 9/7/08 10:56PM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month