Introduction

Back in the days when Netscape and Microsoft were competing about adding less and less functional tags to an already poluted markup language MS introduced the Marquee tag. The marquee tag scrolls its content in one of four directions and it can actually be quite useful and it is only half as anoying as Netscape's Blink tag.

When MS introduced a way to extend the tags in Internet Explorer 5.0 with so called Behaviors I wrote an article that brought the Blink tag to IE5. Now is the time that I do the same for Mozilla. Elements in Mozilla can be extended using what they call Bindings or XBL (eXtensive Binding Language). Bindings are on the paper more advanced than behaviors but in reality behaviors are (IMHO) better due to an easier file format. Behaviors uses a header part and an implementation part. The header describes the behavior and the implementation part contains all the code. Bindings on the other hand mixes the headers and the implementation making it a lot harder to use common programming procedures.

Bindings do however add a few really powerful features. The most most important one is that bindings can extend other bindings and we all know that extending or inheritance is one of the corner stones in object oriented programming. Another really powerful feature is anonymous content and this allows extra markup to be inserted without changing the visible DOM tree of the document containing the element with the binding.

Usage

XBL bindings are added much like behaviors using a CSS property. This property is called -moz-binding and it points to an URI that points to an element inside a document using a #-notation.

marquee {
   -moz-binding:   url("marquee-binding.xml#marquee");   /* needed */
   display:        block;   /* needed */
   overflow:       hidden;  /* needed */
   height:         200px;   /* needs to be a value. auto does not render correctly */
}

Notice that since Mozilla does not recognize the marquee tag it will treat it as an inline element and therefore we need to add some extra CSS rules. The reason this is not done in the binding is that putting it in the actual page gives more power to the developer (with a small cost of making it more complicated).

Once the binding has been attached you can use marquee elements in the way that you use them in IE. For a reference see MSDN.

<marquee loop="-1" behavior="alternate" id="marquee1"
   onstart="window.status = 'Start event fired at ' + new Date;"
   onbounce="window.status = 'Bounce event fired at ' + new Date;">
Hello <strong>Mozilla</strong>!
</marquee>

Next we take a look at the actual implementation.

XBL Marquee
Implementation
Demo
Progressbar Demo
Download

Author: Erik Arvidsson