Fork me on GitHub
Post Format
July 7, 2011

XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller

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>
View Demo

Related Posts

  1. RSS Driven Dynamic jQuery News Slider Plugin: Dynamic News
  2. XML Driven Breadcrumb Navigation with jQuery: Smart Breadcrumb
  3. jQuery Content Slider :jsCarousel
  4. jQuery Content/Thumbnail Slider V2.0: jsCarousel V2.0
  5. jQuery Sliding Content Bar Plugin: PushUp Content Bar

111 comments

  1. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | news 4niger

  2. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations - Slick Vic Entertainment

  3. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | Good looking DESIGN

  4. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | WebFree.ro

  5. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | DigitalMofo

  6. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | Indoor Digital Billboards

  7. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations : Unlimitedtricks Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos

  8. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | Android News

  9. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations / Photoshop CS6 Download

  10. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations

  11. maria

    11/12/2012 @ 10:41 am

    Where do I put these files to get them to work. I’m new and it doesn’t work like a regular plugin. DO I add it to plugins or where do I place the files?

    Reply

  12. Pingback: 42 Latest jQuery Image and Content Sliders Plugins | i World Updates

  13. Pingback: 40 best slider sliding effect jQuery plugin Web Page Design | Web Page Design Templates | Html5 Template

  15. Pingback: XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller - Clean Business

  16. Pingback: Scripts opensource e gratis Agosto 2011 | Simo Blog

  17. Pingback: 9 Best jQuery Feed Plugins - Design Freebies

  18. Pingback: Your Best Questions About Jquery | Top Apprentice Blog

  19. EXO

    22/05/2012 @ 2:36 pm

    thank you for the reply!

    its like this:

    the URL in the news.xml which will be the destination when you clicked the title on the vscroller is like this –> url=”http://www.egrappler.com/jquery-pushup-content-bar/” … so u’ll b directed to that.

    but what im trying to do is like this:
    url=”article.php?id=”

    …
    my aim is that, when you click the title, it will only take you the news which has that id from the database.

    when u click the title, it will fetch the id of the article from the database and will be on the url, so it’ll be like (article.php?id=1)
    then i can use the $_GET function, get the article base on the id number and display that article only.

    …but my problem is, its not getting the id from the database. it just showed all the articles in my article.php…

    … what am i gonna do????

    Reply
  20. EXO

    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….

    Reply

  21. Pingback: 42 Latest jQuery Image and Content Sliders Plugins | iWorld Updates

  22. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | Developer Junk

  23. Pingback: 40 +新鮮なjQueryの画像やコンテンツスライダープラグイン

  24. ian

    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).

    Reply

  25. 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

  26. ian

    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.

    Reply
  27. ian

    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?

    Reply
  28. ian

    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.

    Reply
  29. Alex

    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 ?

    Reply

  30. Pingback: 10 XML with jQuery Tutorial and Plugins | jQuery4u

  32. Mayalaya

    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

    Reply

  33. Pingback: XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller | TEKNQ

    • Muhammad Shahbaz Saleem

      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>”));

      Reply
  35. The Preacher

    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.

    Reply

  37. Pingback: Be a Professional Developer Using Ultimate jQuery Plugins | Passcomms Android

  39. Pingback: Your Best Questions About Jquery Ajax – Top Apprentice Blog

  40. Sajid Wasim

    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.

    Reply
  41. Shubham Jindal

    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

    Reply

  45. Pingback: 51 Best Useful jQuery Plugins Download And Tutorials | Oktilyon Teknoliyon

  46. wiick

    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!

    Reply
  47. steph

    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.

    Reply
    • Muhammad Shahbaz Saleem

      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.

      Reply

  49. Pingback: Have You Seen These 30 Ajax Plugins Before? | Web Help 101

  50. jester113

    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?

    Reply

  51. 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

  52. Pingback: Backlink Center » Best Of 2011: Best Useful jQuery Plugins And Tutorials

  53. Pingback: Midriff Affiliates

  54. Pingback: 2011年最佳实用的jQuery插件和教程 | Jackchen Design 1984

  55. steph

    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.

    Reply
  56. steph

    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!

    Reply
  57. steph

    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});
    });

    Reply
  58. steph

    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!

    Reply

  59. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | TrolWebDesign

  60. unknown

    29/12/2011 @ 6:01 am

    here’s how i added the images.. edit this line in vscroller.js
    //history.append(getCircle($(this).attr(‘category’), $(this).attr(‘date’)));
    //edit
    var img = $(this).find(‘image’).text();
    history.append(”);
    //history.append(img);
    //end of edited

    and then,check your xml file..
    add new attributes http://img url

    Reply

  61. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins

  62. Pingback: Best Useful jQuery Plugins And Tutorials | GraphicShared | Download Graphic Tools

  63. Pingback: Have You Seen These 30 Ajax Plugins Before? | RockingCode

  64. Pingback: 40 Plugins úteis com jQuery | guilhermekami

  65. Pingback: 40+ Useful and Fresh jQuery Plugins | HeroicTuts.com

  66. Pingback: 40+ Useful and Fresh jQuery Plugins

  68. NigelC

    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.

    Reply
  69. Chris

    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

    Reply
  70. Oscar

    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) {
    …

    Reply
  73. Aakash Jethwani

    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.

    Reply
  75. Plum

    23/08/2011 @ 11:15 pm

    Hi,
    Thank’s for your News plugin code. It’s great.
    I’m not a specialist in XML, so tell me if it’s possible to insert one little picture inside the “news” text (in right) or perhaps, in left column, (remplacement of the css button).

    Thank’s from PAris in France
    Best regards

    Reply
  77. Irfan

    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…

    Reply
      • Oscar

        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.

        Reply
  80. ivan

    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

    Reply
  81. Rob

    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.

    Reply
  82. Rob

    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

    Reply
  83. David

    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

    Reply
  84. kshitij

    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.

    Reply

  85. Pingback: vScroller - HTML and Jquery Script for XML-Driven Vertical News Scroller | SmashZine

Leave a Reply

Required fields are marked *.

*