technotarek / timeliner Goto Github PK

I had a problem using timeliner within an angularjs project, I created a directive but the open events are not fired because the elements are not present at doument load.

I changed the click event handlers to use jquery delegated events to overcome the issue.

The code I used in case you want to incorporate in your project is:

// Minor Event Click
$("#timelineContainer").on("click", ".timelineMinor dt", function () {
... // same as existing
});

// Major Marker Click
$("#timelineContainer").on("click", ".timelineMajorMarker", function () {
... // same as existing
});

Add to plugin options

Thanks

Update The Version Of Jquery used to latest one (As of now latest version is 3.x)

Hi,

Maybe I missed it, but haven't seen it in the examples, does it allow overlapping and daily events, i.e.
event-1 start march 9 2016 - end march 15 2016
event-2 start march 12 2016 - end march 19 2016

Thank you

In the demo package it doesn't work at all with Jquery 1.8.3 and up.

Implemented in my CMS using Jquery 1.8.3 and No-conflict everything works except

"timelineMinor a" isn't expanding or collapsing the "timelineEvent" on click.

"timelineMinor a" will change size and color but can't trigger the expand/collapse for the "timelineEvent"

Can the responsive.css stylesheet also be minified?

Since the other two (timeliner.css and timeliner.js) have minified options, it would be greatly appreciated to have that option with the responsive stylesheet as well.

Please tell me how to apply the responsive.css

Even though I link it to the page, the contents of each event go out of the page on a mobile phone.

Hello,

I have built a page using this great tiemline, but I have noticed that responsive works on my PC when I resize the browser but on my smartphones it doesn't.
As an example you can go there : http://www.animage.org/chronologie/timeliner.html
The background is supposed to be red (for test) when under 768px large. It works on PC but not on my smartphones (and the fonts are tiny also). Is there a specific thing to do ?

Best regards,
ludm

I would like to post new item added to timeline on social networks, and write a link to my website, to this specific item in the timeline.
When someone clicks on this link, he would be redirected to my website, to the timeline and this item would be open, without need of opening manually.

thanks to add this feature :)

Hello, in the original demo, I've noticed that "hide all" cannot revert to the initial state.

In this page ->
The Development of Timeliner.js ( https://technotarek.com/timeliner/timeliner.html )

scroll to the bottom timeliner and pay attention to the fact that there is nothing in between "Concept" & "Idea". But the moment you click on one of them, you can never get that initial state back, the state when there is nothing in between the concept and the idea.

Is there a setting that forces it to not close fully to keep the headliner, always visible?

Will it be possible to use this with jquery 3.* ?

Thanks

Hello!

I would like to know how to correctly apply the responsive template to the timeline. On the desktop our project is in agreement however in the cell phone it bursts a little the sides (http://bugarintecnologia.rio/vasco/). Do you know how we can do it?

Hi @technotarek,

I'm having a hard time getting the vertical line to appear when using the markup as noted in your demo/instructions.

https://jsfiddle.net/c1uqpLqj/3/

As you can see in the above fiddle, the actual line on the timeline doesn't appear. However, the line does appear if I remove the opening div marker of the last .timeline-wrapper (<div class="timeline-wrapper">) from the markup (of course, this causes other issues):

https://jsfiddle.net/c1uqpLqj/2/

Any idea what's wrong here?

Thanks,

Will

I believe that the following line in the presentation text has an incorrect class name :

5 - Separate the individual events into DL elements with a class of "timeline-event-series". See the options if you need to customize this class value.

Isn't it "timeline-series" now?

Nerothos

Toggle has been deprecated.

Fix suggested by Marco Cheung. Replace line 97-109 in the source file with the following:

$(".expandAll").click(function(){
  if($(this).hasClass('closed')){
      closeEvent($(this).parents(settings.timelineContainer).find("dl.timelineMinor a"),$(this).parents(settings.timelineContainer).find(".timelineEvent"));
      $(this).removeClass('closed').html("+ expand all");
  }else{
      openEvent($(this).parents(settings.timelineContainer).find("dt a","dl.timelineMinor"),$(this).parents(settings.timelineContainer).find(".timelineEvent"));
      $(this).addClass('closed').html("- collapse all");
  }
});

Hi Tarek,

thanks for this great script. Just one question about the option "startOpen". Is it possible to fill this just with one class instead of IDs? It would be easer to handle because I just have to put, lets say the class "start-open", in the regarding element and it would work.

thx
Florian

I would like the first image to animate, but the animation doesn't begin until slide 2.

http://www.hgtc.edu/about_hgtc/50/timeline.html

See the example link in the body of the page.

thanks!

Hi Tarek,
your class update works almost perfect. I figured out that when you click the first time on an title like "Emmett Till" it just gets bigger. When I click the second time only then it disappears. Is that expected or is this is a bug? Actually it should hide the content on first click.

cheers
Florian