Expandable Drop Down Ticker
Note: Replaces the now defunct "George's Expandable Ticker".
Description: Quite possibly the only ticker of its kind out there, Expandable Drop Down Ticker brings together the best of two worlds to create a ticker that can be viewed both sequentially and simultaneously. A drop down menu is automatically generated out of snippets of the ticker contents to let the user navigate the ticker on demand. The ticker's contents can be defined either inline on the page, or inside an external file on the same server and fetched via Ajax. For the later, the script supports refetching of the external file periodically, letting you push new information to the ticker by updating the external file. Some great features of this script are:
-
Ticker automatically generates a drop down menu that points to each
message within the ticker. It uses either snippets of the ticker
contents, or the "
title" attribute of each DIV containing the messages. - Contents for the ticker can either be defined inline as regular HTML wrapped around DIV tags, or inside an external file on the server and fetched via Ajax.
- In Ajax mode, script can be set to refetch the external file periodically, such as every 5 minutes. This enables you to push new information to the ticker by updating the external file.
- Automatic slideshow or manual mode.
- Ticker pauses onMouseover in automatic slideshow mode.
- Two different reveal effects to choose from- "slide in" or "fade in".
With Expandable Drop Down Ticker, there's no more waiting to get to a message you saw earlier!
Demos:
|
Directions
Step 1: Insert the following code into the <head> section of your page:
The above code references two external files which you should download below (right click, and select "Save As"):
- expandticker.js (a few variables at the top you should customize)
- expandticker.css
-
Single image used:
Open up expandticker.js at this point and edit the following two lines:
buttonhtml: '<img src="expand.jpg" style="width:70px;
height:17px; cursor:pointer" />', //HTML of "expand" button
buttonoffset: [5, -10], //offset of button from lower left edge of ticker
Most importantly, make sure "expand.jpg" points to the location where this image is located on your server (use a absolute URL to it if necessary), and also, that the width and height attributes reflect the image's dimensions correctly.
Step 2: Insert the below sample HTML into the <body> section of your page:
Basic Set up information
As shown in the code of Step 2, the HTML markup for the ticker should consist
of all the messages, each wrapped inside a DIV with CSS class "expandcotent":
<div id="expandticker1"
class="expandticker">
<div class="expandcontent">
This is ticker content 1
</div>
<div class="expandcontent">
This is ticker content 2
</div>
<div class="expandcontent">
This is ticker content 3
</div>
</div>
The outermost DIV should also carry an arbitrary but unique ID attribute. In
the HEAD section of your page, call the function expandticker.init() to
initialize the ticker:
expandticker.init({
id: 'expandticker1',
snippetlength: 30,
timers: {rotatepause:3000, fxduration:300} //<--No comma following very last
option!
})
The following table lists all the options accepted by in
| HTML Attribute | Description |
id: "string"required |
ID of outermost container of expandable ticker. |
snippetlength: number |
Amount of text to extract from each message to use as titles within the drop down menu. Default is 30 characters. |
fx: string |
The animation effect to being the messages
into view. Enter "fade" or "slide". Defaults to "slide". To
disable the effect, set the "fxduration" property below to 0. |
timers: {rotatepause:number,
fxduration:number} |
Sets the pause between message changes, and the duration of the slide-in or fade-in effect to reveal each message. Unit is in milliseconds, so 3000 is 3 seconds for example. Defaults to 3000 and 300 respectively. |
manual: Boolean |
True/false value that sets
whether the ticker should automatically rotate when the page loads, or
be manually viewed by selecting a message using the drop down menu.
Defaults to false, or "automatic" mode. |
remotecontent: ["filepath",
refetchinterval] |
If this option is defined, the script will
fetch the contents of the ticker from an external file on your server.
The first parameter should point to the path of this file, while the
second parameter sets the interval in which the script should refetch
the file. A value of 0 means never, while anything greater (in
seconds) causes the script to refetch the file according to
that interval. The following setting causes the ticker to get its content from the external file tickerdata.txt that is never refetched:
The following setting on the other hand tells the script to check and retrieve the contents of tickerdata.txt every 2 minutes:
Important: Do not set the 2nd parameter to too small a value to avoid unnecessary requests to the server. The default setting for |
The below initialization code defines a Expandable Ticker that gets its contents from an external file, refreshed every minute:
expandticker.init({
id: 'expandticker1',
snippetlength: 30,
timers: {rotatepause:3000, fxduration:300},
remotecontent: ["news/tickerdata.txt", 60000] //--No comma following very last
option!
})
Something to keep in mind if you want to avoid the endless frustration of your initialization code not working- there should be a comma following every option defined except the very last one!
The Ajax option in more detail
The Ajax option of Expandable Drop Down Ticker enables you to define the contents of your ticker in an external file. Furthermore, it lets you push new content to your users without having to reload the page. To use the Ajax option, set up your ticker as you normally would on your page, but devoid of the contents themselves:
<head>
<!--Script references here-->
<script type="text/javascript">
expandticker.init({
id: 'expandticker1',
snippetlength: 30,
timers: {rotatepause:3000, fxduration:300},
remotecontent: ["news/tickerdata.txt", 300] //<--No comma following very last
option!
})
</script>
</head>
<body>
<div id="expandticker1" class="expandticker">
<!--Nothing here-->
</div>
</body>
Notice that the outermost DIV of the ticker should still be defined inline on the page. Then, define the ticker contents themselves inside an external file following the same structure as its inline version, with one little addition:
<div>
<div class="expandcontent">
This is ticker content 1. This is ticker content 1. This is ticker content 1.
This is ticker content 1.
</div>
<div class="expandcontent">
This is ticker content 2. This is ticker content 2. This is ticker content 2.
This is ticker content 2.
</div>
<div class="expandcontent">
This is ticker content 3. This is ticker content 3. This is ticker content 3.
This is ticker content 3.
</div>
</div>
Just like the inline version, each message should be wrapped around a DIV
with CSS class "expandcontent". The only difference is the presence
of an extra DIV in bold that should engulf the entire content. The result
is here.
The 2nd parameter of expandticker.init() in your initialization
code dictates whether the ticker should refetch the external file periodically.
A value of 0 means never, while any greater value means "every x seconds". If
your external file is static and never changes, you should always enter a value
of 0 to avoid unnecessary server requests. Remember, the units is in seconds, so
60 for example means just every "minute"! Typically you'll want the interval to
be at least every few minutes in between.
Updating your external file periodically with new content
There's no point in setting the ticker to periodically refetch the external
file if the file itself doesn't change periodically. So how do you go about
doing the later? That's where we get into the realm of the web server and what's
available to you. One common approach is via PHP and a simple cron job. The idea
is to create a PHP script that gets the content you want using
file_get_contents(), then saving it as a static file in the format required
by the ticker script, with each content wrapped in a DIV class="expandcontent"
element. Then, create a cron job
on the server to call this PHP script periodically, resulting in the static file
being updated automatically. The ticker script then would be set to use this
static file as its content source.