1. Home
  2. Computing & Technology
  3. JavaScript

Cross Browser Ticker/Marquee

3. Customize the Script

More of this Feature

Introduction LtoR Script RtoL Script

There are a number of ways that you can customize the simple ticker/marquee Javascript by altering the values assigned azt the top of the script. We'll start with the one at the bottom of the list since you will certainly want to change that one even if you leave the rest as I have coded them.

All of the fields assigned at the top of the script can have the value assigned to them changed to meet your requirements. The content variable contains the actual text that is to be scroll across the field. This can contain any valid HTML as long as everything it contains will fit within the height of a single line of text. The only complication in defining the content of this field is that certain characters need to be "escaped" to stop them from interfering with the operation of the script. You can take the easy way out in setting this up if you like by using the HTML to Javascript Converter to do the escaping of the text for you (simply drop the document.writeln(' from the front of the resulting field and the '); from the end and paste what is left between the single quotes in the var content = ' '; statement). Note that you should have all of your content on one line so <br> tags and \n characters are not permitted.

Going back to the top of the list, the first two variables tWidth and tHeight define the size of the area on the screen into which the scrolling text will be displayed (you can use whatever size you like as long as the size is defined in pixels) and the third variable tcolour defines what background colour will display in that area (using #rrggbb notation).

The next variable moStop should be set to true if you want the content to stop scrolling when the mouse is moved over the coloured area or false if you want it to scroll constantly. fontfamily specifies the list of fonts to look for to use to display the scrolling text (exactly the same as in the font-family stylesheet attribute since that is where it gets used).

The final variable tSpeed allows you to adjust the scroll speed - make the number larger to scroll faster or smaller to scroll slower.

Sample Page | RtoL Script | LtoR Script | Customize your Script
Explore JavaScript
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.