YUI based newsticker

Files needed

For this snippet you need the files: reset-fonts-grids.css, yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1 +).

Code HTML

De class "newsTicker" is verplicht. De binnen de list items is optioneel.

<div class="newsTicker">
 <ul>
  <li>
   <span>14-11-2008</span> <a href="#">Student Informatica wint eerste prijs waterschapsdebat</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Basisschoolleerlingen bewust van respect</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Tijdgebrek groot probleem voor studenten met functiebeperking</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Regisseur Matanic wint Stenden Media Student Award</a>
  </li>

  <li>
   <span>14-11-2008</span> <a href="#">Stenden-studenten onderweg naar Dakar voor KiKa</a>
  </li>
 </ul>
</div>		
	

Code CSS

div.newsTicker {
 position: relative;
 width: 400px;
 overflow: hidden;
}
div.newsTicker ul li {
 white-space: nowrap;
 float: left;
 padding-right: 30px; /* don't change to margin = margin between news items */
}		
	

Code JS

Download het script

Example