Display scrolling message - doesn't work
Question
I'm beginner at JavaScript, and try to do easy core examples accordings this Workshop: Displaying a Scrolling Message .
But this variant scroll message doesn't work. And I can't understand why this happen. My web browser Google Chrome , encoding ANSI .
Code:
<html>
<head><title>Scrolling Message Example</title>
<script>
msg = "This is an example of a scrolling message. Isn't it exciting?";
msg = "... ..." + msg;
pos = 0;
function ScrollMessage() {
window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("ScrollMessage()", 200);
}
ScrollMessage();
</script>
</head>
<body>
<h1>Scrolling Message Example</h1>
Look at the status line at the bottom of this page. (Don't
watch it too long, as it may be hypnotic.)
</body>
</html>
Question:
- How do solve this trouble?
- Which other variants better to use for this aim?
3 answers
solution1
1 2013-04-05 14:03:20
See this post about JavaScript window.status
Aparently window.status has been disabled by default in most browsers for security reasons.
I assume the exercise is about the scrolling effect, not about the status bar.
If you replace this
window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);
with
console.log(msg.substring(pos, msg.length) + msg.substring(0, pos));
You will see in your console that the function that is creating the scroll effect itself is working just fine.
If you want to display the scrolling message, just create a <div> in your page where you want to display the message and update the content of the div each time the scroll function is called.
I modified your example:
<html>
<head><title>Scrolling Message Example</title>
<script>
var msg = "This is an example of a scrolling message. Isn't it exciting?";
msg = "... ..." + msg;
var pos = 0;
function ScrollMessage() {
document.getElementById("scrollMsgContainer").innerHTML = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout(ScrollMessage, 200);
}
</script>
</head>
<body>
<h1>Scrolling Message Example</h1>
Look at the status line at the bottom of this page. (Don't
watch it too long, as it may be hypnotic.)
<div id="scrollMsgContainer" style="position: fixed; bottom: 0; width: 100%; background-color: #DDDDDD"> </div>
</body>
<script>
ScrollMessage();
</script>
</html>
solution2
0 2013-04-05 14:18:14
Why don't you use document.title instead:
function ScrollMessage() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("ScrollMessage()", 200);
}
It's supported in all browsers except for IE <= 7;
solution3
0 2013-04-05 14:22:37
Check MDN window.status reference. Google Chrome have not status bar and Mozilla Firefox blocks status bar changes by default.
You could try a Sticky Footer in HTML and set the content of it.
Hope it help..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.