Internet Explorer Marquees

Tutorial #17:
IE Marquees

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

Internet Explorer Marquees

Notice that I said Internet Explorer Marquees. These marquees are not compatible with the Netscape browser. The browser will simply ignore the tag and display the text that was supposed to be scrolled. So, if any of you who use Netscape and chose to continue, this is you last warning :

THESE DO NOT WORK IN NETSCAPE

Now that we have the introduction out of the way, let's get on to how to actually make the text scroll. This is done by using one tag : the <MARQUEE> tag. This tag has many attributes that allow for easy configuration of the marquee itself. Without any attributes, the marquee simply has a width of the entire screen, a height that of the text being scrolled, background and text colors that of the web pages, and a behavior known as scroll, which is the behavior of the heading marquee.

Now, let's make our first marquee, shall we? To make a simple marquee, place the text to be scrolled between the marquee and its partner, as it is shown below :

<MARQUEE>Our first scrolling marquee!!</MARQUEE>

And this is what you get:

Our first scrolling marquee!!

Now, let's take a look at the functions of the elements of the script. This is pretty easy to figure out.

  • The <MARQUEE> tag starts the scrolling process
  • The text in the middle gets scrolled
  • The </MARQUEE> tag ends the scrolling process.

Now, we get to the fun part : ATTRIBUTES. Did you think that that marquee looked boring? Well, attributes make the marquee do all kinds of fun stuff. There are several attributes of the MARQUEE tag we will learn about. These are :

BEHAVIORhow it moves
BGCOLORthe background color
DIRECTIONwhich way the marquee
moves
VSPACEthe space above and
below the marquee
HEIGHThow tall it is
HSPACEdistance from the left
LOOPhow many times it scrolls
SCROLLDELAYhow fast or slow will it scroll?
WIDTHhow wide it is
Our first attribute will be the BEHAVIOR attribute. This describes how the marquee will scroll. There are three values for this. The first, SCROLL, instructs the marquee to scroll the entire way off the screen before restarting, or looping. The second, SLIDE, instructs the marquee to scroll to the end of its path, stop while the entirety of the text is showing, and then loop. The third, and definately most annoying of the three values, is ALTERNATE. The marquee bounces back and forth, while never going out of view.

Neater than a papyrus SCROLL
Not the Electric SLIDE, but pretty cool
Bouncy, bouncy, bouncy : ALTERNATE

<MARQUEE BEHAVIOR="     ">
My point should be quite clear now. Our next attribute is BGCOLOR. This controls the background color of the marquee. The purpose of this should be quite clear. Take a look:

BGCOLOR="#FFFF00"
BGCOLOR="#FF0000"

<MARQUEE BGCOLOR="     ">

The next attribute on the list is the direction attribute. This can have one of two values : LEFT or RIGHT. By setting the DIRECTION to left, the default, the marquee will scroll from left to right. If it is set to RIGHT, it will scroll from right to left. See?

Do you prefer this??? : LEFT
Or do you prefer this??? : RIGHT

<MARQUEE DIRECTION="     ">
The next attribute on the list is the HEIGHT attribute. This, as you probably guessed, controls how tall the marquee is. This is used when you want a centering effect in the page, as the marquee height can be a percentage of the page, or a number of your choice. This is also true of the WIDTH attribute, as it controls the horizontal width of the marquee, and can also be a number or percentage.

HEIGHT="50" WIDTH="350"

<MARQUEE HEIGHT="    ">
<MARQUEE WIDTH="     ">
The next two attributes we will discuss are the HSPACE attribute and the VSPACE. These attributes seem to fit together, and with good reason too. The HSPACE attribute controls how much space is between the edges of the marquee and the sides of the browser window. The VSPACE controls the amount of space between it and the surround text to the top or bottom.

HSPACE="50" VSPACE="30"

<MARQUEE HSPACE="    ">
<MARQUEE VSPACE="    ">
The final attributes we will discuss here are the SCROLLDELAY attribute and the LOOP attribute. The value of this attribute is a number and represents the number of milliseconds before the start of the marquee and the amount of milliseconds between each successive draw of the marquee. This is particularly useful if you want to have the marquee start after the page has loaded, instead of while it is loading. The LOOP attribute determines how many successive times the MARQUEE will scroll, or loop. This is a number.

SCROLLDELAY="300" LOOP="3"

<MARQUEE SCROLLDELAY="    ">
<MARQUEE LOOP="    ">

Now What?

I bet you're asking : "Well, now I know how to make marquees, but when do I use them?"

Joe's advice would be to use them when you feel you need them. They can become quite annoying if used at the wrong time, and should therefore be used judiciously. I have seen these things used in very creative and effective ways. These can become a valuable asset in your arsenal of HTML knowledge.

Brendan's advice is to use it for links, or for news. Take a look: Go to the home page   |   E-mail Brendan   |   E-mail Joe   |   Join my club   |   

See what I mean? Here's another example: In the news: I would like to welcome Joe and Chris to the team! Hopefully, it'll get some stuff done quicker around here. Also, they know stuff I don't, so they'll make this site more well-rounded.