Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages.
Today, we are featuring vScroller, a free XML-driven vertical news scroller for websites and blogs. Powered by jQuery, vScroller displays categorized and color-code content is a vertical scroll. Feeds come from standardized XML file and styled with simple CSS3 for a clean and attractive interface.
Major Features
- Color-Coded Categorized Content
- Support for up to 4 Different Categories (Coded Yellow, Blue, Red, Green)
- Adjustable Scroll Speed
- No Graphic Files/ 100% CSS
- XML Caching
- Customizable Delaye for Scrolling to Next Item
Vertical news slider features
- XML driven
- Graphics based on CSS3
- News categorization
- Enable/Disable XML caching
- Scroll speed
- Customizable delay before scrolling to next news
Using news scroller
To use vertical news scroller you need to add the following scripts
- A reference to latest jQuery script
- A reference to vscroller.js
- A reference to vscroller.css
Once you have added the necessary script you just need to add a block element (div) and call the intializer function with the required customization using parameters.
<div id="vscroller"></div>
$(document).ready(function(){
$('#vscroller').vscroller({newsfeed:'news.xml', speed:1000,stay:2000,cache:false});
});
Vertical News Scroller Parameters
- newsfeed: URL for XML file containing news.
- cache: Specifies whether you want to reload new XML file each time you web page refreshes or use the file for browser cache, default is true.
- speed: Scroll speed, default is 1000 milliseconds.
- stay: Specifies the delay in milliseconds before scrolling to next news.
Here is the structure of the XML feed for our vScroller, note the category attribute this will determine the color of the circle on the left of each news entry.
<?xml version="1.0" encoding="utf-8" ?>
<newslist title="Latest News">
<news category="red" url="http://www.egrappler.com/jquery-pushup-content-bar/" date="01-01-2011">
<headline>jQuery Sliding Content Bar Plugin</headline>
<detail>You do not have to be a muscular giant to know the benefits of push ups. Push up is good to keep you active, smart, strong and quick just like the PushUp Content Bar that we are releasing today.</detail>
</news>
<news category="green" url="http://www.egrappler.com/rss-driven-dynamic-jquery-news-slider-plugin-dynamic-news/" date="02-01-2011">
<headline>jQuery News Slider Plugin</headline>
<detail>Dynamic News is a jQuery news slider plugin that makes news integration to your web site very easy. Dynamic News plugin supports two ways to add news data. You can either enter your news via HTML markups manually or let Dynamic News plugin load the news from rss feed and build the necessary HTML markups automatically.</detail>
</news>
<news category="blue" url="http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0/" date="03-01-2011">
<headline>jQuery Carousel Slider Plugin</headline>
<detail>
jsCarousel v2.0 is a jquery slider plugin that slides contents in multi direction. Now it supports both horizontal and vertical orientation, see the screen shot below. jsCarousel v2.0 slider can be used as a feature content slider as well. You can put any kind of contents you want whether images, text, videos, news etc. it's up to you.</detail>
</news>
<news category="yellow" url="http://www.egrappler.com/jquery-pagination-plugin-smart-paginator/" date="04-01-2011">
<headline>jQuery Pagination Plugin</headline>
<detail>Smart Paginator is a comprehensive jQuery Pagination plugin that makes adding pagination very simple task, all the navigation logic is built in and it is also very customizable. Smart Paginator jQuery Pagination plugincan also filter your data automatically on client side.</detail>
</news>
</newslist>
Related posts:
16/05/2012 @ 4:53 pm
Hi THERE!
this is what im looking for!
but i have my news on a database and i want this news scroller to get it from there.
is it possible to embed PHP in XML?? im a newbie… if not what should i do??
PLEASE HELP….
17/05/2012 @ 9:37 am
Why do you want to embed PHP in XML? You only need to read you news for database and write the XML file the vScroller will do the rest.
Pingback: 42 Latest jQuery Image and Content Sliders Plugins | iWorld Updates
Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | Developer Junk
Pingback: 40 +新鮮なjQueryの画像やコンテンツスライダープラグイン
25/04/2012 @ 9:50 pm
Salam
Question: I only want the contents of the xml file to show up in the browser. I managed to edit the css file to achieve such. What sections of the script code can I safely comment-out in order to avoid useless computations (the date and the circles etc).
Pingback: Best Of 2011: Best Useful jQuery Plugins And Tutorials Don't Forget to participate in a contest where you can win the world's biggest user interface elements pack "Futurico UI Pro" for your design projectsi | creativectors.com
21/04/2012 @ 9:50 pm
It works. My mistake. Even if the file is stored on the Local server you cant drag and drop the file in the browser (at least with chrome). You need to actually type in the IP address like so:
localhost/vscroller/
Then it works. Much thanks bro.
21/04/2012 @ 4:05 pm
Salam
Your script works very well in Firefox. However it does not load (or is not visible) in Google Chrome and Opera.
Any suggestions?
21/04/2012 @ 7:06 am
Excellent plugin.
I’m running it off my localhost apache server. Only works in ff. Not in chrome or Opera. Have not tried IE yet (don’t have a windows box).
Any ideas how to fix the ff opera issues.
18/04/2012 @ 2:04 pm
Hi there, thanks heaps for posting such a great script.
I’m just trying to work out how to change it so it doesn’t stop in-between, I”ve tried changing the wait parameter but that doesn’t seem to work entirely.
Any tips ?
19/04/2012 @ 10:26 am
Yes, it work the way you want it to. To make it scroll continuously plugin code needs lot of changes.
Pingback: 10 XML with jQuery Tutorial and Plugins | jQuery4u
13/04/2012 @ 10:31 am
Is there a way to allow all the scroller to display all the content and not truncate?
13/04/2012 @ 10:52 am
Just comment lines 43-45 in vscroller.js file for the time being. I’ll update the plugin with an extra parameter to give user control over the length of text.
10/04/2012 @ 5:31 pm
Hi, there.
I love this newsscroller – but it wont work in IE.
I just get squares instead of cirkles.. and the text is placed on the left.
When I look at it in Firefox it looks allmost ok
I allso can’t seem to figure out how to get the text placed right.. this allso looks different in EI and Firefox.
Can you please help? I’m not great at scripting, so I might need specific details.
Thanks
11/04/2012 @ 7:44 am
Since IE blow version 9 doesn’t support border radius, you need to include pie.htc
Pingback: XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller | TEKNQ
29/03/2012 @ 8:35 am
Dear,
please tell me how vertical news scroller can open the link in new browser window?
Thank you, Ismet
30/03/2012 @ 10:21 am
You need to modify line # 41 in vscroller.js file
from
description.append($(‘<h1/>’).html(“<a href=’” + url + “‘ rel=”nofollow”>” + htext + “</a>”));
to
description.append($(‘<h1/>’).html(“<a href=’” + url + “‘ target=’blank’ rel=”nofollow”>” + htext + “</a>”));
23/03/2012 @ 8:06 pm
The scroller does not functions both on a local PC and in a Web Server under IIS 6.0 / Windows Server 2003.
The page does not generate any error message.
I’ve simply copied the contents of the zip file and called the html page.
I verified also the noaths and filenames containing the external files needed (the xml file, the vscroller.js and the jquery plugin), and it seems completely error free.
What is wrong? Can anyone help me ?
Many thanks. An email answer is preferred.
25/03/2012 @ 8:08 pm
You might have javascript disabled, check your browser’s settings.
16/03/2012 @ 12:18 pm
Demo runs, downloaded source doesn’t (Internet Explorer 9).
What’s wrong?
16/03/2012 @ 12:29 pm
Sorry it runs … always! Web server needed
Great job.
Pingback: Be a Professional Developer Using Ultimate jQuery Plugins | Passcomms Android
26/02/2012 @ 3:26 pm
Hello I want the news to scroll even when my mouse is in?
what should I change?
All the best
28/02/2012 @ 5:45 am
Just comment the lines from 53-63
Pingback: Your Best Questions About Jquery Ajax – Top Apprentice Blog
11/02/2012 @ 6:46 am
Salam Mr. Saleem,
Thanks for a great plugin. But it is not working in Chrome or IE9. No error but only the background image loads nothing else. Just download your new version and trying to plug it in ASP.Net 2.0. I wish I could send you attachment.
13/02/2012 @ 6:05 am
Yes, that would be helpful. send me your code here admin@egrappler.com
10/02/2012 @ 5:55 pm
I was able to change the dates in correct format but still the downloaded code is not running in chrome
13/02/2012 @ 6:11 am
You need to put your code on web server to get it working.
10/02/2012 @ 5:15 pm
Ya!It’s giving random dates.Please tell what’s the correct format of dates.
10/02/2012 @ 4:50 pm
The Demo is working in chrome but the downloaded code is not working in chrome.
13/02/2012 @ 6:12 am
Are you running from local file system?
10/02/2012 @ 4:33 pm
Hi.
How Can I change the dates and it’s still not working in Chrome.
Please help.
Pingback: 51 Best Useful jQuery Plugins Download And Tutorials | Oktilyon Teknoliyon
03/02/2012 @ 7:38 am
Hey, great plugin! Working great, then checked it in ie 9 and its not rendering out. Any ideas?? Greatly appreciate the help and great service!
20/02/2012 @ 8:30 am
Can you specifically tell what’s not working?
01/02/2012 @ 10:11 pm
I need to implement a dynamic version of this.
I’ve created a php file that outputs the xml and in the “newsfeed” attribute in the script, I’ve put the php file name, but it doesn’t render.
Can you help? this is really important.
You didn’t reply to my dates questions, but you are replying to others. Please reply to this. I like your scroller and have 3 working implementations in my site, but cannot get the dynamic version to work.
thanks.
02/02/2012 @ 8:03 am
Sorry if I couldn’t reply your previous comment, I received lots of requests for that date fix, which is fixed now. You can get the latest source from the plugin page. For your current question you need to make sure that your php file is returning proper xml. If you need more assistance you can send me your sample code, that would be easy for me figure out the problem.
26/01/2012 @ 5:47 pm
very nice, but dates DON’T WORKING (days)
please fix it…
thx
08/02/2012 @ 12:13 pm
Which browser you are using, its working everywhere, I just checked on IE, Chrome and FireFox.
Pingback: Have You Seen These 30 Ajax Plugins Before? | Web Help 101
19/01/2012 @ 4:01 am
how come this doesnt work on chrome? it also shows nanth in firefox. it only works perfectly on IE…and this is from the test page i got from the zip file i downloaded here. is this limited to IE or is there a way to make it for cross browsers?
19/01/2012 @ 2:31 pm
check it now, its been fixed.
Pingback: Best Of 2011: Best Useful jQuery Plugins And Tutorials Don't Forget to participate in a contest where you can win the world's biggest user interface elements pack "Futurico UI Pro" for your design projectsi | craetivectors.com
Pingback: Backlink Center » Best Of 2011: Best Useful jQuery Plugins And Tutorials
Pingback: Midriff Affiliates
Pingback: 2011年最佳实用的jQuery插件和教程 | Jackchen Design 1984
01/01/2012 @ 5:02 pm
Back again… the dates simply aren’t working. I have tried dd/mm/yyyy, d/m/yyyy, mm/dd/yyyy, m/d/yyyy and ive even tried rearranging which is grabbed first (month vs. day-according to some other forums). Nothing is working and the dates are just plain weird and non-sensical. HELP! Please. and thank you.
01/01/2012 @ 4:22 pm
Much of my “solved” post was cut out, so suffice to say, try to differentiate the instances you’re trying to run and use an if or case (if more than 2 instances are needed)!!!
Hope it helps-happy 2012!
01/01/2012 @ 4:20 pm
RUNNING 2 INSTANCES of SAME PLUGIN: SOLVED! I had specific parameters for which pages/places I wanted to run the plugin and was able to accomplish this by using a simple if statement. Hope this helps someone!
0)
{
?>
$(document).ready(function(){
$(‘#vscroller’).vscroller({newsfeed:’news_employee.xml’, speed:1000,stay:2000,cache:false});
});
$(document).ready(function(){
$(‘#vscroller’).vscroller({newsfeed:’news_company.xml’, speed:1000,stay:2000,cache:false});
});
01/01/2012 @ 3:32 pm
AMAZING plug-in! Thank YOU!!! Is there a way to use it more than one time on the same site? For example, can i change “#vscroller” to “#vscroller2″? I tried setting up two instances with different .xml feeds, but it’s not working.
Thanks again and happy 2012!
Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | TrolWebDesign
Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins
Pingback: Best Useful jQuery Plugins And Tutorials | GraphicShared | Download Graphic Tools
Pingback: Have You Seen These 30 Ajax Plugins Before? | RockingCode
Pingback: 40 Plugins úteis com jQuery | guilhermekami
Pingback: 40+ Useful and Fresh jQuery Plugins | HeroicTuts.com
Pingback: 40+ Useful and Fresh jQuery Plugins
26/11/2011 @ 9:13 pm
Very nice, but … the demo shows “NaNth” and not number / month : / …
08/11/2011 @ 6:41 pm
Date does not display properly in Firefox or Opera. All that appears is:
NaNth
…
Alternative CSS has to written for it to work in IE.
Seems promising but needs work to go into a production environment.
20/02/2012 @ 9:09 am
Date issue has been fixed, you can grab the latest code from the plugin page.
01/11/2011 @ 9:05 am
Nice script.
But I’m having difficulties trying to run it from a file in the root of my server.
Please help
20/02/2012 @ 9:21 am
Can you tell me specifically what issue you are facing with new slider plugin.
13/10/2011 @ 11:19 pm
Hi,
A quick tip, if tested locally (No Webserver) won’t work if you don’t add correct “datatype” to ajax call in vscroller.js. Anyway, it’s a good practice to use it always.
…
url: settings.newsfeed,
type: ‘GET’,
cache: settings.cache,
dataType: “xml”, // Add this.
success: function (xml) {
…
06/10/2011 @ 3:08 pm
In the date only apear “NaNth”
20/02/2012 @ 9:45 am
Grab the latest script it has been fixed courtesy “Oscar”
28/09/2011 @ 5:02 pm
Dood, you’re a freakin’ genius. Sweet plugin.
24/09/2011 @ 1:16 pm
Hi… Great jquery….
I m a beginner…. I hardly work with XML with Jquery… Can You please help Me with this…
I Want To Add image For the Respective News in the Place Of The Date that is shown in the button…
Secondly, Can We have the Date in left bottom of the sliding new content simply in Text and with out any Button…
Thanking you.
15/09/2011 @ 3:52 pm
Very useful post.
14/08/2011 @ 3:45 am
Shahbaz brother.. This shows some vague dates and not the ones which i specify.. Can u kindly let me know where i m wrong or where do i need to make changes…
04/08/2011 @ 6:08 am
Date is not working using current XML. Please verify and suggest me changes in your JS file.
09/08/2011 @ 3:55 am
Make sure you are using correct date format
14/10/2011 @ 12:51 am
Hello,
Muhammand, a better answer is … “Make sure you are using the correct date function”.
@ Irfan, @Rama.
The reason it is not working is because getDay() method is used and that’s wrong !
d.getDay(), Returns the day of the week (from 0-6)
The method that must be used is getDate():
d.getDate() Returns the day of the month (from 1-31)
Reference: http://www.w3schools.com/jsref/jsref_obj_date.asp
So vscroller.js needs to be modified to:
…
switch (d.getDate()) {
case 1:
…
Also, end user should be advised that the date format in XML fiile must be:
date=”10-11-2011″ (Month, Day, Year)
and that getCircle function could/should be modified to match locale or language conventions.
Regards.
20/02/2012 @ 9:34 am
Ah! my bad I didn’t notice it, yes indeed getDate() is the correct fucntion instead of getDaty(). You are absolutely right. Thank you so much for your valuable comments.
01/08/2011 @ 11:50 am
its really cool
31/07/2011 @ 12:27 am
hi great plugin!
I was just wondering if there is a way to make the headlines scroll horizontally?
So for example i can display 4 headlines one beneath the other and have it cycle through the list in a horizontal fashion like credits at end of a movie?
Is this possible and how would one achieve it.
Thanks again for great article
25/07/2011 @ 11:06 am
Hi, very nice script! Well done! Worked right out of the box!
I have one little question:
I am totally new to XML and stuff like that, is there any possibilty to show an “linked thumbnail image” instead of displaying this gradient-circle?
It would be great, if somenone can please post the markup as well as the (simplexml?) code to display image in html-content.
Thanks & Kind Gerards,
Rob
ps.: please excuse my bad english, i’m german.
09/08/2011 @ 5:29 am
You need to modify the xml as well as the script that renders the html
10/02/2012 @ 4:37 pm
Please tell how can I change the dates and also it’s not working in chrome.
25/07/2011 @ 1:19 am
Good Job!!! Like this script!
Is there any possibility to display a individual-linked- thumbnail instead of the gradient/circle?
I am very new to XML and stuff, so it would be great if i can get some help for using your nice script.
Need the XML Code…
Kind Regards,
Rob
21/07/2011 @ 4:00 am
There is an error in the way that the dates are rendered.
In the vscroller.js file, change all of the d.getDay to d.getDate in the getCircle function and it will function correctly
15/07/2011 @ 8:11 am
why is the script not working when i am trying to run it in chrome and ie,while it runs in mozilla.
Pingback: vScroller - HTML and Jquery Script for XML-Driven Vertical News Scroller | SmashZine