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:  }

JQuery Multiple Selection Drop Down List...

 

Not wanting to appear too geeky at this late stage in the day - but...  This is bloody fantastic! ...or, perhaps I should say - this has been implemented to the highest professional standards.  Quite simply spiffing stuff. Change a select tag into a proper drop down list that looks as good as the real thing and works in all browsers.

Here it is in all it’s glory (with inline examples of the thing working – and source code links):

http://dropdown-check-list.googlecode.com/svn/trunk/demo.html