CSS background color changed by JS

Forum Moderators: not2easy

Message Too Old, No Replies

CSS background color changed by JS

jalarie

12:39 pm on Jun 20, 2005 (gmt 0)

I'm using CSS to set the properties on my "body" tag for background-image, background-color, and the text and links colors. It works well for my entire site except for one page where I wish to be able to change the background color using JavaScript. I killed the CSS background by putting 'style="background-image:url();"' in my "body" tag, but the JavaScript to change the background color no longer works when I include the CSS. Help?

Moby_Dim

1:24 pm on Jun 20, 2005 (gmt 0)

First make sure you use "backgroundImage" in javascript, not "background-image".

jalarie

1:39 pm on Jun 20, 2005 (gmt 0)

Actually, in JavaScript, it's "background='whatever.gif'" but that's not what I asked. I'm trying to change the background color, and it works perfectly unless I have the CSS in there.

Moby_Dim

3:09 pm on Jun 20, 2005 (gmt 0)

this background does not permit the background color property to be seen. It includes bgr color too, and even not being set this component does spoil your settings. "background" need to be removed.

Moby_Dim

3:10 pm on Jun 20, 2005 (gmt 0)

or simply set the bgr color in "background"

jalarie

3:21 pm on Jun 20, 2005 (gmt 0)

I need to set the background in the CSS file so that 131 other pages of my site all share that property. I wish to ditch it for this one page so that I may display the effect of changing the background color. The page worked beautifully until I tried to use the stored CSS file. Suddenly, the JavaScript to change the background color stopped working. I've posted this question on multiple lists, and received a few suggestions, but none of them work anywhere near as well as the original page.

Moby_Dim

3:34 pm on Jun 20, 2005 (gmt 0)

send me the code then. or publish it here. Or send the url. If it is not the top secret, of course ;)) " multiple lists, and received a few suggestions, but none of them work" - this's interesting. You may be need to announce a Prize :)))

rocknbil

3:50 pm on Jun 20, 2005 (gmt 0)

I killed the CSS background by putting 'style="background-image:url();"' in my "body" tag, but the JavaScript to change the background color no longer works when I include the CSS.

You have a Javascript that changes the background-color, correct?

Then you hard-coded (in effect) a background-image into the body tag, correct?

You can change background color all day long, and it won't show. The background image will override it (or layer on top of it, or whatever.)

If this doesn't lead you to a path of enlightenment, no one's going to be able to help you a lot until you post some code.

Moby_Dim

4:07 pm on Jun 20, 2005 (gmt 0)

And try to force yourself to split HTML and visual effects completely. All logical to HTML, all visual - to CSS. You'll see this is not only words but great sense ;).

jalarie

4:24 pm on Jun 20, 2005 (gmt 0)

Originally, the html looked like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US"> 
 <head> 
 <title>My Title</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 <link href="style1.css" rel="stylesheet" type="text/css" /> 
 </head> 
 <body background="jaa_bgnd.jpg" bgcolor="#ffffee" text="black" 
 link="blue" vlink="#800088" alink="red"> 
 This is page content. 
 </body>  
</html>

and the original CSS like this:


 p {  
  text-align: justify 
 }

I wanted to change the html to:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US"> 
 <head> 
 <title>My Title</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 <link href="style1.css" rel="stylesheet" type="text/css" /> 
 </head> 
 <body> 
 This is page content. 
 </body>  
</html>

and the CSS to this:


 body { 
  background-image: url(jaa_bgnd.jpg); 
  background-color: #ffffcc; 
  color: black; 
 } 
 a:link {color: blue; } 
 a:visited {color: #800088; } 
 a:hover {color: orange; } 
 a:active {color: red; } 
  
 p {  
  text-align: justify 
 }

I've finally decided that I need two different "body" references in the CSS file, so I changed all of the html files accordingly and made the CSS file like this:


 body.body1 { 
  background-image: url(jaa_bgnd.jpg); 
  background-color: #ffffcc; 
  color: black; 
 } 
 body.body2 { 
  color: black; 
 } 
 a:link {color: blue; } 
 a:visited {color: #800088; } 
 a:hover {color: orange; } 
 a:active {color: red; } 
  
 p {  
  text-align: justify 
 }

The site URL before changes is listed below, and the problem page is the "Tables > Browser Colors" page:

<Sorry, no personal URLs.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 6:52 pm (utc) on June 20, 2005]

Moby_Dim

4:34 pm on Jun 20, 2005 (gmt 0)

"browser colors" worked when I tried.

Remove the url (urls have to be sent by sticky, not be published)

jalarie

4:57 pm on Jun 20, 2005 (gmt 0)

> Mobey_Dim: "browser colors" worked when I tried.

That was a "before" version.

> Mobey_Dim: Remove the url (urls have to be sent by sticky, not be published)

I don't see an "edit" button. Can you tell me how? Thanks.

Ah! I see an "owner edit" button on THIS post, but not on the previous one. I still need help with that.