Simulated MARQUEE which uses W3C recommended methods and procedures

This example demonstrates how to implement a scrolling banner, similar to the MARQUEE element in Internet Explorer, that uses methods and properties contained in the DOM 1 and 2 recommendations of the W3C. It also works in Internet Explorer 5.0 without invoking the proprietary MARQUEE element.

As you examine the Script code, the following points should be kept in mind. At the end of each item there is a color bar which mark the relevant points in the Script code listing. The item with this coloring pertains only to the previous version of this script coding.

The effort to achieve this effect was considerably more involved in earlier builds of Gecko (prior to M15 on a Windows 98 platform) than it was for Internet Explorer. The reason for this is how the overflow: hidden property of a containing block was applied to its positioned children (relative or absolute). Internet Explorer clips such content but it was not in Gecko. There was debate within the Mozilla organization about whether this was the proper way to handle this property (see bug reports 10915 and 11565). After much discussion in the W3C working groups, the way clipping is now implemented in Gecko follows the way it is done in IE 5.0. The effect of this change is that it is now as easy to implement the MARQUEE type of effect in Gecko as it is in IE 5.0.
In Internet Explorer, clipping can only be applied to an absolutely positioned element. This restriction didn't appear to apply to Gecko builds prior to M15 but with the changes in clipping characteristics, it now applies to the most recent builds of Gecko (M16 and M17).
The two browsers render the scrolling text somewhat differently. The value of msgWidth must be large enough to contain the whole text string without causing line wrap. Its value was determined by trial and error in Gecko as there were no DOM methods or properties which gave the width/height of elements when this example was originally constructed. The value given here for Internet Explorer was also determined by trial and error but the IE DOM could probably be used to determine this value by looking at the offsetHeight of the text container (ID = 'canvasText') for different values of the element's width. Something similar can probably also be done now in Gecko since the offset properties have also been implemented in the recent builds.
The scrolling effect is dependent on the order in which the scroll text is clipped and then moved. The visibility of the text layer is first set to hidden in Gecko, because without doing this, the first letter of the text appears to the right of the banner window before it is moved into the window.
The M16 build apparently had an error in implementing the overflow: hidden property correctly when the scrolling text was moved to the left of its containing block. This problem now appears to be corrected in the M17 build.

Show Script Code Show Previous Script Code

<SCRIPT LANGUAGE="Javascript">
<!--
var msgWidth = 570, bannerWidth;
var timerID;
/* This function centers the banner window in the main browser window */
function centerBanner() {
  if (bannerWidth == null) setBannerWidth();
  var el = document.getElementById('canvas');
  var scrnWidth = (document.all ? document.body.clientWidth : window.innerWidth);
  el.style.left = parseInt(0.5*(scrnWidth - bannerWidth)) + "px";
  el.style.visibility = 'visible';
}

/* Gets the banner window width from the select box value */
function setBannerWidth() {
  var selEL = document.getElementById('banWidth');
  bannerWidth = parseInt(selEL.options[selEL.selectedIndex].text);
  document.getElementById('canvas').style.width = bannerWidth + "px";
  document.getElementById('canvasText').style.left = bannerWidth + "px";
  centerBanner();
}

/* Function to start and stop scrolling */
function scroll(type) {
   if (type == 'start') {
     scrollIt(bannerWidth, 10, 250);
   } else 
     if (timerID != null) clearTimeout(timerID);
}

/* Function to reset the text layer for next scroll */
function clearText() {
  scroll('stop');
  var el = document.getElementById('canvasText');
/* Reposition the scrolling text */
  el.style.left = bannerWidth + "px";
}

/* Function which toggles the display of the script code.
 * Rather than going through the textNode creation shown here
 * the node value can be directly set to accomplish the
 * same thing */
function showCode() {
  var toggleEL = document.getElementById('toggleCode');
  var scrpEL = document.getElementById('scriptContainer');
  if (toggleEL.childNodes[0].nodeValue.indexOf('Show') != -1) {
     var eTEXT = document.createTextNode("Hide Script Code");
     toggleEL.replaceChild(eTEXT, toggleEL.childNodes[0]);
     scrpEL.className = 'scrShow';
  } else {
     var eTEXT = document.createTextNode("Show Script Code");
     toggleEL.replaceChild(eTEXT, toggleEL.childNodes[0]);
     scrpEL.className = 'scrHidden';
  }
  return false; 
}

/* Function that does the actually scrolling */
function scrollIt(Left, dx, speed) {
  var text = document.getElementById('canvasText');
  Left -= dx;
  text.style.left = Left + "px";
  if (Left > -msgWidth)
    timerID = setTimeout("scrollIt(" + Left + ", " + dx + ", " + speed + ")", speed);
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE="Javascript">
<!--
var first, msgWidth = 570, bannerWidth;
var timerID, leftSide;
/* This function centers the banner window in the main browser window */
function centerBanner() {
  if (bannerWidth == null) setBannerWidth();
  var el = document.getElementById('canvas');
  var scrnWidth = (document.all ? document.body.clientWidth : window.innerWidth);
  el.style.left = parseInt(0.5*(scrnWidth - bannerWidth)) + "px";
  el.style.visibility = 'visible';
}

/* Gets the banner window width from the select box value */
function setBannerWidth() {
  var selEL = document.getElementById('banWidth');
  bannerWidth = parseInt(selEL.options[selEL.selectedIndex].text);
  document.getElementById('canvas').style.width = bannerWidth + "px";
  document.getElementById('canvasText').style.left = bannerWidth + "px";
  centerBanner();
}

/* Function to start and stop scrolling */
function scroll(type) {
   if (type == 'start') {
     first = true;            // set some initial variables
/* msgWidth is not really needed for IE other than its value needs
 * to be large enough so that the string text contained in
 * 'canvasText' occupies a single line without wrapping */
     leftSide = msgWidth;
     scrollIt(bannerWidth, 10, 250);
   } else 
     if (timerID != null) clearTimeout(timerID);
}

/* Function to reset the text layer for next scroll */
function clearText() {
  scroll('stop');
  var el = document.getElementById('canvasText');
/* The next statement not needed for IE */
  el.style.clip = "rect(0px, " + msgWidth + "px, 0px, 0px)";
  el.style.left = bannerWidth + "px";
}

/* Function which toggles the display of the script code.
 * Rather than going through the textNode creation shown here
 * the node value can be directly set to accomplish the
 * same thing */
function showCode() {
  var toggleEL = document.getElementById('toggleCode');
  var scrpEL = document.getElementById('scriptContainer');
  if (toggleEL.childNodes[0].nodeValue.indexOf('Show') != -1) {
     var eTEXT = document.createTextNode("Hide Script Code");
     toggleEL.replaceChild(eTEXT, toggleEL.childNodes[0]);
     scrpEL.className = 'scrShow';
  } else {
     var eTEXT = document.createTextNode("Show Script Code");
     toggleEL.replaceChild(eTEXT, toggleEL.childNodes[0]);
     scrpEL.className = 'scrHidden';
  }
  return false; 
}

/* Function that does the actually scrolling */
function scrollIt(Left, dx, speed) {
  var rightSide;
  var text = document.getElementById('canvasText');
  Left -= dx;
  if (document.all) {  // This branch is for the IE version
    if (first) {
      text.style.top = -1 + "px";
      msgWidth = 570;
      text.style.width =  msgWidth + "px";
      first = false;
    }
    text.style.left = Left + "px";
  } else {  // This branch is for the version in Gecko
    if (Left < 0) {
      rightSide = -Left;
      leftSide = (leftSide > 0 ? leftSide - dx : 0);
      text.style.clip = 'rect(0px, '+ leftSide + 'px, 0px, ' + rightSide + 'px)';
      text.style.left = Left + "px";
    } else {
      if (first) text.style.visibility = 'hidden';
      leftSide -= dx;
      text.style.clip = 'rect(0px, ' + leftSide + 'px, 0px, 0px)';
      text.style.left = Left + "px";
      if (first) {
        text.style.top = -0.5 + "px";  // this statement not needed in M12
        text.style.visibility = 'visible';
        first = false;
      }
    }
  }
  if (Left > -msgWidth)
    timerID = setTimeout("scrollIt(" + Left + ", " + dx + ", " + speed + ")", speed);
}
//-->
</SCRIPT>