XML-driven Vertical Information Scroller Script utilizing HTML and jQuery: vScroller

You may also like...

75 Responses

  1. camilla says:

    Hi, I am new to java … I wanted to know if it is possible to change the date format to dd-mm-aaa. thanks for your attention and good work.

  2. maria says:

    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?

  3. BIll says:

    Hello, nice script! I would like to have the feed scroll down, not up. Is it possible to change the scrolling direction?


  4. foxpaw says:

    Love the script! works brilliantly in FF and Chrome (which I love) and I face the same “gotta use PIE.htc” issues with IE … but … I have another issue in IE that is driving me bonkers.

    when scroll is running, my footer jumps up under the scroll. Literally, it “jumps” up under it. I can move my mouse over the scroll, the footer jumps back down – then it jumps back up after a second. I have looked at my code, versus code on your demo, and can see nothing odd. I am using a 960 Grid to set my content, have z-indexes in place and am using “clearfix” in my div tag. I can send you source code (minus images – this site is still in dev as well) if that will help. Thanks! 🙂

  5. Raquel says:

    Your script doesn´t work locally in chrome…

  6. Ba says:


    Is there a way of getting it to scroll downwards instead of upwards?


    ps. Awesome script!!!

  7. EXO says:

    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=”https://www.egrappler.com/jquery-pushup-content-bar/” … so u’ll b directed to that.

    but what im trying to do is like this:

    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????

  8. EXO says:

    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??

  9. ian says:


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

  10. ian says:

    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:


    Then it works. Much thanks bro.

  11. ian says:


    Your script works very well in Firefox. However it does not load (or is not visible) in Google Chrome and Opera.

    Any suggestions?

  12. ian says:

    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.

  13. Alex says:

    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 ?

  14. Lee says:

    Is there a way to allow all the scroller to display all the content and not truncate?

  15. Mayalaya says:

    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.


  16. Ismet says:


    please tell me how vertical news scroller can open the link in new browser window?

    Thank you, Ismet

    • You need to modify line # 41 in vscroller.js file
      description.append($(‘<h1/>’).html(“<a href='” + url + “‘ rel=”nofollow”>” + htext + “</a>”));
      description.append($(‘<h1/>’).html(“<a href='” + url + “‘ target=’blank’ rel=”nofollow”>” + htext + “</a>”));

  17. The Preacher says:

    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.

  18. Simone says:

    Demo runs, downloaded source doesn’t (Internet Explorer 9).
    What’s wrong?

  19. Iva says:

    Hello I want the news to scroll even when my mouse is in?
    what should I change?
    All the best

  20. Sajid Wasim says:

    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.

  21. Shubham Jindal says:

    I was able to change the dates in correct format but still the downloaded code is not running in chrome

  22. Shubham Jindal says:

    Ya!It’s giving random dates.Please tell what’s the correct format of dates.

  23. Shubham Jindal says:

    The Demo is working in chrome but the downloaded code is not working in chrome.

  24. Shubham Jindal says:

    How Can I change the dates and it’s still not working in Chrome.
    Please help.

  25. wiick says:

    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!

  26. steph says:

    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.


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

  27. carlo says:

    very nice, but dates DON’T WORKING (days)
    please fix it…


  28. jester113 says:

    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?

  29. steph says:

    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.

  30. steph says:

    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!

  31. steph says:

    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!


    $(‘#vscroller’).vscroller({newsfeed:’news_employee.xml’, speed:1000,stay:2000,cache:false});

    $(‘#vscroller’).vscroller({newsfeed:’news_company.xml’, speed:1000,stay:2000,cache:false});

  32. steph says:

    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!

  33. unknown says:

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

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

  34. Ste says:

    Very nice, but … the demo shows “NaNth” and not number / month : / …

  35. NigelC says:

    Date does not display properly in Firefox or Opera. All that appears is:


    Alternative CSS has to written for it to work in IE.

    Seems promising but needs work to go into a production environment.

  36. Chris says:

    Nice script.

    But I’m having difficulties trying to run it from a file in the root of my server.

    Please help

  37. Oscar says:


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

  38. Mike says:

    In the date only apear “NaNth”

  39. drbyers says:

    Dood, you’re a freakin’ genius. Sweet plugin.

  40. Andrew Hope says:

    Very useful post.

  41. Plum says:

    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

  42. Mariano says:

    It does not work with IE8.
    Any feedback about how to make it compliant?

  43. Irfan says:

    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…

  44. Rama says:

    Date is not working using current XML. Please verify and suggest me changes in your JS file.

    • Make sure you are using correct date format

      • Oscar says:


        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.


  45. bajwa says:

    its really cool

  46. ivan says:

    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

  47. Rob says:

    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,

    ps.: please excuse my bad english, i’m german.

  48. Rob says:

    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,

  49. David says:

    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

  50. kshitij says:

    why is the script not working when i am trying to run it in chrome and ie,while it runs in mozilla.

Leave a Reply

Your email address will not be published. Required fields are marked *

Make sure you enter correct answer before you hit \'Send\' button *