...

View Full Version : background color



Prashank
12-27-2011, 01:05 PM
Hi! all

I have a js which change the background color onclick event. This is the code


function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert.

Thanks for your help.

sunfighter
12-27-2011, 04:29 PM
Add this to the js:


function timeMsg()
{
var t=setTimeout("changeBackground2()",3000);
}
and have the onclick="timeMsg()"

Prashank
12-27-2011, 04:41 PM
Thanks for your reply but i want to change the background color slowly in the 3 sec time span for example visit http://moozedesign.com/ and click a link. I know they are using jquery but is there any solution in js?

xelawho
12-27-2011, 04:59 PM
can be done simply enough with css3 (with the usual warnings about IE, which the page you link to refuses to work with at all[!]):

http://www.w3schools.com/css3/css3_transitions.asp

Prashank
12-27-2011, 05:17 PM
thanks,

but i can change the color of that element where css is applied but is there any way to change the color of body?

xelawho
12-27-2011, 06:27 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body
{
background:red;
transition-property: background-color;
transition-duration: 2s;
-moz-transition-property: background-color; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: background-color; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: background-color; /* Opera */
-o-transition-duration: 2s; /* Opera */
}

</style>
</head>
<body>
<input type="button" onclick="changeBg()" value="change">

<script>
function changeBg(){
document.body.style.backgroundColor = 'blue';
}
</script>

</body>

</html>

Prashank
12-28-2011, 10:02 AM
Thanks for your help............:)
I am working on it and will see what i can do with it.

Thanks again.

Old Pedant
12-28-2011, 11:26 PM
This code should work in all browsers back as far as MSIE 5.


<html>
<head>
<script type="text/javascript">

function Fademe( obj, start, finish )
{
this.object = obj;
this.first = start;
this.last = finish;
this.r = ( (finish & 0xff0000) - (start & 0xff0000) ) / 300;
this.g = ( (finish & 0x00ff00) - (start & 0x00ff00) ) / 300;
this.b = ( (finish & 0x0000ff) - (start & 0x0000ff) ) / 300;
}

var changeCount;
var timer;
var fadethem = [];

function startChange()
{
fadethem = [
new Fademe( document.body, 0x333333, 0xC6DB2B ),
new Fademe( document.getElementById("logo"), 0x999999, 0x2299EE ),
new Fademe( document.getElementById("ahead"), 0x0000FF, 0xFF0000 )
];
changeCount = 0;
timer = setInterval( change, 10 );
}

function change( )
{
++changeCount;
if ( changeCount > 300 )
{
clearInterval(timer);
return;
}
for ( var f = 0; f < fadethem.length; ++f )
{
var me = fadethem[f];
var red = Math.floor( changeCount * me.r ) & 0xff0000;
var green = Math.floor( changeCount * me.g ) & 0x00ff00;
var blue = Math.floor( changeCount * me.b ) & 0x0000ff;
var color = 0x1000000 + me.first + red + green + blue;
color = color.toString(16).substring(1);
me.object.style.backgroundColor = "#" + color;
// uncomment next line to see how it works
// if ( f != 0 ) me.object.innerHTML = "#" + color;
}
}
</script>
</head>
<body style="background-color: #333333;">
<h1 id="logo" style="background-color: #999999;">THIS IS THE LOGO<h1>
<h2 id="ahead" style="background-color: #0000FF;">This is element 'ahead'</h2>
<hr/>
<input type="button" value="try it" onclick="startChange()"/>
</body>
</html>

Old Pedant
12-28-2011, 11:27 PM
It's not perfect, because of rounding errors. For example, the final color for "ahead" there comes out as #FF0100 instead of #FF0000, but it's so close the human eye won't see it.

Prashank
12-29-2011, 07:43 AM
Thank you very very much everyone for your superb help.
I am very delightful.......................:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum