Ideabox Breaking News Ticker

breaking-news-ticker.min.js

A simple jquery plugin. for news, testimonials or any messages loop

1

About

Ideabox Breaking News Ticker is simple, HTML5&CSS3, Jquery plugin. Ticker is a powerful, flexible, fast, easy to use and customize news ticker. Main Features:

Show Examples
2

Installation

STEP 1 : Ideabox Breaking News Ticker uses just one small CSS

				<link rel="stylesheet" href="src/css/ideabox-news-ticker.min.css">

STEP 2 : if not exist, add Jquery to your page (minimum version 1.10.0)

				<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

STEP 3 :Then, just include Ideabox Breaking News Ticker in your document:

				<script src="src/js/ideabox-news-ticker.min.js"></script>
3

How To Use


<!-- *********************** -->
<div class="bn-breaking-news" id="newsTicker1">
    <div class="bn-label">NEWS</div>
    <div class="bn-news">
        <ul>
            <li><a href="#">1.1. There many variations of passages of Lorem Ipsum available</a></li>
            <li><a href="#">1.2. Ipsum is simply dummy text of the printing and typesetting industry</a></li>
            <li><a href="#">1.3. Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></li>
            <li><a href="#">1.4. Lorem simply dummy text of the printing and typesetting industry</a></li>
            <li><a href="#">1.5. Ipsum is simply dummy of the printing and typesetting industry</a></li>
            <li><a href="#">1.6. Lorem Ipsum simply dummy text of the printing and typesetting industry</a></li>
            <li><a href="#">1.7. Ipsum is simply dummy text of the printing typesetting industry</a></li>
        </ul>
    </div>
    <div class="bn-controls">
        <button><span class="bn-arrow bn-prev"></span></button>
        <button><span class="bn-action"></span></button>
        <button><span class="bn-arrow bn-next"></span></button>
    </div>
</div>
<!-- *********************** -->

<script type="text/javascript">
	$(document).ready(function(){
		$('#newsTicker1').breakingNews();
	});
</script>
4

Options

All news ticker options:

Name Type Default Description
effect string "scroll" other effects: "typography", "fade", "slide-up", "slide-down", "slide-left", "slide-right"
direction string "ltr" News ticker direction property. other value : "rtl"
fontSize string "default" News ticker font size property. like "16px", "18px"...
themeColor string "default" Default CSS colors. If you want to change "#f65454" ...
background string "default" Default CSS background. if you want to change "#FF00FF", "url(img/background-pattern-example.png)"
height integer 40 News ticker height propery.
borderWidth integer 1 News ticker border width propery.
radius integer 2 News ticker border radius propery.
play boolean true News ticker auto play property. set the false stoping news ticker.
delayTimer integer 4000 Wait for transition for all other effects except "scroll" effect
scrollSpeed integer 2 Scroll effect slide speed. example (1 slowly)..1,2,3,4,5,6,......(more fast)
stopOnHover boolean true Stop the news ticker on mouse hover event.
position string "auto" Ticker position. Values : "fixed-top", "fixed-bottom"
zIndex integer 99999 Ticker z-index parameter. Using with position.
source object "html" News ticker other source propery (more)
Name Type Defuult Description
type string null News ticker source type. values: "rss" or "json"
usingApi string "YQL" rss source type using api. values "rss2json" or "YQL"
url string null soruce url. please add any json or rss feed url
limit integer null source news limit.
showingField string "title" you can show any rss fields in the news ticker set value "description" or "link"
linkEnabled boolean true extra source data link propery.
target string '_self' source link target propery set "_blank"
seperator string null set like seperator html between the news <span class="bn-seperator bn-news-dot"></span>
errorMsg string null show error message if not working source data.
5

Styles

You can change any styles with css. Find the element you want to change and make the changes you want with css.

Examples:

				/*control button styles*/
.bn-controls button{
	background:#FF0000;
}
/*links hover styles*/
.bn-news ul li a:hover{
	color:#FF0000;
}
			
				/*prefix styles*/
.bn-prefix{
	color:#0000FF;
	font-size:18px;
}