Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Scrolling Status Bars

You've probably seen one of the most common JavaScript effects while surfing the Web. It's those messages that scroll in the status bar of browser windows. It's not especially difficult to do, and Script 3.12 shows you how. Figure 3.19 shows you the result; note the portion of the text in step 1 below at the bottom of the figure.

03fig30.jpg

Script 3.12 Scrolling status messages aren't difficult to create.

03fig31.jpg

Figure 3.19 Note the message scrolling in the status bar at the bottom of this window.

To make a scrolling status bar

  1. myMsg = "Hey, I know JavaScript -
    U2192.GIF check out my kewl scroller! ... "
    
    This line sets the variable myMsg to the text within the quotes.
  2. i = 0 The variable i is traditionally used by programmers to denote a variable used as a counter. Throughout this script, i will increase in value and then be set back to zero, depending on what part of the script is executing. In this line, i is being initialized (or created) with an initial value of zero.
  3. function scrollMsg() { This line creates a function called scrollMsg.
  4. window.status = myMsg.substring
    U2192.GIF (i,myMsg.length) + myMsg.
    U2192.GIF substring(0,i)
    
    This sets window.status, the status line property of the window object. In other words, it's the line at the bottom of your browser window that shows your current status. The scrolling message is set up by splitting myMsg into two parts. The method substring(x,y) acts on an object, in this case the string myMsg, and returns part of the string, starting with the character at x and continuing for y characters. So, in this line, the first instance of substring() is grabbing a part of myMsg, starting at i and ending at 56 (the number of characters in the string). This instance first gets the right half of myMsg, starting at position i and continuing to the end of the string. The result is then concatenated with the second instance of substring(), which has gotten the left half of myMsg, starting at position 0 and continuing up for i characters. As i increases, the first instance of substring() gets progressively smaller and the second instance gets progressively larger. For example, if myMsg was "howdy," and i was 3, the first instance of substring() would be "dy" and the second instance of substring() would be "how." Then, when i was incremented to 4, the first instance would be "y" and the second instance would be "howd." Therefore, the status line would go from "dyhow" to "yhowd" to "howdy." Remember, JavaScript strings start at 0, not 1.
  5. if (i < myMsg.length) {
      i++
    
    If the value of i is less than the length of the variable myMsg, then add 1 to the value of i.
  6. else {
      i = 0
    
    If the value of i is the same or greater than myMsg, then set i back to zero.
  7. setTimeout("scrollMsg()",50) The setTimeout command is JavaScript's way of adding a pause to a process. Inside the parentheses, you put the name of the function you want to call after the pause, add a comma to separate the name from the time period, then add the time period in milliseconds. In this line, you're telling setTimeout to call the scrollMsg function after a brief wait. The length of the pause is 50 milliseconds. This will create a fairly fast scroll in the status bar.
  • + Share This
  • 🔖 Save To Your Account