␡
- Detecting Browser Plug-ins
- Around and Around with Loops
- Writing with Loops
- Using For/In Loops
- Using Do/While Loops
- Checking if Java Is Enabled
- Functions
- Using Multi-level Conditionals
- Working with Functions That Return Values
- Handling Errors
- Putting More than One Script on a Page
- Scrolling Status Bars
- Status Bar Messages
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
)
Script 3.12 Scrolling status messages aren't difficult to create.
)
Figure 3.19 Note the message scrolling in the status bar at the bottom of this window.
To make a scrolling status bar
-
myMsg = "Hey, I know JavaScript -
This line sets the variable myMsg to the text within the quotes.
check out my kewl scroller! ... "
- 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.
- function scrollMsg() { This line creates a function called scrollMsg.
-
window.status = myMsg.substring
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. (i,myMsg.length) + myMsg.
substring(0,i)
-
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. -
else { i = 0If the value of i is the same or greater than myMsg, then set i back to zero. - 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.
Tips
- If you want the message to scroll faster, decrease the number "50" in step 7. To make the scroll slower, increase the number.
- Chances are you don't deal with milliseconds in your daily life. Just remember that one second is equal to 1,000 milliseconds.
- Instead of using the substring() method, you could instead use the slice() method (remember, there's no single correct way to do things!). The slice() method has two parameters: starting position, as measured from the beginning of the string, and ending position, as measured from the end of the string (always negative). So, if you want everything but the last three characters of the string, use slice(0,-3). Oddly enough, the second parameter is one-relative, not zero-relative.