?
Solved

Simple javascript different color scrolling text

Posted on 2011-09-28
4
Medium Priority
?
197 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:Sheritlw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 20

Expert Comment

by:informaniac
ID: 36803702

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
 

Author Comment

by:Sheritlw
ID: 36812658
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36812757
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
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 2000 total points
ID: 36812760
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

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question