Download Ajax dynamic list

Download files

You can download the entire script from this Zip file.

Files included in package

news-rotator.html = Main HTML file
js/news-rotator.js = Main JS file
images/* = Demo images

You will also have to download the mootools library in order to use this script. It's available at www.mootools.net. It's a great library which makes it much easier to develop scripts for the web.

Setup

Include the mootools js file

After downloading the mootools library, put it in a folder and include it with a <script> tag as it is done in the demo. Example:

Create the html

Here's the example code from the demo:

<div id="newsRotator">
  <div class="newsRotatorStory">
    <h1 class="newsRotatorHeading"><a href="dhtmglgoodies.com" class="newsRotatorLink">The summer continues</a></h1>
    <div class="newsRotatorIngress">There will be summer temperatures the entire september month.</div>
    <div class="newsImage"><img src="images/news1.jpg"></div>
  </div>
  <div class="newsRotatorStory">
    <h1 class="newsRotatorHeading"><a href="dhtmglgoodies.com" class="newsRotatorLink">Go kart championship</a></h1>
    <div class="newsRotatorIngress">Sign up for the annual go kart championship.</div>
    <div class="newsImage"><img src="images/news2.jpg"></div>
  </div>
  <div class="newsRotatorStory">
    <h1 class="newsRotatorHeading"><a href="dhtmglgoodies.com" class="newsRotatorLink">Coffee breaks are important</a></h1>
    <div class="newsRotatorIngress">A strong Espresso after hard work is something you deserve.</div>
    <div class="newsImage"><img src="images/news3.jpg"></div>
  </div>
  <div class="newsRotatorStory">
    <h1 class="newsRotatorHeading"><a href="dhtmglgoodies.com" class="newsRotatorLink">The winter is far away</a></h1>
    <div class="newsRotatorIngress">It's getting colder, but the winter is still far, far away.</div>
    <div class="newsImage"><img src="images/news4.jpg"></div>
  </div>
</div>

<div id="newsRotator"> is the parent element for the entire news rotator. Each story is located inside each own <div> of class "newsRotatorStory". You can put more or less what you want inside this div. But if you want a tooltip to appear when you move the mouse over the navigator numbers at the bottom right of news rotator, you should have one element of class "newsRotatorHeading" and one of class "newsRotatorIngress" (as in the example above)

Create the javascript object

The script is initalized with code like the one below:

The NewsFlasher class takes one object as only argument. These are the available options for this object:

html (string): Reference to the main parent element of the news rotator, example: "newsRotator"
slide (Array): How the stories should slide into view. This property is optional. If ommited, it would be random where the stories slide in from(left,top,bottom, top left etc). The array may contain these values:
- top
- left/li>
- bottom
- right
- topLeft
- topRight
- bottomLeft
- bottomRight
duration (Int): Duration for the slide process in milliseconds. This property is optional. Default value is 200.
auto (Boolean): Set this value to true if you want to auto scroll the stories.
pause (Int): When auto mode is enabled, this value specifies number of milliseconds to wait between each story.