Marquee II: the Revenge

Marquees Part 2

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
      Lists
      Basic Tables
      Advanced Text
      Marquee
         The basic idea
         Modifications
         You Try It!
      Meta
      Sounds
      Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices

Now that you know what a marquee is and what it can do, let's play a little more. We'll start with this basic marquee:

<marquee bgcolor="#ffff00" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.
There are six more attributes we can add to this simple marquee to make it do fun things.

Direction
The normal direction on a marquee is right to left. We can change that with a direction tag. Here is the reverse marquee.

<marquee bgcolor="#ffff00" direction="right" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.
Of course, you could put direction="left" and have it be normal, but why would you bother?

Behavior
It's nice to train your marquees to do all sorts of stunts. So far, all of your marquees have had the words scroll peacefully across the page, but there are other options. Here is the same marquee as at first, only this time we have told it to slide the words instead of scrolling them. Once they reach the left edge, they stop.

<marquee bgcolor="#ffff00" behavior="slide" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.
Another fun way to modify the behavior is to have the words bounce against the edges of the marquee. All it takes is an alternation of directions. Let's peek:

<marquee bgcolor="#ffff00" behavior="alternate" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.
Careful with that one though. Looks like a bad tennis match.

Scrolldelay
Would you like to speed up the marquee, or perhaps slow it down? You can use scroll delay. Also place this in the <marquee> tag. It will read scrolldelay="", and a number will fall between the quotation marks. The default is 85. That is an 85 millisecond delay. a delay of 500 would be half of a second delay. Here's a couple examples. First, a fast one.

<marquee bgcolor="#ffff00" scrolldelay="002" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.
Now a slow one.

<marquee bgcolor="#ffff00" scrolldelay="500" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.
The default causes fewer headaches. But feel free to make modifications.

Scrollamount
Cartoons are made from a series of still images shown at high speeds. Marquees are done the same way. If the word only jumps a few pixels, we perceive that it is moving slowly. If it jumps many pixels, we perceive it's moving quickly. Scroll amount tells the computer how many pixels the word should jump. The default is six, but we can monkey with this.

Keeping our default scrolldelay at 85, let's take a look at scroll amounts of 1 and 50.

<marquee bgcolor="#ffff00" scrollamount="1" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.

<marquee bgcolor="#ffff00" scrollamount="50" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.

Getting a headache yet? You can use both scrollamount and scrolldelay together to really mess with your viewer.

Loop
Ah, finally something that might be useful. You can control how many times your marquee loops. This means it doesn't have to keep moving forever. If you limit the number of times a normal, scrolling marquee loops, it will end on a blank marquee. If you tell the sliding marquee how many times to loop, it will end with the words showing. The following each loop three times. If you've missed, it, refresh the page and scroll down quickly.

<marquee bgcolor="#ffff00" loop="3" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.

<marquee bgcolor="#ffff00" behavior="slide" loop="3" width="300" height="20"> These are the words. </marquee>

And this marquee looks like this:
These are the words.

Hspace and vspace
Last but not least, you can control how much space is around the outside of your marquee. This is horizontal space or vertical space. Normally, the horizontal and vertical spaces are set to zero. This can be bad when the marquee is in-line. Look at the following example:

This marquee is in-line with the text of the paragraph. It is long so it will fall both above and below the crazy marquee thingie. The marquee is in the next sentence. The marquee says:<marquee bgcolor="#ffff00" width="300" height="20"> These are the words. </marquee>And finally we have the words after the marquee. These are here to show what happens when there is no spacing around the marquee and it's thrown in the middle of a large block of text. I'm sorry if you actually took the time to read all of this.

And this marquee looks like this:

This marquee is in-line with the text of the paragraph. It is long so it will fall both above and below the crazy marquee thingie. The marquee is in the next sentence. The marquee says: These are the words. And finally we have the words after the marquee. These are here to show what happens when there is no spacing around the marquee and it's thrown in the middle of a large block of text. I'm sorry if you actually took the time to read all of this.

You can increase both horizontal and vertical space around the marquee. They are defined in the marquee tag as well. Here's that same sample with spaces defined.

This marquee is in-line with the text of the paragraph. It is long so it will fall both above and below the crazy marquee thingie. The marquee is in the next sentence. The marquee says:<marquee bgcolor="#ffff00" hspace="50" vspace="10" width="300" height="20"> These are the words. </marquee>And finally we have the words after the marquee. These are here to show what happens when there is no spacing around the marquee and it's thrown in the middle of a large block of text. I'm sorry if you actually took the time to read all of this.

And this marquee looks like this:

This marquee is in-line with the text of the paragraph. It is long so it will fall both above and below the crazy marquee thingie. The marquee is in the next sentence. The marquee says: These are the words. And finally we have the words after the marquee. These are here to show what happens when there is no spacing around the marquee and it's thrown in the middle of a large block of text. I'm sorry if you actually took the time to read all of this.

Notice how there's more space around the second marquee. Yeay.

By the way, I got this info at http://www.htmlcodetutorial.com/_MARQUEE.html because I thought it was the best place to get info on marquees, which I didn't know existed until a few months before I wrote this.

So, that's all I've got to show you on this section. Hope you had fun.