Modify Script to change background color based on Array Index

D

DavidB

Greetings

I don't know if this is possible, but this group should be able to tell me.

I have a webpage with a changing message board (I understand the problems
with having changing text, but this was a nice victory over the demand for
a scrolling message). The messages are updates on community information.
What I would like to be able to do is have the background color (and
possibly font color) change based on the Array Index. For example, if the
pool is going to be closed for chemical treatment, I would like the display
to have a red background. If there is going to be street cleaning
requiring the removal of vehicles, I would like a yellow background. For
all other messages, a default blue background.

The code I am working with and abbreviated CSS & HTML are:

<script type="text/javascript">
var msgIX = 0;
var msgs = [
" Notices and Messages", \* RED *\
"Chemical Treatment August 21", \* RED *\
"Pool Closed", \* RED *\
" Notices and Messages", \* YELLOW *\
"Street Cleaning August 12 ", \* YELLOW *\
"Remove your Vehicles from the street ", \* YELLOW *\
" Notices and Messages", \* BLUE here down *\
"Family Movie Night is ",
"August 25 ",
" Notices and Messages",
"Pub Night and Quiz is ",
"October 14 or 21 (TBD) ",
" Notices and Messages",
"Pot Luck Dinner is ",
"November--Exact Date TBD ",
" Notices and Messages",];
function scrollMessages(milliseconds) {
window.setInterval ("displayMessage()", milliseconds);
}
function displayMessage() {
if (document.getElementById != null) {
var heading = document.getElementById("scrollme");
heading.firstChild.nodeValue = msgs[msgIX];
}else{
if(navigator.appName == "Microsoft Internet Explorer") {
var heading = document.all.item("scrollme");
heading.innerText = msgs[msgIX];
}
}
++msgIX;
msgIX %= msgs.length;
}
</script>
<style>
#noticebox {
padding:"2px";
border-width:"2px";
border-style:inset;
border-color:blue;
width:174px;
height:"42px";
z-index:30;
text-align:-moz-center;
text-align:center;
background-color:"#ceg";
left:0;
}
</style>


<body onload="scrollMessge(2000)">

<div id="noticebox">
<p class="mainbold" id="scrollme"> Notices and Messages</p>
</div>


Any assistance would appreciated--even if it entails telling me it cant be
done.

Thanks
DB.
..
 
B

bobzimuta

DavidB said:
I have a webpage with a changing message board (I understand the problems
with having changing text, but this was a nice victory over the demand for
a scrolling message). The messages are updates on community information.
What I would like to be able to do is have the background color (and
possibly font color) change based on the Array Index. For example, if the
pool is going to be closed for chemical treatment, I would like the display
to have a red background. If there is going to be street cleaning
requiring the removal of vehicles, I would like a yellow background. For
all other messages, a default blue background.
Click to expand...

With a slight mofication to the messages

var msgs = [
[ " Notices and Messages", "red" ], \* RED *\
....
[ " Notices and Messages", "yellow" ], \* YELLOW *\
....
];

it's easy enough in your function to get the message and color:
var msg = msgs[ msgIndex ][ 0 ];
var color = msgs[ msgIndex ][ 1 ];

to style an element's background color:
document.getElementById( '...' ).style.backgroundColor = color;

or body:
document.body.style.backgroundColor = color;
 
D

DavidB

DavidB said:
I have a webpage with a changing message board (I understand the
problems with having changing text, but this was a nice victory over
the demand for a scrolling message). The messages are updates on
community information. What I would like to be able to do is have the
background color (and possibly font color) change based on the Array
Index. For example, if the pool is going to be closed for chemical
treatment, I would like the display to have a red background. If
there is going to be street cleaning requiring the removal of
vehicles, I would like a yellow background. For all other messages,
a default blue background.
Click to expand...

With a slight mofication to the messages

var msgs = [
[ " Notices and Messages", "red" ], \* RED *\
...
[ " Notices and Messages", "yellow" ], \* YELLOW *\
...
];

it's easy enough in your function to get the message and color:
var msg = msgs[ msgIndex ][ 0 ];
var color = msgs[ msgIndex ][ 1 ];

to style an element's background color:
document.getElementById( '...' ).style.backgroundColor = color;

or body:
document.body.style.backgroundColor = color;
Click to expand...

Just exactly what I wanted. Thanks for the help!

DB
 
D

DavidB

Greetings

I don't know if this is possible, but this group should be able to
tell me.

I have a webpage with a changing message board (I understand the
problems with having changing text, but this was a nice victory over
the demand for a scrolling message). The messages are updates on
community information. What I would like to be able to do is have the
background color (and possibly font color) change based on the Array
Index. For example, if the pool is going to be closed for chemical
treatment, I would like the display to have a red background. If
there is going to be street cleaning requiring the removal of
vehicles, I would like a yellow background. For all other messages, a
default blue background.

The code I am working with and abbreviated CSS & HTML are:

<script type="text/javascript">
var msgIX = 0;
var msgs = [
" Notices and Messages", \* RED *\
"Chemical Treatment August 21", \* RED *\
"Pool Closed", \* RED *\
" Notices and Messages", \* YELLOW *\
"Street Cleaning August 12 ", \* YELLOW *\
"Remove your Vehicles from the street ", \* YELLOW *\
" Notices and Messages", \* BLUE here down *\
"Family Movie Night is ",
"August 25 ",
" Notices and Messages",
"Pub Night and Quiz is ",
"October 14 or 21 (TBD) ",
" Notices and Messages",
"Pot Luck Dinner is ",
"November--Exact Date TBD ",
" Notices and Messages",];
function scrollMessages(milliseconds) {
window.setInterval ("displayMessage()", milliseconds);
}
function displayMessage() {
if (document.getElementById != null) {
var heading = document.getElementById("scrollme");
heading.firstChild.nodeValue = msgs[msgIX];
}else{
if(navigator.appName == "Microsoft Internet Explorer") {
var heading = document.all.item("scrollme");
heading.innerText = msgs[msgIX];
}
}
++msgIX;
msgIX %= msgs.length;
}
</script>
<style>
#noticebox {
padding:"2px";
border-width:"2px";
border-style:inset;
border-color:blue;
width:174px;
height:"42px";
z-index:30;
text-align:-moz-center;
text-align:center;
background-color:"#ceg";
left:0;
}
</style>


<body onload="scrollMessge(2000)">

<div id="noticebox">
<p class="mainbold" id="scrollme"> Notices and Messages</p>
</div>


Any assistance would appreciated--even if it entails telling me it
cant be done.

Thanks
DB.
.
Click to expand...

I have made the changes as suggested. In Opera and Firefox the messages
cycle through correctly. In IE, the messages run through once and throw
an error:

Line 29
Char 5
Error 'msgs[...].0' is null or not an object
Code 0

Any suggestions?

DB
 
R

Richard Cornford

DavidB wrote:
var msgIX = 0;
var msgs = [
" Notices and Messages", \* RED *\
Click to expand...
" Notices and Messages",];
Click to expand...
Click to expand...
^
I have made the changes as suggested.
Click to expand...

If you think about it you should see that responding by saying that the
code resulting form your changes to your original does not work, without
posting that code so people can see what you have done, is likely to be
counterproductive.
In Opera and Firefox the messages cycle through correctly.
In IE, the messages run through once and throw an error:

Line 29
Char 5
Error 'msgs[...].0' is null or not an object
Code 0
Click to expand...

If a comma appears as the last character in an Array literal IE's
JScript erroneously uses it to imply a final undefined element in the
array, which makes the Array one longer than it would be in a correct
ECMAScript implementation, and when you iterate over the elements the
final one is undefined and will error if treated as an object.

Richard.
 
D

DavidB

DavidB wrote:
var msgIX = 0;
var msgs = [
" Notices and Messages", \* RED *\
Click to expand...
" Notices and Messages",];
Click to expand...
Click to expand...
^
I have made the changes as suggested.
Click to expand...

If you think about it you should see that responding by saying that the
code resulting form your changes to your original does not work, without
posting that code so people can see what you have done, is likely to be
counterproductive.
In Opera and Firefox the messages cycle through correctly.
In IE, the messages run through once and throw an error:

Line 29
Char 5
Error 'msgs[...].0' is null or not an object
Code 0
Click to expand...

If a comma appears as the last character in an Array literal IE's
JScript erroneously uses it to imply a final undefined element in the
array, which makes the Array one longer than it would be in a correct
ECMAScript implementation, and when you iterate over the elements the
final one is undefined and will error if treated as an object.

Richard.
Click to expand...

Thanks Richard. The extra comma was the culprit.

DB
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Script Works in IE not FF--What am I missing? 9
Working on mobile css menu with plenty of frustration! 2
I am trying to detect Which image id="" was clicked ? 22
A simple javascript-based colour picker 4
Change table color every day, not happy with Word 7
Automatically rewriting the contents of an element 0
comp.lang.c Answers to Frequently Asked Questions (FAQ List) 15
comp.lang.c Answers to Frequently Asked Questions (FAQ List) 1

Members online

Total: 74 (members: 2, guests: 72)
Robots: 333

Forum statistics

Threads
473,982
Messages
2,570,189
Members
46,735
Latest member
HikmatRamazanov

Latest Threads

Top