JQuery – Scroll up Headline Display

A really simple newsfeed scrolling display – at time of writing only displays one item at a time, but the author intends to write a multi-item display version before long: http://www.learningjquery.com/2006/10/scroll-up-headline-reader

Just in case the original source disappears here’s the code from that page:

HTML:

   1:  <div id="scrollup">

   2:    <div class="headline"> ... </div>  

   3:    <div class="headline"> ... </div>  

   4:    <div class="headline"> ... </div>  

   5:    <div class="headline"> ... </div>    

   6:  </div>

CSS:

   1:  #scrollup {

   2:    position: relative;

   3:    overflow: hidden;

   4:    border: 1px solid #000;

   5:    height: 200px;

   6:    width: 200px

   7:  }

   8:  .headline {

   9:    position: absolute;

  10:    top: 210px;

  11:    left: 5px;

  12:    height: 195px;

  13:    width:190px;

  14:  }

 

Javascript:

   1:  var headline_count;

   2:  var headline_interval;

   3:  var old_headline = 0;

   4:  var current_headline = 0;

   5:  $(document).ready(function(){

   6:    headline_count = $("div.headline").size();

   7:    $("div.headline:eq("+current_headline+")").css('top', '5px');

   8:   

   9:    headline_interval = setInterval(headline_rotate,5000);

  10:    $('#scrollup').hover(function() {

  11:      clearInterval(headline_interval);

  12:    }, function() {

  13:      headline_interval = setInterval(headline_rotate,5000);

  14:      headline_rotate();

  15:    });

  16:  });

  17:  function headline_rotate() {

  18:    current_headline = (old_headline + 1) % headline_count;

  19:    $("div.headline:eq(" + old_headline + ")")

  20:      .animate({top: -205},"slow", function() {

  21:        $(this).css('top', '210px');

  22:      });

  23:    $("div.headline:eq(" + current_headline + ")")

  24:      .animate({top: 5},"slow");  

  25:    old_headline = current_headline;

  26:  }