Dando vida al tiempo / Giving life to time
Selecciona tu idioma / Select your language:
EN
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.
Last stable version: 0.9.6
Configuration:
- Include the jQuery library and this plugin:
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>$(function(){
$().timelinr();
});$(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>Icon designed by Sebastián Cortés
Changelog:
- 0.9.6: check if required elements exist on page before initializing timelinr
- 0.9.54: Bugfix: large timelines now gets centered.
- 0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved.
- 0.9.52: Problem with arrows nav and 2 or less issues now fixed.
- 0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Also, jQuery updated to 1.7.2 version (latest) and HTML markup now is HTML5 doctype.
- 0.9.5: IE8 bug smashed while dates are animated (vertical); CSS updated: filter added due to IE8 bad-support of PNG transparency (#issues img).
- 0.9.4: Added autoPlay, autoPlayPause and autoPlayDirection (disabled by default).
- 0.9.3: Added startAt: select where do you want the timeline to start.
- 0.9.3: Fixed bug with animation while pressing the navigation buttons.
- 0.9.2: Fixed Firefox bug with event.preventDefault();
- 0.9.1: Added keyboard navigation, see vertical demo.
- 0.9.1: preventDefault(); added to arrows.
- 0.9.1: Documentation improved.
ES
Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Soporta diagramaciones horizontales y verticales, y puedes parametrizar la mayoría de los atributos: velocidades, transparencias, etc.
Última versión estable: 0.9.6
Configuración:
- Incluye la librería jQuery y luego este plugin:
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>$(function(){
$().timelinr();
});$(function(){
$().timelinr({
orientation: 'horizontal',
// valores: horizontal | vertical, por defecto horizontal
containerDiv: '#timeline',
// valores: cualquier etiqueta HTML ó #id, por defecto #timeline
datesDiv: '#dates',
// valores: cualquier etiqueta HTML ó #id, por defecto #dates
datesSelectedClass: 'selected',
// valores: cualquier clase, por defecto selected
datesSpeed: 'normal',
// valores: número entre 100 y 1000 (recomendado) ó 'slow', 'normal', 'fast', por defecto normal
issuesDiv : '#issues',
// valores: cualquier etiqueta HTML ó #id, por defecto #issues
issuesSelectedClass: 'selected',
// valores: cualquier clase, por defecto selected
issuesSpeed: 'fast',
// valores: número entre 100 y 1000 (recomendado)ó 'slow', 'normal', 'fast', por defecto fast
issuesTransparency: 0.2,
// valores: número entre 0 y 1 (recomendado), por defecto 0.2
issuesTransparencySpeed: 500,
// valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
prevButton: '#prev',
// valores: cualquier etiqueta HTML ó #id, por defecto #prev
nextButton: '#next',
// valores: cualquier etiqueta HTML ó #id, por defecto #next
arrowKeys: 'false',
// valores: true/false, por defecto false
startAt: 1,
// valor: número entre 1 y el máximo de elementos, por defecto 1 (primero)
autoPlay: 'false',
// valor: true | false, por defecto false
autoPlayDirection: 'forward',
// valor: forward | backward, por defecto forward
autoPlayPause: 2000
// valor: número (1000 = 1 seg), por defecto 2000 (2segs)
})
});El marcado HTML debe ser de la siguiente forma:
<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> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>Ícono diseñado por Sebastián Cortés
Cambios:
- 0.9.6: verifica si elemento existe antes de inicializar timelinr
- 0.9.54: Ahora se centran lineas de tiempo con muchas fechas
- 0.9.53: Problema con salto entre primer y última fecha y desaparición de flechas de navegación solucionado.
- 0.9.52: Problema con la navegación con flechas y 2 ó menos issues ahora solucionado.
- 0.9.51: como solicitado, los botones prev/next se esconden si el issue está en la posición inicial/final. Además, jQuery fue actualizado a 1.7.2 (última) y el doctype del documento ahora es HTML5.
- 0.9.5: bug de IE8 aplastado cuando las fechas eran animadas (vertical); CSS mejorado: filter agregado por el mal soporte de IE8 con los PNG transparentes (#issues img)
- 0.9.4: Agregados autoPlay, autoPlayPause y autoPlayDirection (deshabilitados por defecto).
- 0.9.3: Agregado startAt: selecciona en qué punto quieres que comience la línea de tiempo.
- 0.9.3: Solucionado bug con animación mientras presionas los botones de navegación.
- 0.9.2: Solucionado bug Firefox con event.preventDefault();
- 0.9.1: Agregado navegación por teclado, ver ejemplo vertical.
- 0.9.1: preventDefault(); agregado a las flechas.
- 0.9.1: Documentación mejorada.
Copyright 2011, CSSLab.cl – Free under the MIT license.
Comentarios
Dear developer,
At first I’d like to say that I’m really pleased with your great work!
I’m trying to fit your timeline script to my needs, but I’m a bit stuck 😉
What I’d like to achieve is a scalable timeline. At first it would be nice to present the timeline slides over the full width of the parent. I’m not a n00b when it comes to CSS, but in this case I don’t see where to change the width without loosing functionality / position of the elements.
I hope you’re willing to tell me how to achieve what I’m looking for 🙂
Thank you very much in advance!
Hielke
Dear Hielke, I’m sorry this Timelinr is not responsive, so you can’t achieve what you describe without heavy changes in the JS. When I first published it, responsive was not a thing so it was not considered.
This is a great tutorial! However, the timeline is not responsive. I have tried using css by fitting it into a different width container in different media queries, but the layout is always messed up or the content goes missing. Is there a way to make this timeline responsive and looks good in mobile?
Thank you!