Frique

Frique supports this item

Supported

52 comments found.

Great product ! Can you add the option to show by default (not just by hovering) the tooltips of all nodes ?

Thanks!
If the tooltips are always visible, they would most likely obstruct the frame contents though? However, you can make it happen with some CSS edits:

Find .timeliner .tooltip{} and remove the line display:none;. However then they will still be removed after hovering once. To also prevent that, add the line display:block !important;.

.timeliner .tooltip{
    position:absolute;
    white-space:nowrap;
    /*display:none;*/
    display: block !important;
}

Thanks it is working !

How can I rotate the tooltip block for a specific angle (for example: 30 deg)

Do not consider my previous question ; I have found the solution myself.

Is there a Wordpress version? Or can this work in Wordpress?

No, sorry.

Oh sure it can work in WP, but you’d manually have to set it up in the theme. Not via the admin-panel.

This looks awesome. I also have a question regarding the tooltip. How make it visible when the node is active? Thanks

Sorry, that’s not an option. It shows when hovering over a node.

so just let you know that it is possible. Simply adding .node_active .tooltip{display:block!important;} in css

Awesome!

I have a few questions on using this plugin:

1. on the example the timeline dots are not an equal distance apart, one is 10 seconds, the next is 5 seconds etc… how do I make them all 8 seconds apart, or should I say 300px apart?

2. how do I add timeline space to the beginning so there is about 100px of timeline before the first dot, like there is at the end in the example?

Hi. First of all, the distance is based on time. The examples demonstrate that each node can have an individual time, hence they are at different distances.

1. To set a node’s time, you can use the lang="" attribute on the <li />. lang=”5” is 5 seconds, lang=”10” is 10 seconds etc. To set a global node-time you can avoid the lang attribute and set the plugin option “interval” to your desired time instead.

<li title="Slide one" lang="10">
Or:
$('#timeliner').timeliner({
    interval: 10
});

2. The space left and right of the timeline is managed with the plugin option “timelinehorizontalmargin”. Set it to a pixel value like so:

$('#timeliner').timeliner({
    timelinehorizontalmargin: 50
});

Thanks Frique. On the spacing I am talking not about the padding outside the timeline but to move the first and last nodes inward about 100px each on the timeline, so the timeline appears to start off the page, have three nodes in the middle, and end off the page, like the one here: http://www.timpiele.com/ghost.png

Is this possible?

Only with a bit of hackery. The best way would be to use CSS transform (only works in IE10+ and anywhere else). You’ll have to experiment with the actual pixel distance.

#example1 .node{
  -webkit-transform: translate(100px);
  -moz-transform: translate(100px);
  -ms-transform: translate(100px);
  -o-transform: translate(100px);
  transform: translate(100px);
}

Hi Frique, nice work… How can i stop and restart all the animation from slice 1, I’m using both: an external button and a scroll event calling stop() and start(1) functions but seem do nothing, no errors, no changes, nothing Thanx

Hi. Simply $().timeliner.start(1) should do the trick. Do you have an online sample i can look at to find the problem?

Sorry, i see now the commands are “pause” and “play” :)

$('.my-button').on('click', function(){
  $('#timeliner').timeliner.play(1);
});

How do i make it rotate through multiple slides?

Hi Frique, thank you for your patience…

I am trying to create a single timeline instance ‘slideshow’ where each slide has a different background image file.. something like this..

  • Is this possible?

    Best

ul id=”example1” class=”timeliner” title=”Slide one” style=”background:url(images/slide1.jpg)” title=”Slide two” style=”background:url(images/slide2.jpg)” title=”Slide three” style=”background:url(images/slide3.jpg)” title=”Slide four” style=”background:url(images/slide4.jpg)”

Yes that should work fine. Check out the instructions page and source of the demo pages for more pointers on implementation. Let me know if you have any trouble.

Hi,

Nice script, is it possible to change the slide time from seconds to milliseconds?

Glen

Actually nevermind, I worked it out. Now to just adjust the timeline dots to suit…... :)

Yep. Values like 0.5 should work.

Hello I have a project I am using this for so I would like to send you a screenshot if possible for you to give me some input as far as a starting block or key points that may apply. Can I email you direct? Outside of that I see you haven’t made an updated version in sometime…any plans or ideas on updating or making a responsive version?

Hi. You can send a message via my profile page or find the email address at http://frique.me/support/

There are no immediate plans for updates to Timeliner (a responsive version would indeed be the next version if there is interest) but it will be updated to ensure jquery version compatibility and such.

Hi, how did you make the slider responsive. On my site it isn’t.Thanks

Hi. Sorry to disappoint but Timeliner is not responsive.

can be the tooltip of the timeline (circles) displayed without mouseover, ever visible??

Not officially, but you can force it via CSS like so:

.timeliner .tooltip {
  display: block !important;
}

Hi there!

I love the timeline, but I have a question: is it possible to enable swipe controls for mobile devices? I’d love to use it for a project I’m working on, but it has to be touch sensitive.

Cheers! Antonio

Hi Antonio,

Touch support is not part of Timeliner, but you can get it done using an extra script like touchswipe: http://www.awwwards.com/touchswipe-a-jquery-plugin-for-touch-and-gesture-based-interaction.html

You’d catch the swipe direction, then tell Timeliner to go to the next or previous slide. Something like this:

$("#timeliner").swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
    if(direction === 'left'){
        $('#timeliner .next').trigger('click');
    }
  }
});
by
by
by
by
by
by