Home / Free JavaScripts / Scrollers / Here

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="richhtmlticker.js"> /*********************************************** * Rich HTML Ticker- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code ***********************************************/ </script> <style type="text/css"> .tickerstyle{width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;} .messagediv{display: none;background:lightyellow} </style>

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

• richhtmlticker.js

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

<div id="myhtmlticker" class="tickerstyle"> <div class="messagediv"> <b><a href="http://www.javascriptkit.com/jsref/ajax.shtml">Ajax (XMLHttpRequest) reference</a></b><br /> A comprehensive, one page section on Ajax (XMLHttpRequest object) has just been added to the JavaScript Reference. </div> <div class="messagediv"> <b><a href="http://www.javascriptkit.com/dhtmltutors/ajaxgetpost.shtml">Performing GET and POST requests using Ajax</a></b><br /> This tutorial explains Ajax frankly and gently, while also covering the important topics of fetching XML and JSON files using Ajax. </div> <div class="messagediv"> <b><a href="http://www.javascriptkit.com/script/script2/outlinemenu.shtml">Animated Outline Menu</a></b><br /> This is a sleek drop down menu that can be associated with any "anchor" link on the page. As it drops down or contracts an animated "outline" effect is applied for good measure. </div> <div class="messagediv"> <b><a href="http://www.javascriptkit.com/javatutors/arraysort.shtml">Sorting an JavaScript array using array.sort()</a></b><br /> See how to harness the sort method of JavaScript to sort an array alphabetically, numerically, or even shuffle the array elements. </div> </div>

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.