...

View Full Version : Highlight background color for text when page loads



PatMon
01-08-2012, 03:49 AM
Hi,

As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off.

But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now.

I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa.


<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">

var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>

<body>
<div onclick="btn(this);">ONE </div>

<div onclick="btn(this);">TWO </div>

</body>
</html>

xelawho
01-08-2012, 05:16 AM
seems like a very complicated way of doing a very simple thing, but anyway...

can you give the divs IDs?



<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">

var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>

<body onload="btn(document.getElementById('one'))">
<div id="one" onclick="btn(this);">ONE </div>

<div id="two" onclick="btn(this);">TWO </div>

</body>
</html>

PatMon
01-08-2012, 05:26 AM
Yes I have IDs on the divs


<div id="one" onclick="btn(this);">ONE </div><div id="two" onclick="btn(this);">TWO </div>


If you know of a better way of doing this by all means please give me a better way.

Although it is a little more complicated than what I've explained. Images display when the text buttons are clicked on. Since there's JS involved in displaying the images when the text is clicked on, I decided to use JS to color the button background. But can't figure out a way to color the background when the page loads.

xelawho
01-08-2012, 05:48 AM
how about this:



<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">

function btn (thisdiv){
thatdiv=thisdiv=="one"?"two":"one";
document.getElementById(thisdiv).style.backgroundColor="#84DFC1"
document.getElementById(thatdiv).style.backgroundColor="#FFFFFF"
}
</script>
</head>
<body >
<div style="background-color:#84DFC1" id="one" onclick="btn(this.id);">ONE </div>
<div id="two" onclick="btn(this.id);">TWO </div>
</body>
</html>

PatMon
01-08-2012, 05:57 AM
I can't use onload in the body. I thought I typed that in the first post but must of accidentally deleted it. I wish I could use <body onload> then this would of been solved long ago. : (

xelawho
01-08-2012, 06:02 AM
have a look at my second suggestion, in the edited post above ^

PatMon
01-08-2012, 07:20 AM
It's good. Since you changed it a lot compared to the way it was before, I have to say it is better but it will actually be 4 buttons. I guess I can use id="two" for 3 buttons and id="one" for the onload button.

I just noticed I have a class for rollovers and for the background color and with your code the rollovers don't work.




<style type="text/css">
.tbtn {width:120px; height:50px; background-color:#333333}
.tbtn:hover {width:120px; height:50px; background-color:#ff0000}
</style>

<script language="javascript" type="text/javascript">
function btn (thisdiv){
if(thisdiv=="one"){
thatdiv="two"
} else if (thisdiv=="two"){
thatdiv="one"
}
document.getElementById(thisdiv).style.backgroundColor="#cae450"

}
</script>

<div class="tbtn" id="one" style="background-color:#ff0000" onclick="btn(this.id);">ONE </div>

<div class="tbtn" id="two" onclick="btn(this.id);">TWO </div>

xelawho
01-08-2012, 01:43 PM
it will actually be 4 buttons. I guess I can use id="two" for 3 buttons and id="one" for the onload button.

I just noticed I have a class for rollovers and for the background color and with your code the rollovers don't work.

slooooowly the information comes out.

so, one starts red, the other three start black, when you roll over them they turn red and when you click on one it turns green and the others are red?

PatMon
01-08-2012, 05:25 PM
Forget it! I figured it out. Changed the code once again. I can't stand JS.

yyyyyyyy

yyyyyyyy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum