“SmarTicker”

a Smart jQuery Rss Feed Reader & News Ticker Plugin
“SmarTicker” Documentation By Meghdad Hadidi ver 1.5
Created: 2013/09/10
Update: 2014/04/20
By: Meghdad Hadidi
Email: meghdadhadidi1@gmail.com
Website: powerup.ir
Thank you for purchasing SmarTicker. If you have any questions that are beyond the scope of this help file, please feel free to Email via my user page contact form here. You can also contact me from Contact page of my website, Add me as friend in Facebook, or add to your Google+ circles, Thanks so much!

1. Create HTML Structure

Start with creating a <div> and set a class name for it, then create a <ul> element inside of <div> and insert your news items into <li> tags. See the example below:

<div class="target">
	<ul>
		<li><a href="#">News item 1</a></li>
		<li><a href="#">News item 2</a></li>
		<li><a href="#">News item 3</a></li>
		<li><a href="#">News item 4</a></li>
		<li><a href="#">News item 5</a></li>
		...
	</ul>
</div>

2. Include Css & Js Files

SmarTicker needs jQuery 1.8.2 and newer for best performance. This means using older jQuery plugin cause some SmarTicker features not work properly. You should also include jquery.smarticker.js file after jquery library.
I recommend that include js files at the end of document. Do this like example below:

		...
	</div>
	<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="jquery.smarticker.js"></script>

</body>
</html>

The downloaded package contains .css file named "jquery.smarticker.css" too. You should include the css file in <head> element:

<head>
	<title> Page Title </title>

	<link href="jquery.smarticker.css" rel="stylesheet" type="text/css" />
	...

3. Call SmarTicker

Now, you just need to call smarticker() method on target element. Do this at the end of HTML structure, where the jquery.smarticker.js file included.

		...
	</div>
	
	<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="jquery.smarticker.js"></script>
	<script type="text/javascript">
	(function(){
		$('.target').smarticker();
	})();
	</script>
</body>
</html>

SmarTicker will start working, and the news items will change on 3 seconds timeouts.

4. Features

4.1. Category section

SmarTicker has a section named "Category". To use this section, just add a data attribute to your news item (<li> tag) like this:

<li data-category="Yahoo News"><a href="#">News item 1</a></li>
					

4.2. SubCategory section

SmarTicker also has a section named "SubCategory". To use this section, just add a data attribute to your news item ( <li> tag) like this:

<li data-subcategory="Finance"><a href="#">News item under finance category 1</a></li>
					

4.3. Category & SubCategory Together

You can user Category & SubCategory section together by setting data attribute for these to sections.

<li data-category="Google News" data-subcategory="Finance"><a href="#">News Item</a></li>

4.4. Rainbow Magic

See Magic Of Colors. Your SmarTicker turned to a Rainbow. If you want to use color animation on your SmarTicker, you must use a jquery color animate plugin like jQueryUI or jquery Color Animation by Edwin Martin that I included in the package.

You can use this feature by creating a data attribute like this: data-color for your <li> tags, and set color by hex codes as value. So, when SmarTicker scrolls to specified category, animates category and subcategory colors.

<li data-subcategory="Finance" data-category="Google News" data-color="14ab05"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News" data-color="f45151"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News" data-color="23a0e8"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="14ab05"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News" data-color="cf29b9"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News" data-color="1979ab"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News" data-color="f45151"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="ed4c4c"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News" data-color="cf29b9"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News" data-color="f45151"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
				

5. Add Rss Feed

$('.smarticker6').smarticker({
	theme: 2,
	animation: 'fade',
	controllerType: 2,
	rssFeed: 'http://rss.cnn.com/rss/edition.rss,http://feeds.bbci.co.uk/news/world/europe/rss.xml',
	rssSources: 'CNN,BBC',
	rssCats: 'Top Stories, Europe',
	rssColors: '18bc4e,f67414',
	rssLimit:3,
	speed: 1500
});
					

You can use image instead of Category and SubCategory name, just add image Name or Url in rssCats or rssSources option like this:

$('.smarticker6').smarticker({
	...
	rssCats: 'http://yourdomain.com/imagepath/topstories.png, http://yourdomain.com/imagepath/europe.jpg',
	...
});
					

if images URL are same, you can set another option named imagesPath to url of where your images located:

$('.smarticker6').smarticker({
	...
	rssCats: 'topstories.png, europe.jpg',
	imagesPath: 'http://yourdomain.com/imagepath/'
	...
});						
					

6. Options

You can change default setting to what you want.
Some default options:

$('.target').smarticker({
	theme: 1, 				// Defines SmarTicker Style: 1, 2, 3, 4 ...
					direction: 'ltr',
					layout: 'horizontal',
					animation: 'default',	// Defines transition of news titles: default, fade, slide, ...
					speed: 1000,			// Defines speed of transition for subcategory, category and news
					startindex: 0,			// Starter index
					pausetime: 3000,		// Pause time on each news
					rounded: false,			// Add border radius to parent node
					shadow: true,			// Add box-shadow to parent node
					border: false,			// Add 1px solid border to parent node
					category: true,			// If change this to false, the Category section will not be created
					subcategory: true,		// If change this to false, the Subcategory section will not be created
					titlesection: true,		// Define a title section before news title section
					title: 'Headlines',		// When category and subcategory not available this section will show
					progressbar: false,		// Add a progress bar
					catcolor: true,			// Animate category section background color
					subcatcolor: true,		// Animate sub category section background color
					shuffle:false,			// Shuffles news titles sort order
					rssFeed: '',			// Set your rss feed here and seperate theme with ","
					rssLimit: 10,			// Limit Rss feed
					rssCats: '',			// Set Rss Feed categories comma seperated
					rssSources: '',			// Set Rss Feed Source name comma seperated
					rssColors: '',			// Set color for any rss feed and seperate theme with Comma ","
					showDate:false,			// If this be true, the date will show after news title
					googleApi:true,			// Let Google API parse your rss feed
					feedLoader:'',			// You can use in-built rssloader.php, Upload the file and set url here
					feedsOrder:'older',		// Change sort order of news titles
					linkTarget:'_blank',	// target of the news title links
					controllerType: false,	// Change controller panel themes
					googleFont: true,		// If true, the google font will apply
					imagesPath:'',			// the path of images that may be used in rssCats or rssSources
					developerMode: false	// If this be true, You can see some logs in console
});