Scrolling JavaScript Banners: Moving the Messages - Doc JavaScript

Moving the Messages

In order to rotate the messages, the banner moves the current message upwards while the next message takes its place. The top of the upcoming element is "attached" to the bottom of the current (to be exact, previous) element. In general, the scrollBanner() function is in charge of this:

function scrollBanner(from, to) {
  if (NS4) {
    fromEl = eval("message" + from);
    toEl = eval("message" + to);
    toEl.top = fromEl.top + bannerHeight;
    toElTarget = fromEl.top;
  } else {
    fromEl = eval("message" + from + ".style");
    toEl = eval("message" + to + ".style");
    toEl.pixelTop = fromEl.pixelTop + bannerHeight;
    toElTarget = fromEl.pixelTop;
  }
  showMessage(to, true); // show the upcoming message
  intervalID = setInterval("moveUp()", interval);
}

First, notice that all of the new variables are global ones, because they are used in the moveUp() function. The function consists of one if statement that designates a different set of statements for each browser type. For Navigator 4.0x, fromEl and toEl reflect the current element and the upcoming one (which is going to replace it) respectively. For Internet Explorer 4.0x, they reflect the style property of these elements, because an element's coordinates are defined as properties of the element's style property.

The statement:

toEl.top = fromEl.top + bannerHeight; // NS4
toEl.pixelTop = fromEl.pixelTop + bannerHeight; // IE4

positions the upcoming element just below the banner's visible region -- bannerHeight pixels from the top. Remember that bannerHeight is defined in bannerconfig.js as a global variable, so it is accessible. The current situation is illustrated in the following diagram:

After the next element is positioned below the current one, the global variable toElTarget is assigned the value of fromEl.top (Navigator) or fromEl.pixelTop (Explorer). In other words, it holds the final destination of the new element (which is the position of the current element before it moves). Note that top (Navigator) and pixelTop (Explorer) are the y coordinate of the top of the element. The y coordinate of the banner's child elements are measured in relation to the parent element. Increasing the value of top/pixelTop moves the element downward, while decreasing it moves it upward.

The upcoming element is in place, so showMessage() is invoked to make it visible. Remember that no part of the element is actually visible at this point, because it is outside of the banner's clipping region. The setInterval() method calls the moveUp() function every interval milliseconds, until clearInterval() cancels the interval (or the frame/window is destroyed). In general, setInterval() evaluates an expression or calls a function every time a specified number of milliseconds elapses, until canceled by a call to clearInterval(). We use the global variable intervalID to identify the interval, so we can use clearInterval() to cancel it later. Now take a look at moveUp(), which is repeatedly called to move the two elements:

function moveUp() {
  if (NS4) {
    fromEl.top -= increment;
    if (toEl.top - increment toEl.top -= increment;
    }
  } else {
    fromEl.pixelTop -= increment;
    if (toEl.pixelTop - increment toEl.pixelTop -= increment;
    }
  }
}

This function may look difficult, so let's define its tasks:

• It stops moving the elements when the new one has reached its final destination.
• It moves both elements up increment pixels. The corresponding statement in the function is underlined for your reference.

The second task and its implementation is obvious, so we'll only discuss the first one. The function checks if the previous element (the one leaving the banner) is less than increment pixels from its destination. If so, it places it in its final position rather than moving it increment pixels, to ensure that it does not go past its destination (e.g., when increment is 2 - even - and the banner's height is 21 - odd). The previous element is advanced regardless of the new element's position. If the incoming element is within one increment of its final position, the element is positioned, the current interval is cleared, and the previous element is hidden. The setTimeout() method is invoked to call nextMessage() again after a delay of pause milliseconds. And the wheel keeps turning...

We have now completed the entire banner. The next page lists banner.js, the banner's main script.

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

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