juanbrujo / jquery-timelinr

Dando vida al tiempo / Giving life to time

jQuery Timelinr

Dando vida al tiempo / Giving life to time

This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc...

More info and demos: http://www.csslab.cl/2011/08/18/jquery-timelinr/

Configuration:

Include the jQuery library and this plugin:

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-x.x.x.js"></script>

Inicialize-it with the default parameters:

$(function(){
	$().timelinr();
});

Or configure it as preferred:

$(function(){
	$().timelinr({
		orientation: 'horizontal',
		// value: horizontal | vertical, default to horizontal
		containerDiv: '#timeline',
		// value: any HTML tag or #id, default to #timeline
		datesDiv: '#dates',
		// value: any HTML tag or #id, default to #dates
		datesSelectedClass: 'selected',
		// value: any class, default to selected
		datesSpeed: 'normal',
		// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
		issuesDiv : '#issues',
		// value: any HTML tag or #id, default to #issues
		issuesSelectedClass: 'selected',
		// value: any class, default to selected
		issuesSpeed: 'fast',
		// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
		issuesTransparency: 0.2,
		// value: integer between 0 and 1 (recommended), default to 0.2
		issuesTransparencySpeed: 500,
		// value: integer between 100 and 1000 (recommended), default to 500 (normal)
		prevButton: '#prev',
		// value: any HTML tag or #id, default to #prev
		nextButton: '#next',
		// value: any HTML tag or #id, default to #next
		arrowKeys: 'false',
		// value: true/false, default to false
		startAt: 1,
		// value: integer, default to 1 (first)
		autoPlay: 'false',
		// value: true | false, default to false
		autoPlayDirection: 'forward',
		// value: forward | backward, default to forward
		autoPlayPause: 2000
		// value: integer (1000 = 1 seg), default to 2000 (2segs)< 
	});
});

HTML markup must be as follows:

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

jquery-timelinr's Issues

Timeline position

can any one help me to move the timeline position to bottom not on the top

Bower

Is this plugin available for Bower?

Use Strict

Should be using strict mode

change height of divs to accomdodate more copy in verticle timeline

I am trying to implement this timeline, but run into an issue when the copy gets long, and it gets cut off.
ss attached

marginTop of #issues is overridden and prevent sliding

I'm using the vertical version of the plugin inside a Builder of a Wordpress website.
The builder css overwrites the assigned marginTop on #issues preventing the sliding up/down.

you should add important! in some way to the marginTop or marginLeft values assigned by the script.

Tabbing through timeline breaks the display

Hi,

I noticed that tabbing through the timeline causes this effect:

Does anyone know if there's an easy way to prevent this from happening?

vertical timelinr places late dates/issue div too low

I have a vertical time line with 20 entries. The first entry is displayed at the correct height on the right of the current date.

Advancing to later dates the position of each issue entry moves slightly down compared to the entry before. Later dates are not fully displayed anymore and the last two date entries do not appear at all, probably due to the overlap with grad_bottom.png.

Thank you for the help,
Hauke

Multi usage in one page

hi everyone,
i want to use two or more timelinr container in one page but i can't..
first timeline is not working, secondary is working..
no error in console..
how can i use multi timeline in one page?

Error when datesDiv or issuesDiv don't exist on page

If Timelinr is included on a page that does not intend to use the library (for example, the lib is concatenated into a minified site-wide JS file), it throws an error when trying to calculate the defaultPositionDates from the sizes of non-existent DOM elements.

I will submit a pull request that allows Timelinr to fail more gracefully in this situation.

Protocol error

When this plugin is used over an https connection, there is a protocol error, due to lines 266 and 277 on wp_jquery_timelinr.php.

Can be fixed by flipping "http://" to "//".

I will try to submit a pull request.

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

How do I do this?

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!

Make Ability For 100% Width

This slider is great, but the lack of responsiveness creating a lot of issues for me. I've modified the JS file to handle 100% widths for the containers and list elements.

Replace:
var widthIssue = $(settings.issuesDiv).width();
with
var widthIssue = $(settings.containerDiv).width();

Then in the first horizontal settings set add:
$(settings.issuesDiv+' li').width(widthIssues);

So it'll look like:
// set positions! if(settings.orientation == 'horizontal') { $(settings.issuesDiv).width(widthIssue*howManyIssues); $(settings.issuesDiv+' li').width(widthIssues); $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).height(heightIssue*howManyIssues); $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); }

After that all you need to do is modify the CSS so that #timeline, #dates, #issues, and #issues li are all width: 100%. Now when the window loads they automatically fill the containers. I'm still working on the ability for it to dynamically resize on screen resize.

Slider does not reset waiting time and keeps running counter with setInterval

There is one issue with slide wait delay. I set "autoPlayPause" to 5000 miliseconds and it works fine initially, but when i click on next or random slide then it takes 1 second to move slide and after this action current slide remains there for 3-4 seconds only instead of 5 seconds.

Can you please let us know about how to reset delay time, and i think issue is with setTimeinterval.

Cannot add multiple timelines

Adding multiple timelines causes the first timeline not to work.

right to left slide

how can i change direction of the horizontal sliding ? change to right to left instead of left to right , is there any option?

Responsive in nature?

I would like to know if this silder can be responsive in nature

Error Javascript on step of timeline

I have encountered a bug in my javascript script because in my template HTMl I added some text, but in this "text" I have some lists HTML.

If you take the horizontal jquery Timelinr, you can progress step by step and at each step you can show some information, but if in this information, you have a list HTML (

) you will have a problem on execution of the script.

at this line :
$(settings.issuesDiv+' li').animate({'opacity':0.5},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);

So, I have an answer to resolve this bug, I added a filter method (jQuery) and HTML class on the

element. So, when you execute the script, it pass by all

element in the section (id HTML "#issues") AND filter on the class that I have specified.

I hope I was clear.

Getting Error: TypeError: $(...).timelinr is not a function

Error: TypeError: $(...).timelinr is not a function

When using Jquery 2.1 get the error

But goes away when using Jquery 1.7.2

Choppy behaviour on Safari web browser

Hi,
The plugin works really well on all browsers except on Safari. The behaviour is really choppy, super slow and not triggers very well the animations between all items.

How can we fix this?