Create News Ticker with Jquery and Bootsrap
In this tutorial, we implemented a newsticker with jquery and bootstrap vertically . You can download the whole source code at the most link bottom. You can even try our demo earlier in link "Live Preview" before downloading.
Step 1
Firstly, we design main layout with navigation bar. You can create your own layout. The file is named newsbreaking.html which contain source as follow :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap vertical newsticker </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/site.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
<script src="assets/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar-inverse {
background-color: #3b5998;
font-size:18px;
}
.navbar-brand{
float: none !important;
}
.navbar-inverse .navbar-nav > li.c1 a:hover, .navbar-inverse .navbar-nav > li.c1.active a{
color:#fff;
background: #F55;
}
.navbar-inverse .navbar-nav > li.c2 a:hover, .navbar-inverse .navbar-nav > li.c2.active a{
color: #fff;
background:#973CB6;
}
.panel-default>.panel-heading {
color: #333;
background-color: #E91E63;
}
.panel-default {
border-color: #E91E63;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="c1 active"><a href="index.html">Home</a></li>
<li class="c2 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Programming<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Web Programming</a></li>
<li><a href="">Dekstop Programming</a></li>
<li><a href="">Android Programming</a></li>
</ul>
</li>
<li><a href="">English</a></li>
<li><a href="">Review</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Gallery</a></li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
});
});
</script>
<!-- /.navbar -->
<br>
<br>
</body>
</html>Step 2
In this step, we add news content on the layout that will be set as a news ticker. In this example the source code place after navbar :<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" >
<div class="panel-heading" style="color:#fff"><b>News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="assets/images/kpl6.jpg" width='120' height='120'style= "margin-right:4px"></td>
<td><h5 style='color:#ffb60f;'><strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
<small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
</td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="assets/images/kpl7.jpg"width='120' height='120' style= "margin-right:4px">
</td>
<td><h5 style='color:#ffb60f;'><strong>
Simulasi latihan perang bersama yang dilakukan di kapal induk yang modern </h5></strong>
<small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
</td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="assets/images/kpl8.jpg" width='120' height='120' style= "margin-right:4px">
</td>
<td><h5 style='color:#ffb60f;'><strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
<small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
</td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="assets/images/kpl9.jpg" width='120' height='120' style= "margin-right:4px">
</td>
<td><h5 style='color:#ffb60f;'><strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
<small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
</td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="assets/images/kpl5.jpg" width='120' height='120' style= "margin-right:4px">
</td>
<td><h5 style='color:#ffb60f;'><strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
<small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer" style="background-color:#E91E63"></div>
</div>
</div>
</div>
</div>Step 3
We implement the animation of newsticker with a function jquery as well as its library. The source code as follow :<script type="text/javascript">
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 3,
autoplay: true,
pauseOnHover:true,
direction: 'up',
navigation: false,
newsTickerInterval: 4000,
onToDo: function () {
//console.log(this);
}
});
});
</script>
<script src="assets/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
