[jQuery] News ticker with categories
Hi, I'm a php developer and new to jquery. I've been pulling my hair
for a good day in creating a news ticker with categories. There are
two boxes, one scrolls up categories, and the other showing headlines
in the categories. Sth similar to the ticker found here (it's a java
applet though) http://appletlib.tripod.com/headline.html . The
categories & headlines should freeze on mouse over, and user can click
the up & down arrows to manually scroll thru categories.
This image is the expected result:
http://img79.imageshack.us/img79/7720/tickerpi4.gif
So far this is the code I come up with, using jquery:
<script src='jquery.js'></script>
<style>
#box1 {
width:200px;
height:25px;
overflow:hidden;
position:relative;
border: 1px solid #000;
float: left;
}
#box2 {
margin-left: 20px;
width:200px;
height:25px;
overflow:hidden;
position:relative;
border: 1px solid #000;
float: left;
}
.cat {
position:absolute;
top:30px;
}
.headline {
display: none;
}
.control {
float: left;
}
.control span {
cursor: pointer;
}
</style>
<script>
var currentCatId = 0;
var currentHeadlineId = 0;
var freeze = false;
var catCount = 0;
$('document').ready(function() {
catCount = $('#cats span').size();
$('#box1').hover(
function() {
freeze = true;
}
, function() {
freeze = false;
showHeadline();
}
);
$('#box2').hover(
function() {
freeze = true;
}
, function() {
freeze = false;
showHeadline();
}
);
catDown();
});
function catDown() {
currentHeadlineId = 0;
var cat = $('<span class="cat">').html( $( '#cats span:eq(' +
currentCatId + ')' ).html() );
$('#box1 span').animate( {top: -20}, "slow", function() {
$(this).remove();
$(cat).appendTo('#box1').animate( {top: 2}, "slow", function()
{
showHeadline();
});
});
}
function showHeadline() {
if( ! freeze ) {
var headline = $('#headline_' + currentCatId + ' span:eq(' +
currentHeadlineId + ')').html();
if( headline ) {
$('#box2 span').fadeOut( "slow", function() {
$(this).remove();
$('<span
class="headline">').html( headline ).appendTo('#box2').fadeIn("slow",
function() {
currentHeadlineId++;
showHeadline();
});
});
} else {
shiftCat();
catDown();
}
}
}
function shiftCat() {
currentCatId++;
currentCatId = currentCatId % catCount;
}
</script>
<div class='control'>
<span id='up'>up</span>
<span id='down'>down</span>
</div>
<div id='box1'><span></span></div>
<div id='box2'><span></span></div>
<br clear='all'>
<div style='display:none'>
<div id="cats">
<span>News</span>
<span>Pictures</span>
<span>Blog</span>
</div>
<div id="headline_0">
<span>News 1</span>
<span>News 2</span>
<span>News 3</span>
</div>
<div id="headline_1">
<span>Pic 1</span>
<span>Pic 2</span>
<span>Pic 3</span>
</div>
<div id="headline_2">
<span>Blog 1</span>
<span>Blog 2</span>
</div>
</div>
The "freeze on mouse over" is still very buggy, and I don't know how
to implement the up/down button.
I would really appreciate if sb point out how I could improve the code
and add the up/down control. Or if you know a news ticker script with
similar features (whether using jquery or not), an url would be very
helpful. I'm really stuck :(