<a href="https://bytes.com/topic/javascript/answers/737962-conflict-javascript-css">Conflict with Javascript and CSS

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

  
<?xml version="1.0" encoding="UTF-8"?>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/XHTML-Transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>

        <title>Rear Window-  </title>

        <link href="format7.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript">

<!-- Beginning of JavaScript  -->

<!--<![CDATA[
 
function changecol(code1) {
 
    document.bgColor=code1
 
    }
 
function changetxt(code2) {
 
    document.fgColor=code2
 
    }

// ]]> -->

<!-- - End of JavaScript - -->
 
</script>
 
</head>
 
<body>
 
         <h4> Choose Background Color: </h4>

            <form id="backcolor">

                <input type="button" name="Button1" value=" RED" onclick="changecol('red')" />

                <input type="button" name="Button2" value=" BLUE" onclick="changecol('skyblue')" />

                <input type="button" name="Button3" value=" YELLOW" onclick="changecol('yellow')" />

                <input type="button" name="Button4" value=" WHITE" onclick="changecol('white')" />

            </form>
 
            <h4> Choose Text Color: </h4>

            <form id="textcolor">

                <input type="button" name="Button1" value=" BLACK" onclick="changetxt('black')" />

                <input type="button" name="Button2" value=" GRAY" onclick="changetxt('gray')" />

                <input type="button" name="Button3" value=" YELLOW" onclick="changetxt('yellow')" />

                <input type="button" name="Button4" value=" WHITE" onclick="changetxt('white')" />

            </form>
 
        <div id="links"> 
 
            <ul >

                <li><a href="../hw8/moviesplash.htm">Movie Intro Page</a></li>

                <li><a href="../hw9/moviemedia.htm">Movie Clips</a></li>

                <li><a href="http://www.filmsite.org/rear.html"> Movie Info Site </a></li>

                <li><a href="moviecss.htm">Movie review</a></li>

                <li><a href="mailto:sks2802@email.vccs.edu"> Send E-Mail </a></li>

            </ul>

        </div>
 
        <div id="logo">        

                <img src="rearwindowlogo.gif" alt="my collage for the movie banner" />

        </div>
 
        <div id="cast">
 
        <h3>... CAST ... </h3>

            <ul>

                <li>James Stewart</li>

                <li>Grace Kelly</li>

                <li>Raymond Burr</li>

            </ul>

        </div>
 
          <h1> Rear Window  </h1>

            <h2>An Alfred Hitchcock Film ! </h2>
 
            <p>One of the best Alfred Hitchcock films, Rear Window was released in 1954 and is based on the Cornell Woolrich story,

            "It Had to Be Murder". This movie is an incredible example of suspense filmmaking, especially when considering the technical 

            limitations of it's single set. Only Alfred Hitchcock could have successfully pulled this off!</p>
 
            <p>The story centers around what happens when a magazine photographer (Stewart), having a broken leg, is confined to a wheelchair 

            in his Greenwich Village apartment. He has nothing to do but passively sit back and watch the mundane day-to-day 

            activities that take place in the backyards and windows of the apartment house behind his. Before long he witnesses

            the mysterious activities of a particular apartment neighbor (Burr) . He struggles, not only with his physical

            disability, but also with his inability to commit and reluctance to marry his fashion model fiancé ( Kelly).</p>

            <p>Expect to be treated to exactly what he see's and feels, as the suspense and terror mount. The camera angles

            force the audience to become immersed in the same human curiosity and voyeuristic experience that Stewart has!</p>        

            <p> Unfortunately REAR WINDOW received only four Academy Award nominations (but no Oscar's): Best Director,

            Best Screenplay (John Michael Hayes), Best Color Cinematography (Robert Burks), and Best Sound Recording.</p> 
 
    </body>       

</html>

Nov 19 '07 #3

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

  
body {

    /*background: #FFFFFF; */

    padding: 0.5em;

    font-family: Arial,Helvetica,sans-serif;

    /* color: #000099;  */

    text-align: center;

    }
 
h4 {

    float:left;

    margin: 0 10px 10px 10px;

    }
 
#backcolor ,#textcolor{

    float: left;

    margin: 0px 10px 10px 10px;

    border: 1px solid red;

    }
 
a:link { color: #CCCCCC; }

a:visited { color: #999999; }

a:hover { color: #666666; }

a:active { color: #666666; }
 
#links ul {

        clear:left;

        text-align: center;

        }
 
#links ul li{

        padding: 10px 15px 5px 15px;

          display: inline; 

        }
 
#logo {

    clear: left;

    margin: 3px 0px 0px 20px;

    float: left;

    top: 10px;

    height: 247px;  

    padding: 5px; 

    border: 5px solid red;

    } 
 
 #cast {

    border:0px solid black;     

    padding: 25px;    

    margin-left:250px;  

    color: #000099; 

    font: 20px/25px Verdana, Helvetica, sans-serif; 

    } 
 
    h1 { 

    font-family: "Times New Roman", serif; 

    font-size: 200%; 

    color: red;

    font-weight: 700;

    font-style: normal;

    text-decoration: none;  

    padding: 15px 10px 10px 30px;

    border: 0px solid green;

    }
 
h2 { 

    float:left;

    padding: 15px;

    margin:0 0 0 20px;

    }        

p { 

    padding: 5px;

    margin: 0px 30px 0 30px;     

    /*  border: 1px solid red;                  this causes small line running into logo- how do I fix this?  */

    color: #000099; 

    text-align: left;

    font-family: Arial, Helvetica, sans-serif; 

    }

Nov 19 '07 #4

acoder

16,027

Expert Mod 8TB

Try:

Expand|Select|Wrap|Line Numbers

document.body.style.backgroundColor = code1;

Nov 19 '07 #5

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

andho

try:

Expand|Select|Wrap|Line Numbers

document.body.style.color = code2;

Nov 20 '07 #7

acoder

16,027

Expert Mod 8TB

Since you're setting the P elements, find them within the page and change the colours, e.g.

Expand|Select|Wrap|Line Numbers

 var ps = document.getElementsByTagName("p");

for (i = 0; i < ps.length; i++) {

  ps[i].style.color = code1;

}

Nov 20 '07 #8

try:

Expand|Select|Wrap|Line Numbers

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

Since you're setting the P elements, find them within the page and change the colours, e.g.

Expand|Select|Wrap|Line Numbers

var ps = document.getElementsByTagName("p");

for (i = 0; i < ps.length; i++) {

ps[i].style.color = code1;

}

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

16,027

Expert Mod 8TB

In that case, change everything:

Expand|Select|Wrap|Line Numbers

 var elems = document.getElementsByTagName("*");

for (i = 0; i < elems.length; i++) {

  elems[i].style.color = code2;

}

Nov 20 '07 #11

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

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

<!-- Beginning of JavaScript  -->

<!--<![CDATA[
 
function changecol(code1) {
 
    document.body.style.backgroundColor = code1;

    }
 
function changetxt(code2) {      

    document.body.style.color = code2;

    }    
 
function changetxt(code2) {
 
      var ps = document.getElementsByTagName("p");
 
      for (i = 0; i < ps.length; i++) 
 
        ps[i].style.color = code2;
 
      }    
 
// ]]> -->

<!-- - End of JavaScript - -->

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

16,027

Expert Mod 8TB

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

In that case, change everything:

Expand|Select|Wrap|Line Numbers

var elems = document.getElementsByTagName("*");

for (i = 0; i < elems.length; i++) {

elems[i].style.color = code2;

}

Thanks Acoder!!!!! That did the trick. You all have my eternal thank you's for your help!

Nov 21 '07 #14

acoder

16,027

Expert Mod 8TB

Glad you got it working. Post again if you hit any more problems.

Nov 21 '07 #15

by: P Wolpert | last post by:

This is my first post. I hope I don't sound stupid. I have a script conflict when I put two scripts on one page. Both scripts will work if I use one at a time but the menu button script will not...

JavaScript conflict

by: loquini | last post by:

Hi, I'm using this piece of code, both scripts work fine separately but together only works the second one, How can I solve this conflict??? plss help me <body> <div id="watermarklogo"...

Flash, Javascript Time Conflict in Internet Explorer

by: mudgen | last post by:

I have a webpage that has two flash animations running. I also have a javascript script running that rotates 3 images and fades them in and out. To do the fading and rotating in javascript I am...

I tried to convert this Javascript to an external .js file, but it won't work...

by: hyperman7 | last post by:

I saved the code below to an external file which I called colorFader.js, and I'm calling it with: <script type="text/javascript" src="js/colorFader.js"></script> My path (above) is correct, so...

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...