This tutorial is another version of my News Ticker with Mootools I published yesterday. I want to reply to all that wrote me asking for information about how to implement a news ticker with horizontal scrolling. Don't panic, it's very simple to implement and reuse in your projects. The result is something like this:
Use the following links to download the full source code ready to use in your web projects or take a look at the live preview of this tutorial.
Download source code 
Live PreviewStep 1: Introduction
In this tutorial I used the same structure I used in the previous post. I changed only CSS code:
Step 2: HTML code
How I said, HTML code is equal to the code I used in the previous post. First of all, add a link to mootools framework in the <head> tag of your page:
<script language="javascript" src="mootools/mootools.svn.js" type="text/javascript"></script>
... and add this code into the tag <body>:
<div id="NewsTicker">
<h1>What's news?</h1>
<div id="NewsHorizontal">
<ul id="TickerHorizontal">
<!-- Each News into a LI element
Use PHP or another language
to get dinamically your news. -->
<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>
<!-- If you can't use a server side
language to get your news add
manually your news into LI element
-->
</ul>
</div>
</div>
<h1>What's news?</h1>
<div id="NewsHorizontal">
<ul id="TickerHorizontal">
<!-- Each News into a LI element
Use PHP or another language
to get dinamically your news. -->
<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>
<!-- If you can't use a server side
language to get your news add
manually your news into LI element
-->
</ul>
</div>
</div>
How you can see, in the code above I just added the main HTML elements. You can add your news manually adding <li> elements to the previous code or, if you use PHP (or another server side language such as ASP, Coldfusion, Js...) you can get your news dinamically from a database table. Take a look at the previous tutorial from an example using PHP.
Step 3: CSS code
Take a look at the step 3 of my previous tutorial for an explanation about CSS elements I used in this tutorial (I changed only the style).
Step 4: Javascript function to enable vertical scroller
Last step is adding this JavaScript function to enable vertical scrolling provided from Capitol Media. I didn't add the code in this page but you can find it downloading the source code of this tutorial.
You have just to copy and paste JavaScript code without changing nothing. If you want, you can set the speed and delay (in milliseconds) for news transition at the end of the function changing these parameters:
var hor = new Ticker('TickerHorizontal',{speed:1000,delay:4000, direction:'horizontal'});
It's all! Add your comment for some suggests or interesting uses of this tutorial :)
Download source code Live PreviewRelated Post
Fantastic News Ticker Newsvine-like using Mootools
No comments:
Post a Comment