By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,635 Members | 1,691 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,635 IT Pros & Developers. It's quick & easy.

Conflict with Javascript and CSS

Webwench
P: 10
I am trying to run a simple script- (I'm just learning javascrpt) that uses a set of buttons to change the background and foreground colors of a web page.
Some of the text on the page uses the css p {color: #0000FF;} When i try to change that text- it will not change- the text on the page that is not assigned color in the external style sheet - changes just fine. Is there a conflict or does the css load after the javascript and undo the change?
Nov 17 '07 #1
Share this Question
Share on Google+
14 Replies


Markus
Expert 5K+
P: 6,050
I am trying to run a simple script- (I'm just learning javascrpt) that uses a set of buttons to change the background and foreground colors of a web page.
Some of the text on the page uses the css p {color: #0000FF;} When i try to change that text- it will not change- the text on the page that is not assigned color in the external style sheet - changes just fine. Is there a conflict or does the css load after the javascript and undo the change?
Could you show us your code? We might have more insight into what you are doing to get the changes and what you're doing wrong.

Thanks :)
Nov 17 '07 #2

Webwench
P: 10
Ok I will try to load up the code again- wouldn't work yesterday

Here is the html and javascript: (I'll post CSS next reply)

Expand|Select|Wrap|Line Numbers
  1.  
  2. <?xml version="1.0" encoding="UTF-8"?>
  3.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  4.     "http://www.w3.org/TR/xhtml1/DTD/XHTML-Transitional.dtd">
  5.       <html xmlns="http://www.w3.org/1999/xhtml">
  6.  
  7.     <head>
  8.         <title>Rear Window-  </title>
  9.         <link href="format7.css" rel="stylesheet" type="text/css" /> 
  10.  
  11.  
  12. <script type="text/javascript">
  13. <!-- Beginning of JavaScript  -->
  14. <!--<![CDATA[
  15.  
  16. function changecol(code1) {
  17.  
  18.     document.bgColor=code1
  19.  
  20.     }
  21.  
  22. function changetxt(code2) {
  23.  
  24.     document.fgColor=code2
  25.  
  26.     }
  27. // ]]> -->
  28. <!-- - End of JavaScript - -->
  29.  
  30.  
  31.  
  32.  
  33. </script>
  34.  
  35.  
  36.  
  37.  
  38. </head>
  39.  
  40. <body>
  41.  
  42.  
  43.  
  44.  
  45.          <h4> Choose Background Color: </h4>
  46.             <form id="backcolor">
  47.                 <input type="button" name="Button1" value=" RED" onclick="changecol('red')" />
  48.                 <input type="button" name="Button2" value=" BLUE" onclick="changecol('skyblue')" />
  49.                 <input type="button" name="Button3" value=" YELLOW" onclick="changecol('yellow')" />
  50.                 <input type="button" name="Button4" value=" WHITE" onclick="changecol('white')" />
  51.             </form>
  52.  
  53.  
  54.             <h4> Choose Text Color: </h4>
  55.             <form id="textcolor">
  56.                 <input type="button" name="Button1" value=" BLACK" onclick="changetxt('black')" />
  57.                 <input type="button" name="Button2" value=" GRAY" onclick="changetxt('gray')" />
  58.                 <input type="button" name="Button3" value=" YELLOW" onclick="changetxt('yellow')" />
  59.                 <input type="button" name="Button4" value=" WHITE" onclick="changetxt('white')" />
  60.             </form>
  61.  
  62.  
  63.         <div id="links"> 
  64.  
  65.             <ul >
  66.                 <li><a href="../hw8/moviesplash.htm">Movie Intro Page</a></li>
  67.                 <li><a href="../hw9/moviemedia.htm">Movie Clips</a></li>
  68.                 <li><a href="http://www.filmsite.org/rear.html"> Movie Info Site </a></li>
  69.                 <li><a href="moviecss.htm">Movie review</a></li>
  70.                 <li><a href="mailto:sks2802@email.vccs.edu"> Send E-Mail </a></li>
  71.             </ul>
  72.         </div>
  73.  
  74.         <div id="logo">        
  75.                 <img src="rearwindowlogo.gif" alt="my collage for the movie banner" />
  76.         </div>
  77.  
  78.         <div id="cast">
  79.  
  80.         <h3>... CAST ... </h3>
  81.             <ul>
  82.                 <li>James Stewart</li>
  83.                 <li>Grace Kelly</li>
  84.                 <li>Raymond Burr</li>
  85.             </ul>
  86.         </div>
  87.  
  88.  
  89.  
  90.           <h1> Rear Window  </h1>
  91.             <h2>An Alfred Hitchcock Film ! </h2>
  92.  
  93.             <p>One of the best Alfred Hitchcock films, Rear Window was released in 1954 and is based on the Cornell Woolrich story,
  94.             "It Had to Be Murder". This movie is an incredible example of suspense filmmaking, especially when considering the technical 
  95.             limitations of it's single set. Only Alfred Hitchcock could have successfully pulled this off!</p>
  96.  
  97.             <p>The story centers around what happens when a magazine photographer (Stewart), having a broken leg, is confined to a wheelchair 
  98.             in his Greenwich Village apartment. He has nothing to do but passively sit back and watch the mundane day-to-day 
  99.             activities that take place in the backyards and windows of the apartment house behind his. Before long he witnesses
  100.             the mysterious activities of a particular apartment neighbor (Burr) . He struggles, not only with his physical
  101.             disability, but also with his inability to commit and reluctance to marry his fashion model fiancé ( Kelly).</p>
  102.             <p>Expect to be treated to exactly what he see's and feels, as the suspense and terror mount. The camera angles
  103.             force the audience to become immersed in the same human curiosity and voyeuristic experience that Stewart has!</p>        
  104.             <p> Unfortunately REAR WINDOW received only four Academy Award nominations (but no Oscar's): Best Director,
  105.             Best Screenplay (John Michael Hayes), Best Color Cinematography (Robert Burks), and Best Sound Recording.</p> 
  106.  
  107.  
  108.     </body>       
  109. </html>
  110.  
  111.  
  112.  
  113.  
Nov 19 '07 #3

Webwench
P: 10
Oh- also wanted to mention I'm testing this in firefox but it needs to work in IE too.
Problem is- the blue text won't change color no matter what I have tried. (and it is supposed to start out blue)

Here's the CSS page:

Expand|Select|Wrap|Line Numbers
  1.  
  2. body {
  3.     /*background: #FFFFFF; */
  4.     padding: 0.5em;
  5.     font-family: Arial,Helvetica,sans-serif;
  6.     /* color: #000099;  */
  7.     text-align: center;
  8.     }
  9.  
  10. h4 {
  11.     float:left;
  12.     margin: 0 10px 10px 10px;
  13.     }
  14.  
  15. #backcolor ,#textcolor{
  16.     float: left;
  17.     margin: 0px 10px 10px 10px;
  18.     border: 1px solid red;
  19.     }
  20.  
  21.  
  22.  
  23. a:link { color: #CCCCCC; }
  24. a:visited { color: #999999; }
  25. a:hover { color: #666666; }
  26. a:active { color: #666666; }
  27.  
  28. #links ul {
  29.         clear:left;
  30.         text-align: center;
  31.         }
  32.  
  33. #links ul li{
  34.         padding: 10px 15px 5px 15px;
  35.           display: inline; 
  36.         }
  37.  
  38.  
  39. #logo {
  40.     clear: left;
  41.     margin: 3px 0px 0px 20px;
  42.     float: left;
  43.     top: 10px;
  44.     height: 247px;  
  45.     padding: 5px; 
  46.     border: 5px solid red;
  47.     } 
  48.  
  49.  #cast {
  50.     border:0px solid black;     
  51.     padding: 25px;    
  52.     margin-left:250px;  
  53.     color: #000099; 
  54.     font: 20px/25px Verdana, Helvetica, sans-serif; 
  55.     } 
  56.  
  57.     h1 { 
  58.     font-family: "Times New Roman", serif; 
  59.     font-size: 200%; 
  60.     color: red;
  61.     font-weight: 700;
  62.     font-style: normal;
  63.     text-decoration: none;  
  64.     padding: 15px 10px 10px 30px;
  65.     border: 0px solid green;
  66.     }
  67.  
  68.  
  69.  
  70. h2 { 
  71.     float:left;
  72.     padding: 15px;
  73.     margin:0 0 0 20px;
  74.     }        
  75. p { 
  76.     padding: 5px;
  77.     margin: 0px 30px 0 30px;     
  78.     /*  border: 1px solid red;                  this causes small line running into logo- how do I fix this?  */
  79.     color: #000099; 
  80.     text-align: left;
  81.     font-family: Arial, Helvetica, sans-serif; 
  82.     } 
  83.  
Nov 19 '07 #4

acoder
Expert Mod 15k+
P: 16,027
Try:
Expand|Select|Wrap|Line Numbers
  1. document.body.style.backgroundColor = code1;
Nov 19 '07 #5

Webwench
P: 10
Thanks -I tried that - it works for the background color- but that was already working ok.

The text color change (foreground color) is the problem:
It is the blue text- that is originally set to blue in the css {color: #0000FF} if I take it out- then everything works, but with it in only the black text in the document changes color- not the blue text. Somehow the color selector overides or prvents the javascript from working on that text.

any ideas?
Nov 19 '07 #6

P: 34
try:

Expand|Select|Wrap|Line Numbers
  1. document.body.style.color = code2;
Nov 20 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Since you're setting the P elements, find them within the page and change the colours, e.g.
Expand|Select|Wrap|Line Numbers
  1. var ps = document.getElementsByTagName("p");
  2. for (i = 0; i < ps.length; i++) {
  3.   ps[i].style.color = code1;
  4. }
Nov 20 '07 #8

Webwench
P: 10
try:

Expand|Select|Wrap|Line Numbers
  1. document.body.style.color = code2;

I tried this - but it did not change the blue text- only the black text- that was already working. Thanks
Nov 20 '07 #9

Webwench
P: 10
Since you're setting the P elements, find them within the page and change the colours, e.g.
Expand|Select|Wrap|Line Numbers
  1. var ps = document.getElementsByTagName("p");
  2. for (i = 0; i < ps.length; i++) {
  3.   ps[i].style.color = code1;
  4. }

I tried this- it changes the blue text! But not the rest of the text- I may have to try using both of the last two suggestions together and see what happens- I'll let you know!
Nov 20 '07 #10

acoder
Expert Mod 15k+
P: 16,027
In that case, change everything:
Expand|Select|Wrap|Line Numbers
  1. var elems = document.getElementsByTagName("*");
  2. for (i = 0; i < elems.length; i++) {
  3.   elems[i].style.color = code2;
  4. }
Nov 20 '07 #11

Webwench
P: 10
Well here's what I've got in there now:


Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!-- Beginning of JavaScript  -->
  3. <!--<![CDATA[
  4.  
  5. function changecol(code1) {
  6.  
  7.  
  8.     document.body.style.backgroundColor = code1;
  9.     }
  10.  
  11. function changetxt(code2) {      
  12.     document.body.style.color = code2;
  13.     }    
  14.  
  15. function changetxt(code2) {
  16.  
  17.       var ps = document.getElementsByTagName("p");
  18.  
  19.       for (i = 0; i < ps.length; i++) 
  20.  
  21.         ps[i].style.color = code2;
  22.  
  23.       }    
  24.  
  25.  
  26.  
  27. // ]]> -->
  28. <!-- - End of JavaScript - -->
  29.  
  30.  
  31.  
It seems like the first color change function is not working so the black text does not change- but the blue text does change.
If I reverse the order of the last two functions- the opposite happens.
Any ideas?
Nov 20 '07 #12

acoder
Expert Mod 15k+
P: 16,027
You can't have two functions with the same name, so either combine them into one or use my suggestion from the previous post.
Nov 20 '07 #13

Webwench
P: 10
In that case, change everything:
Expand|Select|Wrap|Line Numbers
  1. var elems = document.getElementsByTagName("*");
  2. for (i = 0; i < elems.length; i++) {
  3.   elems[i].style.color = code2;
  4. }
Thanks Acoder!!!!! That did the trick. You all have my eternal thank you's for your help!
Nov 21 '07 #14

acoder
Expert Mod 15k+
P: 16,027
Glad you got it working. Post again if you hit any more problems.
Nov 21 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.