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:

HTML:

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

CSS:

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

    headline_interval = setInterval(headline_rotate,5000);
    $('#scrollup').hover(function() {
        clearInterval(headline_interval);
    }, function() {
        headline_interval = setInterval(headline_rotate,5000);
       headline_rotate();
    });
});
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;
}
Advertisements
  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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: