Categories:

Home / Free JavaScripts / Scrollers / Here

Cut & Paste Rich HTML Ticker

Credit: JavaScript Kit

Description: Rich HTML TIcker is a practical script for displaying ordinary, rich HTML content in a rotated fashion on your page. The ticker contents can either be defined inline on the page, or within an external file and fetched using Ajax. A listing of the script's features:

  • Rotates regular HTML wrapped in DIV tags, either inline on the page, or within a single external file.
  • Ticker pauses onMouseover.
  • Session cookies used to persist the last message viewed, then recalled when the page is reloaded or returned to.

This script is powered by the versatile jQuery library.

Example:

Ajax (XMLHttpRequest) reference
A comprehensive, one page section on Ajax (XMLHttpRequest object) has just been added to the JavaScript Reference.
Sorting an JavaScript array using array.sort()
See how to harness the sort() method of JavaScript to sort an array alphabetically, numerically, or even shuffle the array elements.

Directions:

Step 1: Add the below sample HTML to your page, which includes two anchor links, plus two corresponding Animated Outline menus:

It references an external files. Download it below (right click, and select "save as"):

Step 2: Add the below sample HTML to the BODY of your page:

Enjoy!

Configuration info

Open up richhtmlticker.js, and at the very bottom, customize the invocation code based on HTML of your ticker :

richhtmlticker.define({
id: "myhtmlticker", //main ticker DIV id
msgclass: "messagediv", //CSS class of DIVs containing each ticker message
msgsource: "inline", //Where to look for the messages: "inline", or "path_to_file_on_your_server"
rotatespeed: 3000, //pause in milliseconds between rotation
animateduration: 1000 //duration of fade animation in milliseconds 
})

The first two parameters should correspond to the ID of the main Ticker DIV and CSS class assigned to the inner DIVs separating each message. For the 3rd parameter, if your ticker messages are contained in an external file, specify the path to it relative to the current page. For example:

msgsource: "tickercontent.htm",

This file should only contain the ticker messages themselves, each wrapped around a DIV tag with a shared CSS class name. See example.


JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.