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