Marquee (with optional start/stop buttons)

The quick brown fox jumped over the lazy dog. She sells sea shells by the sea shore.

Any JavaScript you write will be capable of improvement. A script you wrote several years ago is worth revisiting just to see what changes you might be able to apply to make it better than when you first wrote it. While my continuous text marquee script was only written a few years ago, revisiting it has allowed me to make several improvements to make the script less obtrusive and easier to use.

This latest version of the script means that the JavaScript can be attached to the bottom of all your web pages and will only run if you actually include marquees in the web page. Well a small piece of the code runs to see if there are any elements with a class of 'marquee' but if it doesn't find any then that's as much as the script does. You can now make any content in your page into a continuous marquee by applying just two things to the element - the element needs to have a class of 'marquee' and it needs the height to be set to the height you want the marquee to use. Since the default overflow simply increases the height to fit the content when the script doesn't run the content will simply display normally. The extra HTML (the id and span) and CSS (display:relative and overflow:hidden) that the script previously required are now generated by the script itself. This means that the code now caters better for when JavaScript is disabled as then the content will display normally rather than applying some of the styles needed to function as a marquee but without actually operating as a marquee. The other parts of the CSS that were optional are still optional so you can apply a width and/or a border to your marquee using CSS if you like.

The JavaScript itself is also easier to use. Instead of having to add statements into the script to add each marquee separately the script now does it all for you. There are only three options that you may need to alter and these are specified as parameters at the very end of the Script. You can control the speed of the marquee by changing the number in the first parameter passed into the script. This is the number of milliseconds between the script being run each time so making the number bigger will slow the marquee down and making it smaller will speed the marquee up. Note that if you place more than one marquee on the page they will all run at the same speed. The second parameter allows you to change the class name you are using to identify marquees. An optional third parameter supplies the class name you have attached to one or more empty div tags that will contain start/stop buttons to control the marquee. If you don't want a start/stop button then simply omit the third parameter.

These changes make this latest version of the marquee script the easiest to implement of all of the marquee scripts that I have written. Also, since the content can be either text, images or both there is no need for me to make a similar change to my continuous image marquee as this script can easily handle that situation as well.

To use this script simply apply a height to each block level element in the page you wish to convert to a marquee and give that element a class="marquee" attribute like this (if you only have one marquee in the page or all have the same height then apply the height to the marquee class in the CSS):

<p class="marquee" style="height:22px">The quick brown fox jumped over the lazy dog. She sells sea shells by the sea shore.</p>

A start/stop button can be attached anywhere in the page and you can have as many of them as you like. Note that all the marquees will pause while the mouse is over any one of them and restart when the mouse moves off but if a stop button is pressed then the marquees will stay stopped until a start button is pressed. Simply use the following code where ever you want a button:

<div class="marqueess"></div>

Then simply attach the script to the bottom of the web page.

<script type="text/javascript" src="marquee.js"></script>

All you need then is to save the following script as marquee.js:


You can easily include images in the marquee as well since whatever is in the block tag you give the class to will be converted to a marquee.



This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow