Web / JQuery

How to build a News Ticker (JQuery)

by Libz Mbanje
22 Nov 2015 at 12:38hrs | 3776 Views
Here we are going to look at how we can create/build a News Ticker using JavaScript. This tutorial will focus mainly on JQuery.

See Working Demo.

If you want to learn about how you can create a custom json file for you news ticker check out my other tutorial on "How to create custom json files from MySQL data".

Step 1 - HTML

Create an empty div for the ticker with id 'ticker'

<div id="ticker" class="content_wrap btm20"></div>

Step 3 - CSS (Styling the ticker div)

#ticker {
background: #fff none repeat scroll 0 0;
border: 1px solid #e5e5e5;
height: 35px;
line-height: 1;
overflow: hidden;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
#ticker > div {
padding-top: 0 !important;
}
#ticker > div a {
display: none;
float: left;
font-weight: bold !important;
line-height: 2;
}
#ticker > div span {
color: white;
float: left;
font-weight: bold !important;
height: 100%;
margin-right: 10px;
padding: 8px;
}
#ticker > div span i {
color: white;
}

Step 3 - JQuery

Initialising variable
var tickerCounter =0;
var tickerArray =[];
var tickerStart ;

This code will reading json file using JQuery's getJSON() method and then loops through the json entities using the method each() and then push() method to add each news feed into the 'tickerArray' as shown below.

$.getJSON( "processing/breaking.news.php", function( data ) {
$.each( data, function(key,val ) {
tickerArray.push(val);
});
});

Example of JSon data generated from MySQL database using php. You can check "How to create JSon file from MySQL database using PHP".

[
"<div><span class=\"News\">News <i class=\"fa fa-angle-double-right\"></i>\n</span> <a href=\"News/National/78136\">Mugabe's Zanu-PF in the grip of a generational split</a> <i class=\"fa fa-angle-right float_right fa-2x\"></i> <i class=\"fa fa-angle-left float_right fa-2x\"></i></div>",
"<div><span class=\"News\">News <i class=\"fa fa-angle-double-right\"></i>\n</span> <a href=\"News/National/78135\">Prostitute stabs client over 'bonus round'</a> <i class=\"fa fa-angle-right float_right fa-2x\"></i> <i class=\"fa fa-angle-left float_right fa-2x\"></i></div>",
"<div><span class=\"News\">News <i class=\"fa fa-angle-double-right\"></i>\n</span> <a href=\"News/Africa/78134\">Granny (85) has white wedding with grandson</a> <i class=\"fa fa-angle-right float_right fa-2x\"></i> <i class=\"fa fa-angle-left float_right fa-2x\"></i></div>"
]

In order to load content from 'tickerArray' into the ticker div we are going to use this line where 'tickerCounter' is the array index

$('#ticker').html(tickerArray[tickerCounter]);

This function will load HTML content from the JSON into the ticker div with the 'Anchor Element' <a> hidden using CSS display='none'.
<a> is then toggled on using this line of code:

Animate <a>
$("#ticker div a").animate({width:'toggle'},350);

Function to load HTML combined with the above animation line.
function newTicker() {
$('#ticker').html(tickerArray[tickerCounter]);
$("#ticker div a").animate({width:'toggle'},350);//Animate the Anchor Element
if(tickerArray.length === tickerCounter+1){
tickerCounter = 0;
}else{
tickerCounter++;
}

}

Next button

$('body').on('click', ".fa-angle-right", function() {
window.clearInterval(tickerStart);

$('#ticker').html(tickerArray[tickerCounter]);
$("#ticker div a").animate({width:'toggle'},350);
if(tickerArray.length === tickerCounter+1){
tickerCounter = 0;
}else{
tickerCounter++;
}

});


Previous button


$('body').on('click', ".fa-angle-left", function() {
window.clearInterval(tickerStart);
if(tickerCounter===0){
tickerCounter = tickerArray.length -1;
}else{
tickerCounter--;
}
$('#ticker').html(tickerArray[tickerCounter]);
$("#ticker div a").animate({width:'toggle'},350);
});

Complete Code


JQuery

var tickerCounter =0;
var tickerArray =[];
var tickerStart ;

$.getJSON( "processing/breaking.news.php", function( data ) {
$.each( data, function(key,val ) {
tickerArray.push(val);
});
});


$('body').on('click', ".fa-angle-right", function() {
window.clearInterval(tickerStart);

$('#ticker').html(tickerArray[tickerCounter]);
$("#ticker div a").animate({width:'toggle'},350);
if(tickerArray.length === tickerCounter+1){
tickerCounter = 0;
}else{
tickerCounter++;
}

});

$('body').on('click', ".fa-angle-left", function() {

window.clearInterval(tickerStart);
if(tickerCounter===0){
tickerCounter = tickerArray.length -1;
}else{
tickerCounter--;
}

$('#ticker').html(tickerArray[tickerCounter]);
$("#ticker div a").animate({width:'toggle'},350);


});


function newTicker() {
$('#ticker').html(tickerArray[tickerCounter]);
$("#ticker div a").animate({width:'toggle'},350);
if(tickerArray.length === tickerCounter+1){
tickerCounter = 0;
}else{
tickerCounter++;
}

}


tickerStart = window.setInterval(newTicker, 5000);



Source - a{C}



Chat Login

Register | Forgot password