...

View Full Version : [jQuery] News ticker with categories



jbeginner
05-30-2008, 07:05 PM
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.

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><br>
<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 :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum