A Simple News Scroller

Create a Simple News Scroller Using Dojo.

The HTML

<div id="news-feed">
 <ul>
  <li><strong style="font-size:14px;">News Item 1</strong><br>Pellentesque habitant morbi...<a href="#">Read More</a></li>
  <li><strong style="font-size:14px;">News Item 2</strong><br>Pellentesque habitant morbi...<a href="/news/2">Read More</a></li>
  <!-- more.... -->
 </ul>
</div>

The news items are placed into list items. The UL will be the element that's animated.

The CSS

#news-feed  { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { min-height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }

The absolute positioning is essential to proper animation. This example no longer requires a fixed height for each news item. Add a minimum height so only one item shows up within the scroller window at a time.

The Dojo JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require('dojo.NodeList-fx');
dojo.addOnLoad(function() {
  /* settings */
  var list = dojo.query('#news-feed ul'),
    items = list.query("li"),
    showDuration = 3000,
    scrollDuration = 500,
    scrollTopDuration = 200,
    index = 0,
    interval;

  /* movement */
  var start = function() { interval = setInterval(move,showDuration); };
  var stop = function() { if(interval) clearInterval(interval); };
  var reset = function() {
      list.anim({ top: 0}, scrollTopDuration, null, start);
  };
  /* action! */
  var move = function() {
      list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
      if(index == items.length - 1) {
        index = 0-1;
        stop();
        setTimeout(reset,showDuration);
      }
      });
  };

  /* stop and start during mouseenter, mouseleave  */
  list.onmouseenter(stop).onmouseleave(start);

  /* go! */
  start();
});
</script>

Share this article: