Archive

Archive for March, 2010

JQuery – Scroll up Headline Display

March 20, 2010 Leave a comment

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;
}
%d bloggers like this: