New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Expandable Drop Down Ticker

Author: Dynamic Drive

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:

Dynamic Drive
Free, original DHTML and Ajax scripts. Also features a large repository of CSS codes.
JavaScript Kit
Comprehensive JavaScript tutorials, references, and over 400+ scripts!
Coding Forums
Web coding and development forums. Get help on JavaScript, CSS, PHP, ASP, and more.
CSS Drive
Categorized CSS gallery and examples.
Dynamic Drive
Free, original DHTML and Ajax scripts. Also features a large repository of CSS codes.
JavaScript Kit
Comprehensive JavaScript tutorials, references, and over 400+ scripts!
Coding Forums
Web coding and development forums. Get help on JavaScript, CSS, PHP, ASP, and more.
CSS Drive
Categorized CSS gallery and examples.
  • Content fetched from an external file (never refetched).
  • Some contents exceed the height of the ticker. A scrollbar is shown in this case.
  • Fade-in effect instead of default "slide in".

Directions Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

The above code references two external files which you should download below (right click, and select "Save As"):

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:

Select All

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

"init()" function options
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:

remotecontent: ["tickerdata.txt", 0]

The following setting on the other hand tells the script to check and retrieve the contents of tickerdata.txt every 2 minutes:

remotecontent: ["tickerdata.txt", 120]

Important: Do not set the 2nd parameter to too small a value to avoid unnecessary requests to the server.

The default setting for remotecontent is undefined- in other words, the contents is assumed to be defined inline on the page.

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.