Scrolling Text - Marquee HTML Code

Ordered (Numbered) List

We like to use ordered lists to assign numbers to a list of items or a step-by-step instructional guide. Inserting it into our posts is easy. When you are creating a post, choose the “Compose” mode and click the button in the toolbar that says “Numbered list”. Type your items and press Enter after every item. You will see numbers 1, 2, 3 and so on assigned to each item.



Sometimes, you may not want numbers. For example, if you have a Table of Contents, you may want to use capital letters A, B, C to the list. If you have a long article with several lists, you may want to use Roman numbers I, II, III too. What you do after typing the list is to change the mode from “Compose” to “Edit HTML”. You will see the HTML that looks like this:-

How to bake a chocolate cake <ol> <li>Preheat oven.</li> <li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li> <li>Add water and oil.</li> <li>Add eggs, milk and vanilla.</li> <li>Pour batter into pan.</li> </ol>

The <ol> tag represents “ordered list” and each list item starts with <li> tags. Notice that they must have closing tags. After each list item, there is a </li> tag and after the entire ordered list, there is a closing </ol> tag. If I want the numbers changed to capital letters, I can add a type="A" into the code. The code will now be this:-

<ol type="A"> <li>Preheat oven.</li> <li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li> <li>Add water and oil.</li> <li>Add eggs, milk and vanilla.</li> <li>Pour batter into pan.</li> </ol>

When you click back to “Compose” mode, this is how the post will look:-



The other possible types that you can use are the Lowercase letters, Roman numerals, and Lowercase Roman numerals.

type="a" will give you a, b, c
type="I" will give you I, II, III
type="i" will give you i, ii, iii

Unordered (Bulleted) List

Using the above cake recipe example, the ingredient list need not have any particular order. Instead of numbers, we will use “Bulleted list” in the toolbar to type in our ingredients. The standard Blogger style is a Disc bullet (a black colored dot).



This time, when we view the code under “Edit HTML” mode, we will see this:-

Ingredients <ul> <li>all purpose flour</li> <li>baking powder</li> <li>baking soda</li> <li>cocoa</li> <li>sugar</li> <li>water</li> <li>oil</li> <li>eggs</li> <li>milk</li> <li>vanilla</li> </ul>

The <ul> tag means “unordered list”. The other styles you can change the bullets to are the circle and the square. Just like the ordered list, we can add within the <ul> tag the type of bullet. We can have:-

<ul type="circle">

Or

<ul type="square">

We have incorporated both of them into our sample to let you see how they would appear:-



Link List

Instead of having just words, we can have text links within an ordered or unordered list. A detailed writeup of text link codes can be found at our article on Hyperlinks and Image Links. Put the text link code into the numbered or bulleted list. For example, this HTML code:-

<ul type="circle"> <li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li> <li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li> <li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li> </ul>

Will give you this, with links opening in new windows or tabs when clicked.

• Blogger Tips
• Famous Quotes
• Business Fables

You can also replace the text links with image links.

Scrolling Links

We can make the links scroll by combining the above code with the marquee tag. The various styles of scrolling text and their attributes were explained in our article on Scrolling Text – Marquee HTML Code.

If we take one of the specimen scrolls, this scrolling text code:-

<marquee direction="up" scrollamount="2" height="100px" bgcolor="#ffffcc"> <ul type="circle"> <li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li> <li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li> <li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li> </ul> </marquee>

Will give you a link list that scrolls upwards:-

• Blogger Tips
• Famous Quotes
• Business Fables

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!

Jun 5, 2007

Scrolling Text - Marquee HTML Code

This HTML term Marquee is used to create a scrolling or sliding text. The text can move across the screen horizontally or vertically at a certain speed determined by you. Note, however, that while it looks nice to have scrolling announcements, advertisements, quotations, or links, having too much animation in your Blog may distract and irritate your readers. We had earlier created a line of scrolling text in the Header of our Quotes Blog to let you have an idea what you can do for your Blog. Also, animated tags like this are not W3C-compliant. Microsoft came up with the marquee tag and while most browsers support it, W3 did not accept it. We shall be discussing this in later articles on CSS3 and JavaScript alternatives.

For this tutorial, we begin with a short explanation of what the attributes do before giving you examples of how these attributes can be applied.

Marquee Attributes

behavior="scroll" behavior="alternate" behavior="slide"

This defines how the text will move. The default is Scroll. If the behavior is not specified, the text scrolls by moving from one end to another. Where the behavior is Alternate, the text will move back and forth. The Slide seems to have the same effect as Scroll in Firefox browser. In Internet Explorer, the text under Slide may move to one end and stop.

direction="left" direction="right" direction="up" direction="down"

The default is "left", meaning that if no direction is specified, the text will move from right to left.

loop="3"

This sets the number of times the marquee will scroll. For example, in Internet Explorer, if the number is 3, the text will scroll 3 times and stop. This command might be ignored by Firefox and the text continues to scroll. For both browsers, if no value is specified or if this attribute is omitted, the marquee will scroll or loop continuously.

scrollamount="1"

This is the amount of scrolling (in pixels). If the number is 1, the text moves by 1 pixel each time and therefore scrolls at a slow pace. If this attribute is not stated, the default value is 6. The higher the number, the faster the text scrolls.

scrolldelay="100"

This is used to set the interval between each scroll movement in milliseconds. The default value is 85. Here, the higher the value, the slower the text scrolls. A value that is smaller than 60 would be ignored and replaced by the value 60. In Internet Explorer, if you really want the text to zoom at lightning speed, you can set a small delay like 20 and specify the truespeed attribute as true (see below).

truespeed="true" truespeed="false"

This tells the browser whether or not to stick to the scrolldelay values lower than 60 that you have set. The default value is false and the browser will ignore values less than 60. Set it as true if you want the browser to adhere to the low scrolldelay value and have the text scroll very fast.

bgcolor: rgb(255,0,0)">#XXXXXX"

Should you want a background color for the scrolling text, you can specify the color code into #XXXXXX. You may refer to the HTML Color Code Chart for the color codes.

height="50px" height="80%"

You can specify the height of the marquee box in pixels or percentage value. The default value is the height of the contained text.

width="200px" width="80%"

Similarly, you can set the width of the marquee box in pixels or percentage value. The default width is the width of the frame that the marquee appears in.

vspace="20px" vspace="80%"

In Internet Explorer, you can set the top and bottom margins outside the scrolling text by stating a vspace (vertical space) margin in pixels or percentage value.

hspace="20px" hspace="80%"

You can also set the left and right margins outside the scrolling text by stating a hspace (horizontal space) margin either in pixels or percentage value.

Where to place the marquee code

You can place the scrolling text either in your Header, Footer, Sidebar, or blog post.

To have it above or below the Header or Blog Posts, see that you are able to Add Page Element in the Header and Post Body.

Go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript to add the marquee code.

If you want the text to be in your Posts, just like what you see in this post, see that you are in the “Edit HTML” mode and not “Compose” mode when you add the marquee code.

Marquee HTML Code

The basic code to add is this:-

Example 1

<marquee bgcolor="#ffffcc">Text scrolls from right to left by default.</marquee>

Text scrolls from right to left by default.

Notice that by default, the text scrolls from right to left, and it loops continuously. You can of course change the background color by specifying the Hexadecimal color code under bgcolor.

Further Examples of the Marquee code, applying the attributes discussed above:-

Example 2

<marquee behavior="alternate" width="80%" bgcolor="#ffffcc">Bouncing text using the alternate behavior.</marquee>

Bouncing text using the alternate behavior.

Here, the text bounces from one side to the other and the width of the text box has been reduced to 80%.

Example 3

<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#ffffcc">Text scrolls upwards. For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>

Text scrolls upwards. For the text to appear in the next line, add this tag <p></p> after the previous line.

The scrolldelay has been set at 150. Increase this value if you want a slower speed.

Example 4

<marquee hspace="50%" direction="down" scrollamount="2" height="100px" bgcolor="#ffffcc">Text scrolls downwards. For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>

Text scrolls downwards. For the text to appear in the next line, add this tag <p></p> after the previous line.

In this example, we use scrollamount to control the speed. The higher the value, the faster the speed. In Internet Explorer, you will see the left and right margins set under hspace.

Change Font style and Color of text

Notice in the above examples that the text is black. If you want a different color or style for your text, you can set the style of the text before the marquee code. Here are some examples:-

Example 5

<span style="color:#F6358A; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>

Text scrolls from left to right.

What we have done here is to specify a color for the text. You can look up the Color Code Chart for more colors.

Example 6

<span style="color:#6AFB92; font-size:xx-large; font-family:fantasy; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>

Text scrolls from left to right.

You can set the font-family for the text. It can be a generic font like cursive, serif, monospace, fantasy and so on. It can also be a specific font family like times, arial, courier, verdana, etc. You can state the font-size as xx-small, x-small, small, smaller, xx-large, x-large, large, larger, or a percentage value.

Update:

Pause/Stop and Start a Scroll

Readers have asked whether the scrolling text can be paused when a visitor moves his mouse cursor over the text. This is useful when he wants to read the text or click a link with the text. To start and start a marquee, the additional arguments used are the "onmouseover" and "onmouseout" events to add a simple JavaScript. It will pause the scrolling text when the mouse is over it and resume the scroll when the mouse leaves the text.

Example 7

<marquee bgcolor="#ffffcc" onmouseover="this.stop()" onmouseout="this.start()">Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.</marquee>

Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.

Scrolling Link List