Home > Travel > JQuery – Scroll up Headline Display

JQuery – Scroll up Headline Display

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


<div id="scrollup">
    <div class="headline"> ... </div>
    <div class="headline"> ... </div>
    <div class="headline"> ... </div>
    <div class="headline"> ... </div>


    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    height: 200px;
    width: 200px
    position: absolute;
    top: 210px;
    left: 5px;
    height: 195px;
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;
    headline_count = $("div.headline").size();
    $("div.headline:eq("+current_headline+")").css('top', '5px');   

    headline_interval = setInterval(headline_rotate,5000);
    $('#scrollup').hover(function() {
    }, function() {
        headline_interval = setInterval(headline_rotate,5000);
function headline_rotate() {
    current_headline = (old_headline + 1) % headline_count;
    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow",
    function() {
        $(this).css('top', '210px');
    $("div.headline:eq(" + current_headline + ")").animate({top: 5},"slow");
    old_headline = current_headline;
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: