Scrolling Text


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.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net