XML-driven Vertical Information Scroller Script utilizing HTML and jQuery: vScroller
Including scrolling content material to your website or weblog makes a lot of sense – it permits you to show the newest information, promotions, product updates, bulletins, upcoming occasions, calendar gadgets and far more in a restricted house. It additionally allows you to add dynamic content material to in any other case static net pages.
Immediately, we’re that includes vScroller, a free XML-driven vertical information scroller for websites and blogs. Powered by jQuery, vScroller shows categorized, and the color-code content material is a vertical scroll. Feeds came from standardized XML file and styled with easy CSS3 for a bright and enticing interface.
Contents
Main Options
- Colour-Coded Categorized Content material
- Assist with as much as four Completely different Classes (Coded Yellow, Blue, Purple, Inexperienced)
- Adjustable Scroll Pace
- No Graphic Records data/ 100% CSS
- XML Caching
- Customizable Delay for Scrolling to Subsequent Merchandise
Vertical information slider options
- XML pushed
- Graphics based mostly on CSS3
- Information categorization
- Allow/Disable XML caching
- Scroll pace
- Customizable delay earlier than scrolling to subsequent information
Utilizing data scroller
To make use of vertical data scroller, it’s essential to add the next scripts
- A reference to newest jQuery script
- A reference to vscroller.js
- A reference to vscroller.css
After getting added the mandatory text, you only want so as to add a blocking aspect (div) and name the initializer to perform with the required customization utilizing parameters.
<div id="vscroller"></div>
$(doc).prepared(perform());
Vertical Information Scroller Parameters
- newsfeed: URL for XML file containing information.
- Cache: Specifies whether or not you need to reload new XML file every time you net web page refreshes or use the file for browser cache, default is true.
- Pace: Scroll speed, default is 1000 milliseconds.
- Keep: Specifies the delay in milliseconds earlier than scrolling to the following information.
Right here is the construction of the XML feed for our vScroller, be aware the class attribute this can decide the color of the circle on the left of every information entry.
<?xml model="1.Zero" encoding="utf-Eight" ?> <newslist title="Newest Information"> <information class="crimson" url="https://www.egrappler.com/jquery-pushup-content-bar/" date="01-01-2011"> <headline>jQuery Sliding Content material Bar Plugin</headline> <element>You wouldn't have to be a muscular large to know the advantages of push ups. Push up is nice to maintain you lively, good, robust and fast identical to the PushUp Content material Bar that we're releasing in the present day.</element> </information> <information class="inexperienced" url="https://www.egrappler.com/rss-driven-dynamic-jquery-news-slider-plugin-dynamic-news/" date="02-01-2011"> <headline>jQuery Information Slider Plugin</headline> <element>Dynamic Information is a jQuery information slider plugin that makes information integration to your website very simple. Dynamic Information plugin helps two methods so as to add information information. You'll be able to both enter your information by way of HTML markups manually or let Dynamic Information plugin load the information from rss feed and construct the mandatory HTML markups mechanically.</element> </information> <information class="blue" url="https://www.egrappler.com/jquery-contentthumbnail-slder-v2-Zero-jscarousel-v2-Zero/" date="03-01-2011"> <headline>jQuery Carousel Slider Plugin</headline> <element> jsCarousel v2.Zero is a jquery slider plugin that slides contents in multi course. Now it helps each horizontal and vertical orientation, see the display screen shot under. jsCarousel v2.Zero slider can be utilized as a function content material slider as properly. You'll be able to put any sort of contents you need whether or not pictures, textual content, movies, information and so on. it is as much as you.</element> </information> <information class="yellow" url="https://www.egrappler.com/jquery-pagination-plugin-smart-paginator/" date="04-01-2011"> <headline>jQuery Pagination Plugin</headline> <element>Sensible Paginator is a complete jQuery Pagination plugin that makes including pagination quite simple activity, all of the navigation logic is in-built and it is usually very customizable. Sensible Paginator jQuery Pagination plugincan additionally filter your information mechanically on consumer aspect.</element> </information> </newslist>
vScroller Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
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.
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?
Just place them in any directory in your web server.
Hello, nice script! I would like to have the feed scroll down, not up. Is it possible to change the scrolling direction?
Thanks,
Bill
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! 🙂
Your script doesn´t work locally in chrome…
You need to run it from a web server to get it work. This is required to read the xml file from javascript.
Salam
Is there a way of getting it to scroll downwards instead of upwards?
peace
ps. Awesome script!!!
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:
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????
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….
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.
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).
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.
Salam
Your script works very well in Firefox. However it does not load (or is not visible) in Google Chrome and Opera.
Any suggestions?
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.
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 ?
Yes, it work the way you want it to. To make it scroll continuously plugin code needs lot of changes.
Is there a way to allow all the scroller to display all the content and not truncate?
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.
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
Dear,
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
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>”));
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.
You might have javascript disabled, check your browser’s settings.
Demo runs, downloaded source doesn’t (Internet Explorer 9).
What’s wrong?
Sorry it runs … always! Web server needed 🙂
Great job.
Hello I want the news to scroll even when my mouse is in?
what should I change?
All the best
Just comment the lines from 53-63
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.
Yes, that would be helpful. send me your code here admin@egrappler.com
I was able to change the dates in correct format but still the downloaded code is not running in chrome
You need to put your code on web server to get it working.
Ya!It’s giving random dates.Please tell what’s the correct format of dates.
The Demo is working in chrome but the downloaded code is not working in chrome.
Are you running from local file system?
Hi.
How Can I change the dates and it’s still not working in Chrome.
Please help.
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!
Can you specifically tell what’s not working?
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.
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.
very nice, but dates DON’T WORKING (days)
please fix it…
thx
Which browser you are using, its working everywhere, I just checked on IE, Chrome and FireFox.
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?
check it now, its been fixed.
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.
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!
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});
});
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!
how do i set height auto for each news div
if i do text comes down n leaves space above
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
Very nice, but … the demo shows “NaNth” and not number / month : / …
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.
Date issue has been fixed, you can grab the latest code from the plugin page.
Nice script.
But I’m having difficulties trying to run it from a file in the root of my server.
Please help
Can you tell me specifically what issue you are facing with new slider plugin.
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) {
…
In the date only apear “NaNth”
Grab the latest script it has been fixed courtesy “Oscar”
Dood, you’re a freakin’ genius. Sweet plugin.
Very useful post.
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
It does not work with IE8.
Any feedback about how to make it compliant?
Thanks.
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…
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
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.
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.
its really cool
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
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.
You need to modify the xml as well as the script that renders the html
Please tell how can I change the dates and also it’s not working in chrome.
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
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
why is the script not working when i am trying to run it in chrome and ie,while it runs in mozilla.