Saturday 20 March 2010

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