Modify Script to change background color based on Array Index

Discussion in 'Javascript' started by DavidB, Aug 3, 2006.

  1. DavidB

    DavidB Guest

    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.
    ..
    DavidB, Aug 3, 2006
    #1
    1. Advertising

  2. DavidB

    bobzimuta Guest

    DavidB wrote:
    > 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.


    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;
    bobzimuta, Aug 3, 2006
    #2
    1. Advertising

  3. DavidB

    DavidB Guest

    "bobzimuta" <> wrote in
    news::

    > DavidB wrote:
    >> 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.

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


    Just exactly what I wanted. Thanks for the help!

    DB
    DavidB, Aug 4, 2006
    #3
  4. DavidB

    DavidB Guest

    New Problem following changes--Modify Script to change background color based on Array Index

    DavidB <> wrote in
    news:Xns981486161C803pitcarnhotmailcom@64.59.135.159:

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


    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
    DavidB, Aug 6, 2006
    #4
  5. Re: New Problem following changes--Modify Script to change background color based on Array Index

    DavidB wrote:
    <snip>
    >> var msgIX = 0;
    >> var msgs = [
    >> " Notices and Messages", \* RED *\

    <snip>
    >> " Notices and Messages",];

    ^
    <snip>
    > I have made the changes as suggested.


    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


    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.
    Richard Cornford, Aug 7, 2006
    #5
  6. DavidB

    DavidB Guest

    Re: New Problem following changes--Modify Script to change background color based on Array Index

    "Richard Cornford" <> wrote in news:eb6psi$kqk$1
    $:

    > DavidB wrote:
    > <snip>
    >>> var msgIX = 0;
    >>> var msgs = [
    >>> " Notices and Messages", \* RED *\

    > <snip>
    >>> " Notices and Messages",];

    > ^
    > <snip>
    >> I have made the changes as suggested.

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

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


    Thanks Richard. The extra comma was the culprit.

    DB
    DavidB, Aug 9, 2006
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. fig000
    Replies:
    0
    Views:
    4,545
    fig000
    Sep 6, 2004
  2. Kamaljeet Saini
    Replies:
    0
    Views:
    411
    Kamaljeet Saini
    Feb 13, 2009
  3. Konrad Den Ende

    How to modify the color according to background?

    Konrad Den Ende, Jun 22, 2004, in forum: Javascript
    Replies:
    11
    Views:
    251
    Richard Cornford
    Jun 29, 2004
  4. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    280
    Tomasz Chmielewski
    Mar 4, 2008
  5. Replies:
    1
    Views:
    267
    marss
    Feb 14, 2007
Loading...

Share This Page