Discussion on jQuery TimelineXML

Discussion on jQuery TimelineXML

Cart 891 sales

nickys supports this item


This author's response time can be up to 1 business day.

104 comments found.

Hi all, Working in HTML. Can someone let me know how I can only show 1 month on the timeline? I’d like to only show the next 31 days. Is it possible? Thanks in advance.


Please, submit a ticket to me using our support system:


My code is working fine but it is displaying the entire year, from January to December. As the events are very close I would only exhibit the months in which the events occur. How do I do?

I replied to your message in our live chat. :)

i can not install in my site and error massage ” The package could not be installed. No valid plugins were found.

Plugin install failed.”

Hello, This is jQuery version of the plugin. If you try to install it in WordPress environment will be unsuccessful. I suggest you to see the documentation of the plugin and how you can use it. The documentation is located in the package, which you have dowloaded when you had bought the plugin.

Hi there, It is posible to show multiple timelines (each one with his data)? Ive tried but the points appear in the first timeline only…

My code in markup (i remove the < and / > ): div id=”tmlA” style=”margin:100px; border:2px solid silver; width: 1000px; height:8px;” div id=”tmlB” style=”margin:100px; border:2px solid orange; width: 1000px; height:8px;”

In js: $(document).ready(function () { $(’#tmlA’).timelinexml({ src: ‘TimeLineA.xml’ }); $(’#tmlB’).timelinexml({ src: ‘TimeLineB.xml’ }); });

The error says: Línea: 101 Error: El objeto no acepta la propiedad o el método ‘getElementsByTagName’


Can you please try using HTML code instead of XML? If you are still having issues please send us a support ticket.


Hi, is there any methods or events? I see nothing in the documentation. For example, a method to add an event, refresh the data etc etc. I kind of expected the plugin to have these types of hooks.

also is there a way to set a class on the different nodes? I want to color the nodes different depending on what they are. If I could just pass in a class or something that would work…

Any help?


I’m sorry but the plugin doesn’t offer any of that. If you don’t think that would work for you, please contact Envato for a refund.


Hi Nickys,

Client ask me make their site responsive. I found that they used your plugin. So question – Is there any way to make timeline vertical?



Sorry but I don’t offer support for customizations and what you are asking requires substantial changes to the code base.


so answer – no, plugin don’t support vertical position. right?


How do you add multiple timelines on a page?


Please refer the documentation for a detailed explanation on how to include a timeline in a page. Including several timelines is just the same.


Can it be used with drupal? Is there a guide for that in the documentations?

It’s not documented, you will have to implement it yourself – just like a normal jquery plugin.

Can be a scroll left and right? Can I integrate my MySQL table?

No sorry, it can’t scroll. The plugin doesn’t offer any MySQL functionality, you will have to implement that yourself.


Hi Nick,

I have purchased the plugin and have been successful in its implementation but am having a problem in IE8 (which this should still work in). When the site loads in IE8 there are two js error messages and then the timeline text all appears at the top of the page layered one on top of the other which essentially looks like a big tangle of event text.

Any thoughts on why this might be happening in IE8 only? I tried to create an account on your support website but with no success so I am writing to you here instead. Any help would be much appreciated! Thanks in advance!

Here is a screenshot in case it is helpful

please help me! I cannot get the plugin to work with the xml files. I uploaded to my server, and it still doesn’t work. Anyone who can help me at all, it would be GREATLY appreciated. Thanks.

THE FIX FOR XML NOT WORKING: in the timelinexml.js file, scroll down until you see a line of code as such…

{var target = $(this);
if (settings.src.length != 0) {
    settings.mode = 'html';
    view.init({ target : target, mode : 'html' });

all you have to do is change the ”!=” to ”==”

This reads from the html file---    (settings.src.length != 0  {

This reads from the xml file-- (settings.src.length == 0 {

ALSO: nickys is right when he says that this xml WILL NOT load if you are not running it from a local host program such as ‘xampp’ or running it off of a server.

I hope this helps anyone who is having problems.

The Plugin doesn’t Work! I just get a Error back: “TypeError: ‘undefined’ is not an object (evaluating ‘[].position’)”

Pretty cool plugin. The support sucks. I should say zero support. NO returned emails no response in forum.


Previously I was using html events, now i have decided to use xml and while trying that on local server it did not showed any thing from xml file.

I am using same xml and used same steps which you provided in document but then also it is notshowing


How to: we are using these dates 01.01.45, 10.12.55, etc. This is the only way we can get it work. If we just use the year it doesn’t work. WE would like to only use the year. One entry per year so we don’t confuse things. We make up the date and the month. the problem is that when we go to the display the entries on the timeline. it will show the date and the title concatenated in the display. for example it will show “01.01.45 Grand Opening” the year is right but the day/month is made up. can we only show the title? or can we tell the sytem that we are only using the year. so we don’t have to make up the day/month. does this make sense?

not using xml file


I just purchased the script, and was wondering: is there a way to have a timespan less than a year?

I would like to have a timeline displaying a month only, and to have days of the months displayed (instead of having months over a year).

Thanks in advance for your help!

Hello. Can I make it vertical? This script is cool, but I trying to make it responsive. Is there any way to do it?

Hey, very nice work! But we have tried to install it on Drupal 7.22 for a couple of weeks now and unfortunately we can’t set it up to work properly… It’s simply not shown on the web. Clearing Drupal’s and browser’s caches doesn’t change anything. Even the demo version does not work… Can you please explain how to install TimelineXML on Drupal??? We are totally stumped… Thank you and best regards!

Well, first you need to see if you are using the plugin with an XML file, or with HTML content. XML requires a web server for the demo to run. It’s all explained in the docs.

We’re in trouble using XML file. That’s our code:

<!doctype html> <!-- --> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!-- Consider adding a manifest.appcache: --> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Use the .htaccess and remove these lines to avoid edge case issues. More info: --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <!-- Mobile viewport optimized: --> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory: --> <link rel="stylesheet" href="css/style.design4.css"> <link rel="stylesheet" href="css/timelinexml.basic.css"> <!-- More ideas for your <head> here: --> <!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5 elements & feature detects; for optimal performance, create your own custom Modernizr build: --> <script src="js/libs/modernizr-2.0.6.min.js"></script> </head> <div id="my-timeline"> </div> <!-- JavaScript at the bottom for fast page loading --> <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> <script src=""></script> <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <!-- scripts concatenated and minified via build script --> <script defer src="js/plugins.js"></script> <script defer src="js/mylibs/timelinexml.js"></script> <script defer src="js/script.js"></script> <!-- end scripts -->

But nothing is being displayed, and in Chrome log, I receive this error: Uncaught TypeError: Cannot read property ‘position’ of undefined

The timeline.xml file is in the correct place. Anyone here knows how I set the timeline to use XML source instead of HTML source?


For all those trying to feed the script with xml data. You have to use HTML character entities in between your link and content tag if you are using HTML Syntax. Eg.
    <title>Ausw\E4rtsspiel gegen den TVR (20:30h)</title>
    <link><a href="">TVR</a></link>

laughing you can’t see the special entities in my previous comment … Use the Ampersand-lt; for all html-GreaterThan signs between the link-Tag and content-Tag. And of course Apersand-gt; for all tag closing html-LowerThan signs. If your URL includes more than one GET-Variable the seperator Ampersand needs to be replaced by Ampersand-amp; too.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey