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?
14  1982  Markus 6,050
Recognized Expert Expert
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 :)
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) -
-
<?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>
-
-
-
-
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: -
-
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;
-
}
-
acoder 16,027
Recognized Expert Moderator MVP
Try: - document.body.style.backgroundColor = code1;
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?
try: - document.body.style.color = code2;
acoder 16,027
Recognized Expert Moderator MVP
Since you're setting the P elements, find them within the page and change the colours, e.g. - var ps = document.getElementsByTagName("p");
-
for (i = 0; i < ps.length; i++) {
-
ps[i].style.color = code1;
-
}
try:
- 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
Since you're setting the P elements, find them within the page and change the colours, e.g.
- 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!
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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 work
when I add the scrolling text script. One script, the menu button script,
has an "Onload" command and the other one does not. From what I know, and
that's not much, I need to put both scripts in the "Onload" command. I just
don't know how to...
|
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" style="position:absolute;"></div>
<script src="staticlogo.js">
</script>
|
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 using the
setInterval function, like this:
setInterval(function () {imageFade()},10);
This works fine in Firefox, but in IE 7, the flash animations slow
down a lot, and the javascript fading/rotation slows down some.
|
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 I'm guessing its something to do with the "onload" command at the end of the code. The code works just fine if I paste it into the <head> tag of my web page adding the standard javascript open and close <script> tags, but as soon as I save it as...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
