Simple javascript different color scrolling text

I found a script on the web that simply scrolls text.  
Being new to javascript, I haven't been able to figure out how I can change the font and/or background color for each line.

ie.
Line 1 - font color(Red)  "Once a page has loaded the page will load faster next time.",
Line 2 = font color (blue) "The text you are looking at has changed.",
etc.

How do I adjust this script to change colors?

Thanks

<div style="margin:20% 5% 20% 5%; background-color:#fcffce; border:solid 2px Purple;">
<h1 align="center" id="scrollme">Please wait while the page loads your information.</h1>
</div>




<script type="text/javascript"> 

  var msgIX = 0
    var msgs = new Array(
 "Once a page has loaded the page will load faster next time.",
 "The text you are looking at has changed.",
 "This is a handy way of sending messages to your users."
)

    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>

Open in new window

SheritlwAsked:
Who is Participating?
 
Kiran SonawaneConnect With a Mentor Project LeadCommented:
Here is complete html page to test this

<html>
<head>
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>

var msgIX = 0
    var msgs = new Array(
 "<span style='color:red'>Once a page has loaded the page will load faster next time.<span>",
 "<span style='color:blue'>The text you are looking at has changed.<span>",
 "This is a handy way of sending messages to your users."
)

    function scrollMessages(milliseconds) {
       window.setInterval("displayMessage()", milliseconds);
    }
    function displayMessage() {
       if (document.getElementById != null) {
          var heading = document.getElementById("scrollme");
          heading.innerHTML = msgs[msgIX];
         
       } else {
          if (navigator.appName == "Microsoft Internet Explorer") {
             var heading = document.all.item("scrollme");
             heading.innerHTML = msgs[msgIX];
             
            
          }
       }
       ++msgIX
       msgIX %= msgs.length
    }

$(document).ready(function(){
 scrollMessages(1000);
});
</script>
</head>
<body>
<div style="margin:20% 5% 20% 5%; background-color:#fcffce; border:solid 2px Purple;">
<h1 align="center" id="scrollme">Please wait while the page loads your information.</h1>
</div>

</body>
</html>

Open in new window

0
 
informaniacCommented:

var msgs = new Array(
 "<div style='background-color:red;'>Once a page has loaded the page will load faster next time.</div>",
 ""<div style='background-color:green;'>The text you are looking at has changed.</div>",
 ""<div style='background-color:yellow;'>This is a handy way of sending messages to your users.</div>"
)

Open in new window

0
 
SheritlwAuthor Commented:
Hi informaniac,

I tried your example, but I get errors.  I believe the errors have to do with the quotes.
Am I missing something?

Thanks
0
 
Kiran SonawaneProject LeadCommented:
Check below tested code.

<div style="margin:20% 5% 20% 5%; background-color:#fcffce; border:solid 2px Purple;">
<h1 align="center" id="scrollme">Please wait while the page loads your information.</h1>
</div>




<script type="text/javascript"> 

  var msgIX = 0
    var msgs = new Array(
 "<span style='color:red'>Once a page has loaded the page will load faster next time.<span>",
 "<span style='color:blue'>The text you are looking at has changed.<span>",
 "This is a handy way of sending messages to your users."
)
scrollMessages(1000);
    function scrollMessages(milliseconds) {
       window.setInterval("displayMessage()", milliseconds);
    }
    function displayMessage() {
       if (document.getElementById != null) {
          var heading = document.getElementById("scrollme");
          heading.innerHTML = msgs[msgIX];
         
       } else {
          if (navigator.appName == "Microsoft Internet Explorer") {
             var heading = document.all.item("scrollme");
             heading.innerHTML = msgs[msgIX];
             
            
          }
       }
       ++msgIX
       msgIX %= msgs.length
    }
</script>

Open in new window

0
All Courses

From novice to tech pro — start learning today.