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.

0 comments:

Post a Comment

To avoid spamming and profanity, comments will only show up after I (manually) clear them.

Related Posts with Thumbnails
Kind people supporting The Road to the Horizon:
Find out how you can sponsor The Road

  © Blogger template The Business Templates by Ourblogtemplates.com 2008

Back to TOP