Scrolling JavaScript Banners: Initializing the Banner - Doc JavaScript | WebReference

Scrolling JavaScript Banners: Initializing the Banner - Doc JavaScript


Initializing the Banner

Now that the configuration file (bannerconfig.js) is ready, it's time to start working on the banner's actual script (banner.js) -- the one that displays the banner and makes it move. Remember that both of these scripts are executed only by browsers that support LANGUAGE="JavaScript1.2", or in other words, Navigator 4.0x and Internet Explorer 4.0x.

The script defines an onload event handler that calls the startBanner() function when the page has finished loading:

onload = startBanner;

Since the banner.js script is only executed by fourth-generation browsers, so must this onload statement. If you set the event handler as an HTML attribute (<BODY onLoad="startBanner()">) you need to make sure the user is running Navigator 4.0x or Internet Explorer 4.0x. Older browsers do not recognize startBanner(), because the banner.js script is only evaluated by 4.0x browsers. Also note that onload is shorthand for window.onload. Now take a look at the body of startBanner():

function startBanner() {
  if (NS4)
    makeNS()
  else
    makeIE();
  fillBanner();
  showMessage(0, true);
  current = 0;
  timeoutID = setTimeout("nextMessage()", pause);
}

The function invokes makeNS() or makeIE() to construct the banner and its messages, based on the browser type. The NS4 variable is only defined in bannerconfig.js, but since bannerconfig.js is called before banner.js (in the main HTML document), this variable can be used in banner.js as well. The makeNS() and makeIE() functions only create the banner's framework -- the container elements. fillBanner() then fills those elements with content. It prints each message to a distinct element, so the number of child elements is equal to the number of messages.

As you will see later, all messages are hidden by default. The showMessage() function is invoked to show the first message. The function's first argument specifies the index of the desired message (e.g., 0 for the first, 1 for the second, 2 for the third), and the second one determines if the message should be visible (true) or hidden (false).

Since the banner starts by displaying the first message, current is set to 0. Note that current is defined inside the function without the var keyword. Thus, the variable is global, and can be accessed anywhere in the script. Take a look at the following statement:

var current = 0;

If current was declared this way, it would be a local variable that would only exist within startBanner(). The function's last statement sets another global variable, timerID. The setTimeout() method (of the window object) evaluates an expression after a specified amount of time. In Navigator 4.0x it can also invoke a function if its first argument is a function reference, and the other optional arguments are the arguments to be passed to the function. setTimeout() does not stall the script. The script continues immediately (not waiting for the timeout to expire). The call simply schedules an additional future event. In our function, the setTimeout() method invokes nextMessage() after pause milliseconds. Since this is the function's last statement, nothing occurs in the meantime. The setTimeout() method returns an identifier that is used only to cancel the evaluation with the clearTimeout() method.

https://www.internet.com


Created: February 10, 1998
Revised: February 10, 1998

URL: https://www.webreference.com/js/column13/initialize.html