Tips & Tricks: Scrolling Text in a Frame. A Ticker Box!

I wanted to put the latest updates and some statistics of my blog in one of the side columns, but hated the amount of space the text took up.

For quite a while now, I tried to find a simple way to put scrolling text in a box, often called a 'ticker', as that seemed a nice way to condense the space the information took up.

You can find several ways to do this, often involving scripts etc.., but the simpliest I found is by using a 'marquee'.

A marquee begins <marquee withsomequalifiers> and ends with </marquee>. Everything inbetween will be displayed 'in a scrolling way'

Some simple tutorials on the use of marquees, you can find in the HTML code tutorial and on HScripts.

...But it is really easy. The one I use on my page is:

<marquee onmouseover="this.stop();" style="BORDER-RIGHT: 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid" onmouseout="this.start();" scrollamount="1" hspace="5" vspace="5" scrolldelay="100" direction="up" width="247" bgcolor="#eeeeee" height="40"> <center> This is your text<br/> <a href="http://theroadtothehorizon.blogspot.com">Or put a URL in it!</a><br/> but you can add whatever you want!</br> </center> </marquee>

and this is how it looks like:

This is your text
Or put a URL in it!
but you can add whatever you want!



As you can see, the qualifiers are simple and self-explanatory. You can basically define everything from the width, height, background colour, framesize/colour, to the direction of the text-scrolling, scrolling speed etc...

Note I used the onmouseover and onmouseout functions within the marquee definition. This is a bonus. Both functions ensure the scrolling stops if you put the mouse within the area of the marquee. I used it so that people can click on one of the URLs I defined, which refer to a shortstory.

Have fun!

Peter

More Blogging "Tips and Tricks", you find here.