Discussion on TimelinzJS - lightweight timeline maker

dastoori

dastoori supports this item

Supported

This author's response time can be up to 5 business days.

13 comments found.

cool work, i wish you all the best for your sales ;)

Thanks ;)

nice, well done. :)

Thank you

Hi! for the timeline can I choose the mode vertical or horizontal set the range of the timeline in months or years? and Can I set more than one event in the timeline?

Hi

1. Currently there is just vertical mode. but you can rotate it using css.

2. There is a range option, and can be one of the following: decade, year, month, day, hour and minute.

3. You can have multiple events with different types and look. also, you can have multiple timelines.

There are more examples in the source file that shows you how to use TimelinzJS.

Hi. The examples given in docs are basic and the AJAX one won’t run in Safari 9.

The live preview example on codecanyon is a much more realistic and more useful to learn from as it has info boxes too.

Can I get a copy of the JSON file for the live preview example? I will learn quicker as it is closer to what I want to achieve. Thanks

Hi,

Local AJAX requests doesn’t work in some browsers. (due to cross domain security issues)

Try to open the AJAX example with a local http server:

  • Open your Terminal app
  • Go to the examples directory
    cd /Users/[username]/TimelinzJS/Document/Examples
  • Run:
    python -m SimpleHTTPServer 8080
  • Open this address in your browser: http://localhost:8080/

You can view the demo source code in your browser.

this is the main javascript file: https://0.s3.envato.com/files/160578894/scripts/main.js

i’ll be adding more demos in the next update…

thanks

wonderful tips and help, thank you so much

I might be missing something, but none of the demo files load data/content like the demo page goes, ie, timeline on the right, clicked content on the left.

Any ideas?

Hi,

it just like “bootstrapPlugins” example, when you click on a timeline point, it change the content of the left side.

var timelinz = new Timelinz(data, {
    ...
    onPointClicked: function (e, pointData, timelineData) {
        e.preventDefault();
        showLeftContent(pointData, timelineData);
    }
});

the demo code is here

Hi,

Thanks for the awesome script. My developer successfully implemented your script into our web app. Would like to check with you how can we fix the error of the script not displaying correctly when the start times of on the various days timelines start at a different time.

For example, Day 1, the first timing starts at 8am and on Day 2, first timing starts on 10am. Causing the timeline display to mess up. Please let me know how to fix this error.

Thanks

-Sam

Ok, my developer has uploaded the latest version of this script already but still found the issue of layout messing up when start times are the same.

Pls see my screenshots.

Correct layout without error: http://crm1.businesscatalyst.com.sg/correct.png

Error with layout when start times are different: http://crm1.businesscatalyst.com.sg/error.png

please email me your timeline styles, data and its options. (use email section in my profile)

Ok, just sent to you using your profile’s message section.

Hello, I have just purchased this plugin, it is a nice one. But the reason for purchasing it was the the example that was shown in the live demo. I need it for a conference. Could you please make it available for me. Once again, that was the whole reason for buying this plugin. Your help will be much appreciated.

Here is my purchase code: 85adf860-411d-4614-9d0d-9bb465d526b6

hi,

i’ve added the conference demo to the examples folder, please download the new TimelinzJS files.

Thanks, much appreciated.

Hi, I wanted to put the Timeline in a scrollable ‘div’. For example like this: ‘div id=”timeline” style=”overflow:scroll; height:400px; width:500px”’ But horizontally it cuts of timelines. For example I have ten timelines but it only shows three.

In your case, you have to use fixed width for the ”.timelinz”. for example:

.timelinz {
    width: 600px;
}

To display the text on the left side, use this code:

.timelinz__interval {
    text-align: left;
}

.timelinz__interval-time {
    text-align: right;
}

.timelinz__interval:after {
    margin-right: 0;
    margin-left: 60px;
}

Thanks. But even with the fixed width I have the problem that the lines end half way. Since I have a flexible amount of timelines there is no fix width in my case. (See http://imgur.com/FBIuBZE ). Also is there a way to add some padding between the years on the left side and the first timeline? (See http://imgur.com/fK9sYvS ).

Dynamically calculate width:

var timelinz = new Timelinz(data, {
    ...

    onRenderCompleted: function (parent) {
        var $parent = $(parent);
        var $timelines = $parent.find('.timelinz__line-wrap').children();

        // .timelinz__line width + marginBetweenLines option
        var timelineWidth = $timelines.eq(0).width() + 10;

        $parent.find('.timelinz__interval-wrap').width((timelineWidth * $timelines.length) + 60);
    }
});

Left side interval text:

.timelinz__interval {
    text-align: left;
}

.timelinz__interval-time {
    text-align: right;
}

.timelinz__interval:after {
    margin-right: 0;
    margin-left: 60px;
}

.timelinz__line-wrap {
    left: 55px;
    right: 0;
}

Is there a way to use this plugin in an AngularJS app?

How would I change the time format, so that its not military time?

hi

use “intervalFormat” option like this:

var timelinz = new Timelinz(data, {
    intervalFormat: function (date) {
        return date.getHours() + ':' + date.getMinutes();
    }
};

Hi – I’m having trouble figuring out how to render multiple separate timelines on one page. Thanks for the help.

hi,

you should make multiple instance of the “Timelinz” class and then render each one in the separate container.

// Create Timelinz 1
var timelinz1 = new Timelinz(data, options);
var container1 = document.getElementById('main1');
timelinz1.render(container1);

// Create Timelinz 2
var timelinz2 = new Timelinz(data, options);
var container2 = document.getElementById('main2');
timelinz2.render(container2);

Is there a trick to getting the vertical alignment right when the day starts and ends on the :30 of the hour? With my first event at 08:30 on each day, the top hour line shows as 08:30, but the events are all offset down by 1/2 hour (so the 8:30 event is halfway between 8:30 and 9:30). All of the events are incorrectly positioned except the last one, which is at 17:30 and shows up on the 17:30 line. Thanks!

Hi,

Sorry for the delay…

This feature is not supported yet.

Hi, looks interesting. Good luck with sales.

by
by
by
by
by
by