Timeline es un utilidad hecha con JavaScript que nos permite crear un gráfico del tiempo en la cual podemos agregar/mostrar eventos ocurridos en determinado momento. Por ejemplo el BlogoEdad de anieto2k usa esta herramienta.
Sin embargo todos podemos configurar nuestro propio gráfico de eventos en el tiempo. Veamos un ejemplo:
Para empezar hagamos referencia a la API, coloquemos esta línea dentro de las etiquetas <head></head>
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript">
</script>
Creamos un contenedor para nuestro gráfico del tiempo:
<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>
Ahora configuramos para llamar algunas funciones cuando ocurran los eventos onload y onresize: del documento HTML:
<body onload="onLoad();" onresize="onResize();">
...
</body>
Colocamos el siguiente código con las configuraciones necesarias-básicas para que funciones nuestro gráfico del tiempo:
var tl;
function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
El resultado final pueden apreciarlo aquí. En un próximo artículo entraremos a más detalles con esta herramienta.
Me entere por Freeze_Soul In Hard Working
el ejercicio tiene roto el link, me parece muy interesante esto, gracias