PDA

View Full Version : changing body bgcolor with JS....

Dr. Web
03-05-2002, 09:40 PM
ha! suckered you in with an easy question! :evilsnik:

okay, the questions are:

How do I change the bgcolor attribute of the body tag, lets say on click of a a href?

How do I change the background IMAGE src to something different onClick of, lets say a href?

So far I can change just about everything else onclick, without reloading the page (see www.noahgrey.com for the server side version of my quest). I am aware that for N4.7 users I will have to reload the page, but I am ok with that since I'll use server side code to ultimately pass different code to the browser based on type.

Also, does anyone know if Netscape6 will reflow a page?

The idea I have is to subtly change the color scheme (CSS and bg images) of the page over time, and to pass the current color scheme from page to page while the user is surfing through the site. I have most of it down, but as a nice touch I'd like to change the body background slightly with each color change as well.

I know I can put the whole page in a table and change the background of that, but some of my DHTML effects will not render in N4.7 if they are placed in tables. (dont ask me, just a know issue :D )

I also know that I could place the whole shea-bang inside a div and set the bg of that. If thats my only option, I can deal with that as well.
Jon Hanlon
03-06-2002, 12:13 AM
document.bgColor = "red"
document.body.background = "/images/cindy.jpg"


Netscape 6 can crudely reflow the page.
Dr. Web
03-06-2002, 12:41 AM
thanks Jon!

my Idea was to change the CSS.... bordercolors... links etc using a JS timeout method. No problem, but I also wanted to give a subtle hint of color to the background image as well. Of stumgling around the CSS sites, I found a rather crude idea.

I've placed a div with nothing in it, fullscreen at zindex=0, opacity=4. Then I just set the bgcolor with the style change. This will allow me for greater color combos, since I don't have to make tons of graphics.

Heres another question:

I am using a technique that cobol dino suggested (http://www.htmlforums.com/showthread.php?threadid=11355&highlight=noah+grey) to change the styles by reflowing instead of reloading the page. The main idea I'd like to accomplish is starting with black, and shade by shade over time, change the CSS of the page across the color spectrum.

His code is great for changing a few colors.... but Id like to change them shade by shade, with values in an array... and avoid the whole declaring a stlye for each color if possible. A reuseable function of sorts.

If your interested in a example effect, I have a crude... and I mean friday night, after 14 beers... crude example.

Any help is appreciated!
Dr. Web
03-06-2002, 01:38 AM
hmmmn, I must have something off. Basically I need to set bordercolor and backgroundcolor of a div with JS, but I must be missing it...?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
body {background-color:white;}
a:active {color: black; text-decoration: none;}
a:visited {color: black; text-decoration: none;}
a:hover {color: #cccccc; text-decoration: none;}
</style>
<script language=javascript>
var number=0;
var TimerNew = setTimeout('chgclass();', 1000);

function doAgain(){
var TimerNew = setTimeout('chgclass();', 1000);
}
function chgclass()
{
if (number==5){number=0;}
number=number+1;
if (number==1){base="#000000";}
if (number==2){base="red";}
if (number==3){base="green";}
if (number==4){base="yellow";}
document.bgcolor=base;
document.getElementById('myDiv').bgcolor=base;
doAgain();
}
</script>
</head>

<body>
<br><br>
<div id=myDiv style="background-color: none;"><a href="#">lksjdf lakjf lakfj alksjdf lakjf laksj flakj f</a>
lk;jf lkwjf lkfj lkjf lkjf <br>lksdj fhlkjh fdlakj flkasjd flkasj f</div>


</body>
</html>


So eventually I will replace the if's with an array containing hex codes.... and will cycle through them one every 20seconds or so.... setting div border colors, div bgcolors, and link hover colors. What do you think?
Dr. Web
03-06-2002, 01:50 AM
looks like my answer for bgcolor of a div is this:

document.getElementById('myDiv').style.background=base;

Thanks for your help Jon, and CobolDino.

now.... anyone know of a list of hex codes that order colors sequentially? Something that goes from dark red to light red to .... whatever is next, instead of organizing by numeric/ alphabetic.