Scrolling JavaScript Banners: Configuring the Banner - Doc JavaScript

Configuring the Banner

As shown in the previous section, the document specifies two external scripts. The first one, bannerconfig.js, defines the main variables with which you can configure the banner. For example, you can set the banner's background color and speed.

At first, the script sets two standard variables:

var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;

NS4 is true if the browser supports the document.layers object. In other words, it is true for Navigator 4.0x. The second variable, IE4, is true if the browser supports the document.all object. That is, it is true for Internet Explorer 4.0x.

The next set of variables configures the banner:

var interval = 20;
var increment = 1;
var pause = 750;
var bannerColor = "#ffffcc";
var leftPadding = 3;
var topPadding = 1;

Variable	Description
interval	The number of milliseconds between each vertical movement.
increment	The distance (in pixels) of each movement.
pause	The number of milliseconds after the current message reaches the center of the banner, and before the next message starts to replace it.
bannerColor	The banner's background color. The banner is an element that can have any distinct background color. Note that you may also specify a color's name (e.g., "beige") instead of its hexadecimal triplet.
leftPadding	The horizontal distance (in pixels) between the left side of the current message and the left side of the banner's bounding box.
topPadding	The vertical distance (in pixels) between the top of the current message and the top of the banner's bounding box.

After defining the banner's most important properties, the script retrieves the position and dimensions of the image. These attributes determine the banner's position, because it is placed on top of the image. Take a look at this set of variables:

var bannerLeft = (NS4) ? document.images.holdspace.x :
  holdspace.offsetLeft;
var bannerTop = (NS4) ? document.images.holdspace.y :
  holdspace.offsetTop;
var bannerWidth = (NS4) ? document.images.holdspace.width :
  holdspace.width;
var bannerHeight = (NS4) ? document.images.holdspace.height :
  holdspace.height;

The green code represents properties in Navigator 4.0x, while the red code represents the equivalent properties in Internet Explorer 4.0x. The underlined code specifies the image's reference within the entire property definition. Take another look at the image's HTML code:

<IMG SRC="blank.gif"
     NAME="holdspace" ID="holdspace"
     WIDTH="400" HEIGHT="21"
     STYLE="visibility:hidden; position:relative;">

Notice that both the NAME and ID attributes are used to name the image. The NAME attribute makes it easy to reference the image from the document.images object, and is all we need for Navigator 4.0x. So if the value of this attribute is "holdspace", the image's reference is document.images.holdpsace or document.images["holdspace"]. Although Internet Explorer 4.0x supports the document.images object, the ID attribute is used to identify the image. It ensures the image an entry in the document.all collection, which is updated more efficiently than the document.images object. If the value of the ID attribute is "holdspace", the image's reference is document.all.holdspace, document.all["holdspace"], or simply holdspace, as used in the script.

Notice that Navigator 4.0x and Internet Explorer 4.0x both use the width and height properties to extract the element's width and height. However, they utilize different properties to determine the element's coordinates. Navigator 4.0x uses x and y to retrieve these values, while Internet Explorer 4.0x uses offsetLeft and offsetTop to do so. Another way to define the image's position and dimensions is to first assign the image's reference to a variable:

var reference = (NS4) ? document.images.holdspace : holdspace;
var bannerLeft = (NS4) ? reference.x : reference.offsetLeft;
var bannerTop = (NS4) ? reference.y : reference.offsetTop;
var bannerWidth = reference.width;
var bannerHeight = reference.height;

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

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