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.
..
