Scrolling JavaScript Banners: Creating the Banner's Elements - Doc JavaScript

Creating the Banner's Elements

The banner consists of one main element that contains many child elements. The main element is positioned with respect to the entire page, while the child elements are positioned with respect to the main element. The following image illustrates the banner's hierarchy of elements:

The parent element, named banner, contains all the others, named message0, message1, message2, and so forth. Only the banner element needs to be positioned on the page, because child elements define their x-y coordinates in relation to their parent element.

The number of child elements depends on the total number of messages defined in the array. This is not a problem because the elements are dynamically created by the script.

Navigator 4.0x and Internet Explorer 4.0x have different ways of creating elements after the page has loaded. With Internet Explorer 4.0x the script simply needs to insert the required HTML code at the end of the document. But Navigator 4.0x doesn't enable you to paste additional HTML after the page has loaded. We'll use different functions for each browser, due to these major differences. Let's start with Internet Explorer 4.0x.

Creating the Elements in Internet Explorer 4.0x

To create elements in Internet Explorer 4.0x we simply assign the necessary HTML code to a variable and then insert it into the existing document. Explorer's insertAdjacentHTML() method inserts the HTML text into an element at a specified place. If the text contains HTML tags, the method parses and formats the text as it inserts. Its general syntax is:

object.insertAdjacentHTML(where, htmltext)

We'll use this method to insert the desired HTML code right before the end of the page. That is, before the end of the document.body object. The insertAdjacentHTML() method receives two arguments. The first one specifies where the additional HTML code should be inserted, while the second one is the actual code to insert. The first argument, where, can be one of the following:

• "BeforeBegin"
• "AfterBegin"
• "BeforeEnd"
• "AfterEnd"

"BeforeBegin" and "AfterEnd" are meaningless when the method's object is document.body, because you cannot insert anything before or after the document's body. We'll use "BeforeEnd" to insert the desired HTML code before the end of the page (before </BODY>). Now take a look at the makeIE() function that creates the necessary elements:

function makeIE() {
  // assign the necessary code to a variable
  var text = '<DIV ID="banner" STYLE="position:absolute">';
  for (var i = ar.length - 1; i >= 0; i--) {
    text += '<DIV ID="message' + i + 
            '" STYLE="position:absolute"></DIV>';
  }
  text += '</DIV>';
  // insert the code before the end of the document
  document.body.insertAdjacentHTML("BeforeEnd", text);
  // define the main element's properties
  with (banner.style) {
    width = bannerWidth;
    height = bannerHeight;
    clip = "rect(0 " + bannerWidth + " " + bannerHeight + " 0)";
    backgroundColor = bannerColor;
    pixelLeft = bannerLeft;
    pixelTop = bannerTop;
  }
  // define the child elements' properties
  for (i = 0; i < ar.length; i++) {
    with (eval("message" + i + ".style")) {
      visibility = "hidden";
      pixelLeft = leftPadding;
      pixelTop = topPadding;
      width = bannerWidth - leftPadding;
      backgroundColor = bannerColor;
    }
  }
}

The first segment of the function assigns the necessary HTML code to the local text variable. First it assigns the opening tag for the main element. Notice that all of the elements are DIV elements with a STYLE="position:absolute" attribute. This attribute ensures the elements an absolute position, as opposed to a relative one. An absolute position means that the element is positioned in relation to its parent element, whereas a relative position means that the element is positioned in relation to the normal text flow within its parent element. The position property is a read-only one, so it must initially be part of the <DIV> tag. The other properties are assigned with JavaScript. The ID attribute of the main element has a value of "banner". The script identifies the element through its ID attribute. The for loop appends the necessary code for each one of the inner elements (the messages) to the accumulative text variable. The first element's ID attriubte has a value of "message0", while the second element's ID attribute is "message1", and so on. Also notice that the first element is defined last, so it is on top of the pile.

The function's second segment simply inserts the required HTML code (text) into the already existing HTML document. We have already discussed the insertAdjacentHTML() method, so this should be clear.

The third segment of the function specifies the properties of the main element (the parent element). The main element is reflected in JavaScript as banner, shorthand for document.all.banner. Its style attributes are all properties of the element's style property, banner.style. The with statement sets a default object for its nested statements, so you do not need to specify the preceding banner.style for all the properties. As you can see, the function assigns variables to the element's style properties. These variables are defined in bannerconfig.js, as explained earlier in the column.

The clip property defines a clipping region's shape and size for a positioned element. The clipping region defines the part of the element that is visible. Any part of the element that is outside the clipping region is transparent. Any coordinate can be replaced by the value auto, which causes the clipping rectangle to match the element's opposite side. By default the entire element is exposed. Navigator 4.0x and Internet Explorer 4.0x only support rectangular clipping regions. In Internet Explorer 4.0x, unlike Navigator 4.0x, the clipped element must have an absolute position (position:absolute). Use the following syntax to define a rectangular clipping region:

object.style.clip = "rect(top right bottom left)";

The script defines a clipping region for the entire banner, so when a child element (a message) scrolls up into the banner, or scrolls up off the banner, only the portion within the banner's dimensions is visible. The following diagram illustrates the effect of the banner.style.clip property on the banner's child elements (the messages):

The blue zone represents the banner itself, as seen by the user. The bottom rectange represents the new message moving up into the visible zone, while the top rectangle represents the previous message moving up on its way out of the banner. The space between these rectanges (the blue line in the middle) doesn't really exist -- it just emphasizes that there are two messages in the banner at one time.

The last segment of the makeIE() defines the style properties for the child elements. The for statement loops through the child elements, and sets the current element's style property as the default object for the following nested statements. The eval() function evaluates the given expression. It is required because the element's reference is dynamically constructed by appending an integer to the constant "message" string. The child elements' other properties are self-explanatory.

Creating the Elements in Navigator 4.0x

Now take a look at the equivalent function for Navigator 4.0x, makeNS():

function makeNS() {
  // create the main element
  banner = new Layer(bannerWidth);
  // define the main element's properties
  with (banner) {
    clip.right = bannerWidth;
    clip.bottom = bannerHeight;
    document.bgColor = bannerColor;
    left = bannerLeft;
    top = bannerTop;
    visibility = "show";
  }
  // define the child elements' properties
  for (var i = 0; i // create a child element
    eval("message" + i + " = " + 
         "new Layer(bannerWidth - leftPadding, banner)");
    with(eval("message" + i)) {
      visibility = "hide";
      left = leftPadding;
      top = topPadding;
      document.bgColor = bannerColor;
    }
  }
}

Navigator 4.0x's Layer() constructor creates a new positioned element (an instance of the Layer object). Its general syntax is:

var varName = new Layer(width, parent);

varName is the name of the variable used to reference to new element. It does not reflect that element's ID attribute. Since varName represents the element, simply assume it doesn't have any ID. If we use the same name for varName that we assigned as ID in the Explorer version (makeIE()), we have a cross-browser reference to the element. For example, the main element's reference is banner in both browsers. Notice that the elements are defined without var, so they are global and can be accessed from anywhere in the script.

The width argument is the width at which the contained content will wrap, unlike Explorer's width property that specifies the element's width and its wrapping width. Navigator uses the clip property to determine what is displayed. The second argument, parent, is the element in which the new one will be contained. It specifies the new element's parent. This argument is omitted to specify that the new element is a top-level one. Note that the new element's reference is not affected by the fact that it is contained by another element. The variable still serves as its reference.

Elements created with the Layer() constructor automatically have a position value of absolute. Their visibility property must be explicitly defined. Notice that dynamically created elements take the Navigator-standard values for the visibility property. Instead of Explorer's "visible" and "hidden" properties Navigator uses "show" and "hide". Since makeNS() is not a cross-browser function, there's no reason to avoid Navigator's native syntax, even though it would also accept Explorer's typical values.

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

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