 |
| bootstrap news ticker |
Welcome back guys, today I'm going to share you that how to create a responsive
bootstrap news ticker.
So let's start...
News Content Ticker will help you to display the latest news on site with auto scroll features so that website visitor can get latest update news ticker which you want to show, As you have seen many news sites uses this feature for showing latest news to display lot’s of news heading with auto scroll or up-down navigation buttons to display the latest news. So In this post, I am going to introduce an awesome lightweight and simple jQuery Bootstrap Based Responsive News Ticker Plugin to display news or any text you want to auto scroll on homepage or sidebar so that your site visitor can get engage with latest or trading news topics.
Reddit BackLink
http://ausis.edu.au/forum/member.php?action=profile&uid=644003
https://articles.abilogic.com/118543/every-query-yours-answered-experts.html
http://ausis.edu.au/forum/showthread.php?tid=1671
https://moodle.org/mod/forum/discuss.php?d=313547#p1497739
http://en.miui.com/forum.php?mod=viewthread&tid=773726&page=1&extra=#pid26534201
https://extensions.sketchup.com/en/content/subridge#comment-99326
https://samtechn.page.tl/
http://forums.winamp.com/showthread.php?p=3155792#post3155792
Create Responsive News Ticker Plugin On Your Website
jQuery and Bootstrap3 based plugin for creating a clean responsive news ticker/slider that allows you to vertically scroll HTML contents with auto scroll and up/down navigation support.
This news ticker/text scroll depends on the bootstrap library so first, you should include bootstrap plugin on page after that include jquery.bootstrap.newsbox.min.js to create responsive news ticker.
<!- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
|
CSS
CSS on the page for styling new ticker
<style>
.glyphicon
{
margin-right:4px !important; /*override*/
}
.pagination .glyphicon
{
margin-right:0px !important; /*override*/
}
.pagination a
{
color:#555;
}
.panel ul
{
padding:0px;
margin:0px;
list-style:none;
}
.news-item
{
padding:4px 4px;
margin:0px;
border-bottom:1px dotted #555;
}
</style>
|
HTML
HTML text under ul li element which needs scroll as a bootstrap news ticker.
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-list-alt"></span><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="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
<br /> </tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
</tr>
</table>
</li>
<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
</div>
</div>
|
JS
<script>
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 5,
autoplay: true,
pauseOnHover:true,
direction: 'up',
newsTickerInterval: 4000,
onToDo: function () {
//console.log(this);
}
});
});
</script>
|
1 comment
After reading this blog i very strong in this topics and this blog really helpful to all Ruby on Rails Course Bangalore