jRollingNews powered by scriptosaur.com
Buy from
Buy from
jRollingNews is the jQuery plugin that helps you display any RSS feed in a professional manner.

3 easy steps installation, and no server-side code needed.
You want to inform your visitors about new features in your site or about a product sale?

Just add a title and the content you like and advertise in style.
How to install?
Display any RSS feed
Display custom content
Generate your code
Adding jRollingNews to your page is trully easy. Just follow the 3 steps described bellow.
Step 1. Importing the resourses to your page

If you don't have jQuery already imported in your page, add jQuery. The <script> tag is added to the <head> part of your page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Import jRollingNews plugin and styles. jGFeed is needed to avoid using any serverside code to read RSS feeds. The <script> and <link> tags are added to the <head> part of your page:
<script type="text/javascript" src="js/jquery.jgfeed.js"></script>
<script type="text/javascript" src="js/jRollingNews.js"></script>
<link rel="stylesheet" type="text/css" href="css/jRollingNews.css"/>
Step 2. Add the initialization element to your page

To avoid any interference with other functions running on your site, add the initialization element direcly to your <body> tag.
<div id="bar_1"></div>
Step 3. Initialize the bar
Don't forget you can use the Generate your code tab to get your initialization function.
Add the script rigth before your </body> tag.
<script>
	$('#bar_1').jRollingNews({
		'feed':'http://news.yahoo.com/rss/business'
	});
</script>
The 'feed' parameter allows you to import any RSS feed link
Don't forget you can use the Generate your code tab to set up your parameters.
Add the script rigth before your </body> tag.
<script>	
	$('#bar_1').jRollingNews({
		'feed':'http://news.yahoo.com/rss/business'
	});
</script>
Initialize a new bar on this page, using the RSS feed from Deploy BarRemove added bars
The 'content' parameter allows you to display any custom content.
Please keep in mind that 'content' and 'feed' exclude each other. If you provide the 'content' parameter, 'feed' will be ignored.
Don't forget you can use the Generate your code tab to set up your parameters.
Add the script rigth before your </body> tag.
<script>	
	var content_bar_1=new Array(
		{
			'title':'scriptosaur.com releases jRollingNews',
			'content':'jRollingNews is the jQuery plugin that helps you display any RSS feed in a professional manner.'
		},
		{
			'title':'this is just some text',
			'content':'this is another text for testing purooses'
		}
	);
	
	$('#bar_1').jRollingNews({
		'content':content_bar_1
	});
</script>	
The code generator allows you to customize your bar to achieve the best results.
All parameters are listed here, with the default values delivered when you download the plugin. Feel free to play with the values and click Preview Bar to see the results.
When you are done, click Generate Code and copy your code.
All parameters are optional.
Just update what you want changed and the rest will use default values.
content OR feed
Add the url for the desired RSS feed
Customize the content displayed in the bar
Title
Content
URL

Add a RSS feed OR custom content to your bar. Use the corresponding popup to add your content.
background_color
What background color you want for the bar? This will also be inherited by the popups opened from this bar.
text_color
What color will the text from the bar and popup have?
pop_links_color What color will the links from feeds have?
popup_title_color What color will the popup title have?
position You want the bar displayed on the top or on the bottom of the page?
scroll_speed How fast you want the bar to roll? Please feel free to try and see whay fits your needs best.
opacity 0 to 100. The background trabsparency. 0 means it is completely transparent, 100 it will be completely opaque. This will also be inherited by the popups opened from this bar.
line_height The height of your bar.
open_popup_links_in_new_page Usually, links from feeds will load in the same tab as your page. If set to true, then your page will remain opened when links from feeds are clicked.
font_family The css font-family used for the bar. Default, it is inherited from the page.
number_of_retreived_feeds How many feed entries do you want displayed in the bar?
minimize_at_start If true, then the bar will be minimized after initialization.
loop_for How many times do you want your bar to loop for? After the set number of loops, 'after_loops' parameter will be triggered.
after_loops What will the bar do after the set number of loops is reached? This is used only used when 'loop_for' is different then 0.
padding_bottom true adds padding to the bottom your page equal with the bar's height. This is useful if you want the content of your page always visible.
padding_top true adds padding to the top your page equal with the bar's height. This is useful if you want the content of your page always visible.
remove_last_separator true removes the last bullet from the list. This is useful when you have only one item in the list (see top bar on this page as an example)
bars_z_index In case you have multiple layers in your page, increase this so the bars will be displayed over any element.
popup_min_width The popup width will never go under this value.
popup_max_width The popup width will never go over this value.
scroll_rss_content Set to true if you want the rss content to be scrolled in the bar also. Use this when you do not have the ability to click on titles in the bar.
hide_title_for_scrolled_content Only used if scroll_rss_content is set to true. When this is set to true, the title will not be displayed anymore in the bar, since the content is scrolled.
refresh_news_timer Time interval to refresh the RSS content. In minutes. 0 means RSS never get refreshed.
Want to give it a try?

Preview Bar Generate Code
				
					
jRollingNews powered by scriptosaur.com