New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
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:
<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
this script above don't use in frontpage
Post your comment
Comment preview: