Sheritlw
asked on
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
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>
ASKER
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
I tried your example, but I get errors. I believe the errors have to do with the quotes.
Am I missing something?
Thanks
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window