New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download Ajax dynamic list

Demo

Bookmark and Share

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:

<script type="text/javascript" src="js/mootools-1.2-core-nc.js"></script>

Create the html

Here's the example code from the demo:

<div id="newsRotator">
  <div class="newsRotatorStory">
    <h1 class="newsRotatorHeading"><!-- This is the heading --><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"><!-- This is the heading --><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"><!-- This is the heading --><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"><!-- This is the heading --><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:

<script type="text/javascript">
var newsRotator = new DHTMLGoodies.NewsFlasher( {
  html:  'newsRotator',
  slide : ['fromLeft','fromRight']
  
});
</script>

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.

Update log

  • October, 25th, 2010: Added auto feature for automatic news scrolling

Comments

Hiwa
I want to script of news Rotatorrot for frontpage.please
this script above don't use in frontpage
Hiwa at 11:09AM, 2011/04/24.
chillerfx
hi, I'm looking for am html code , which gets the feeds of the latest posts from my BLOG page (recent posts) and updates it on the sidebar in a scrolling box on my homepage . And for your info, I am not using WP for blog and it's a custom coded one. Please help .. thanks in advance..
chillerfx at 10:40AM, 2012/11/28.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com