Paul McFedries' Web Home


Multiple Status Bar Messages

This variation on the status bar message theme enables you to define multiple messages, which are then scrolled in order. Here are the instructions:

  • Copy everything between the <SCRIPT> and </SCRIPT> tags and insert it somewhere inside your Web page.
  • You have to define the number of messages you want to display by altering the value in the following line:
        var NumberOfMessages = 4
    
  • You define your messages by editing the following lines:
        messages[1] = "Message A"
        messages[2] = "Message B"
        messages[3] = "Message C"
        messages[4] = "Message D"
    
  • To adjust the speed of the message, edit the following line (a smaller value gives you a faster scroll):
       var delay = 50
    
  • To adjust the starting position of the message, edit the following line (a smaller value starts the message closer to the left side of the window):
       var startPos = 100
    
Here's the full script:
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify 
// the number of messages
var NumberOfMessages = 4

var messages = new BuildArray(NumberOfMessages)

// Use the following variables to 
// define your messages:
messages[1] = "Message A"
messages[2] = "Message B"
messages[3] = "Message C"
messages[4] = "Message D"
var delay = 50
var startPos = 100

// Don't touch these variables:
var timerID = null
var timerRunning = false
var pos = 0
var msgNumber = 0

// Crank it up!
StartScrolling()

function StartScrolling(){
    // Make sure the clock is stopped
    StopTheClock()

    // Pick the first message
    PickNextMessage()

    // Off we go...
    DoTheScroll()
}

function StopTheClock(){
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function DoTheScroll(){
    if (pos <= msg.length)
        self.status = msg.substring(pos, msg.length);
    else{
        PickNextMessage()
        pos=-1
    }
    ++pos
    timerRunning = true
    timerID = self.setTimeout("DoTheScroll()", delay)
}

function PickNextMessage(){
    // Calculate the next message
    msgNumber = (msgNumber++ % messages.length) + 1
    msg = messages[msgNumber]

    // Pad the message with spaces to get the 
    // "start" position
    for (var i = 0; i < startPos; i++) msg = " " + msg
}

function BuildArray(size){
    this.length = size
    for (var i = 1; i <= size; i++){
        this[i] = null}
    return this
}
//-->
</SCRIPT>


Copyright © 1995-2008 Paul McFedries and Logophilia Limited