Scrolling Text | Ajax Bible

Ever seen that scrolling text in the status bar at the bottom of a Web page? That’s another technique to get text noticed, and it uses the setTimeout method. You can see an example, scroller.html, in Figure 10.6, which scrolls the text “Hello from JavaScript!” in the status bar at the bottom of the window.

image from book
Figure 10.6: Scrolling text to get it noticed

This example calls a function named scroller when the page loads:

 <body onload="scroller()">   <h1>     Scrolling status bar text with JavaScript   </h1> </body>

In the scroller function, the code starts by storing the text “Hello from JavaScript! Hello from JavaScript!” in the status bar, using the window.status property like this:

 <html>   <head>     <title>       Scrolling with JavaScript     </title>     <script language="JavaScript">         var text = "Hello from JavaScript! Hello from JavaScript! "         function scroller()         {             window.status = text             .             .             .         }     </script> </head>

Then the code shuffles the text so that it’s “ello from JavaScript! Hello from JavaScript! H” using the JavaScript substring function:

 <script language="JavaScript">     var text = "Hello from JavaScript! Hello from JavaScript! "     function scroller()     {         window.status = text         text = text.substring(1, text.length) +           text.substring(0, 1)           .           .           .     } </script>

And then the code uses the setTimeout function to call scroller again in 150 milliseconds:

 <script language="JavaScript">     var text = "Hello from JavaScript! Hello from JavaScript! "     function scroller()     {         window.status = text         text = text.substring(1, text.length) +           text.substring(0, 1)         setTimeout("scroller()", 150)     } </script>

The next time scroller is called, it displays the current text, then shuffles that text and calls itself again to display the new text in another 150 milliseconds, giving the impression that the text in the status bar is indeed scrolling.