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..

New version available, 0.9.5

Configuration:

• Include the jQuery library and this plugin:

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

Inicialize-it with the default parameters:

<script type="text/javascript">
   $(function(){
      $().timelinr();
   });
</script>

Or configure it as preferred:

<script type="text/javascript"> 
   $(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)
      });
   });
</script>

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.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.

Nueva versión disponible, 0.9.5

Configuración:

• Incluye la librería jQuery y luego este plugin:

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

Inicialízalo con los parámetros por defecto:

<script type="text/javascript"> 
   $(function(){
      $().timelinr();
   });
</script>

O customízalos:

<script type="text/javascript"> 
   $(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)
      })
   });
</script>

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.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.

ES

Con jQuery Blox puedes desplegar información de una manera diferente, y con una fácil y rápida configuración. Basta con que armes tu HTML siguiendo un simple patrón de bloques, y definirle al plugin los nombres de los elementos que estás construyendo (o mantener los pre-configurados); Blox se encarga de crear una mayor interacción de tu información hacia el usuario.

Ver Demo 1

Blox ofrece 3 estados:

1. Normal: cuando el usuario no interviene con la caja HTML que contiene los bloques.
2. Hover: cuando el mouse está sobre alguna de las cajas, por defecto Blox hace las otras semi-transparentes.
3. Click: cuando se hace click a alguna caja, ésta se amplía animándose hasta cubrir el total de la caja contenedora por sobre las demás y muestra la información anexa a esa caja.

El uso de Blox no debería limitar la creatividad de quien la vaya a usar, pero es necesario conocer y mantener ciertas reglas para su correcto y total funcionamiento, principalmente de estructura HTML y de estilos CSS:

Estructura HTML

Primero necesitas una caja que contenga las demás cajas; por defecto Blox la define con el id blox. Esta caja contenedora #blox es la que soportará a las demás cajas, las que Blox denomina por defecto con una class blox_content. Esta caja .blox_content es la que tiene 2 importantes funciones: soporta al contenido que estará oculto en el primer estado, y a una tercera caja llamada .blox_box que es la gatillante de toda la interacción de Blox.

El HTML básicamente debe ser como la siguiente estructura:

<div id="blox"> /* un contenedor */
   <div class="blox_content" id="box_1"> /* varias cajas de contenido */
       <div class="blox_box"> /* caja que soporta el click */
          Box 1
       </div>
       Contenido desplegado cuando Box 1 es clickeado.<a href="#" class="blox_close">Cerrar Bloque</a> /* contenido oculto pero que se muestra al click en la caja anterior */
   </div>
   /* otras cajas con el mismo patron */
</div>

Estilo CSS

La magia está en el uso de posición absoluta para que las cajas se muevan con libertad y fluidez. Para que las cajas se comporten así, deben tener un estilo específico. La que contiene a todas las cajas, #blox, debe tener un alto fijo, un ancho fijo y posición relativa ya que será quien soporte a las cajas menores .blox_content, las que tienen posición absoluta, alto fijo y ancho fijo. Cada una de las cajas .blox_content, deberían tener ubicaciones diferentes mediante id único, respecto a #blox utilizando las propiedades left y top.

La tercera caja .blox_box también debería tener un ancho y alto fijo, seguramente el mismo que su caja padre .blox_content, y para el resto de los elementos tienes libertad total de hacer lo que quieras con su estilo.

Finalmente, el CSS básico es el siguiente:

#blox {
   width: 400px;
   height: 400px; 
   position: relative;
}
   .blox_content {
      width: 200px;
      height: 400px; 
      position: absolute;
   }
      #box_1 {
         top: 0; 
         left: 0;
      }
      #box_2 {
         top: 0; 
         left: 200px;
      }
      /* asi con cada una de las otras cajas */
   .blox_box {
      width: 200px; 
      height: 400px; 
   }

Configuración

Por defecto Blox viene pre-configurado de fábrica, y su programación permite que alteres los siguientes parámetros:

• container: id de la caja contenedora, por defecto #blox
• content: class de las cajas con contenido, por defecto .blox_content
• box: class de la caja que inicia la secuencia para mostrar el contenido, por defecto .blox_box
• close: class del link o botón que cierra caja caja desplegada, por defecto .blox_close
• transparency: [yes/no]¿requieres transparencia? por defecto yes
• fadein: nivel de transparencia (de 0 a1) de las cajas al mouseover, por defecto 0.2
• fadeout: nivel de transparencia (de 0 a1) de las cajas al mouseout, por defecto 1
• animation: [yes/no]¿requieres animación? por defecto yes
• timein: tiempo en ms en que cada caja se demora en abrir, por defecto 100
• timeout: tiempo en ms en que cada caja se demora en cerrar, por defecto 200
• direction: [lefty/righty] hacia donde se abrirá cada caja, por defecto a la izquierda lefty

Para utilizarlo con estos valores por defecto, sólo debes seguir 2 pasos básicos:

1. Agregar tu librería de jQuery favorita y este humilde plugin:

   <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
   <script src="jqueryblox-v0.9.js" type="text/javascript"></script>

2. Activarlo:

   <script type="text/javascript">
       $(function(){
           $().blox();
       });
   </script>

Si quieres configurarlo según tus necesidades, basta ir modificando los parámetros como te sean necesarios:

 <script type="text/javascript">
     $(function(){
         $().blox({
             container: '#contenedor_blox',
             close: '.boton_cierra',
             direction: 'righty',
             fadein: 0.6
         });
     });
</script>

Ver Demo 2

Ver Demo 3

EN

With jQuery Blox you can display information on a whole new way with a quick and easy setup. Just write yout HTML in a simple block pattern, and tell the plugin your element names (or maintain the pre-configured ones); Blox will display your information with a new interaction for your user.

See Demo 1

Blox offers 3 states:

1. Normal: when the user does not interfere with the box containing the HTML blocks.
2. Hover: when the mouse is over one of the boxes, by default Blox makes the others semi-transparent.
3. Click: when you click on any box, it will animate its expansion to cover the total of the container above all other blocks, to show the information attached to that block.

Using Blox should not limit the creativity of who will use it, but it needs to maintain certain rules for their correct and full operation, mainly HTML strucuture and CSS styles:

HTML Structure

First you’ll need a box containing all other boxes, by default Blox calls it with the id blox. This container #blox will support all the blocks which Blox names with the class box_content. This block .box_content have 2 major functions: support the content hidden in the first state, and contains a third block called with the class .blox_box which is the one that fires the Blox interaction, expanding and moving the boxes to display the hidden information.

The HTML should be basically as follows:

<div id="blox"> /* a container */
   <div class="blox_content" id="box_1"> /* many content blocks */
      <div class="blox_box"> /* box that fires the interaction */
         Box 1
      </div>
      Content displayed when Box 1 is clicked, above Box 2.<a href="#" class="blox_close">Close Box</a> /* hidden content displayed at .blox_box click */
   </div>
   /* other boxes with the same pattern */
</div>

CSS Style

The magic is in the use of absolutely positioned blocks to move them freely and smoothly For the blocks to behave like we want, they must have a specific style. The box that contains all other blocks #blox must have fixed height and width and relative position to support the smaller boxes named .blox_content which must have fixed height and width as well but absolute positioned. Each one of this boxes .blox_content should have different placements, givven through an unique #id using the properties left and top.

The third box .blox_box should also have a fixed width and height, probably the same as its parent .blox_content. For the rest of the elements you have total freedom to do whatever you want with their style.

Finally, the basic CSS is as follows:

#blox {
   width: 400px;
   height: 400px; 
   position: relative;
}
   .blox_content {
      width: 200px;
      height: 400px; 
      position: absolute;
    }
       #box_1 {
          top: 0; 
          left: 0;
       }
       #box_2 {
          top: 0; 
          left: 200px;
       }
      /* like this for each of other boxes */
      .blox_box {
         width: 200px; 
         height: 400px; 
      }

Configuration

By default, Blox comes preconfigured from the factory, and its programming allows you to alter the following parameters:

• container: container box id, default to #blox
• content: class of each content box, default to .blox_content
• box: class of the box that fires the content display, default to .blox_box
• close: class for the link (button) that closes the content box, default to .blox_close
• transparency: [yes/no] do you want transparency on hover? default to yes
• fadein: transparency level (from 0 to 1) when you mouseover a box, default to 0.2
• fadeout: transparency level (from 0 to 1) when you mouseout a box, default to 1
• animation: [yes/no] do you want the boxes to animate? default to yes
• timein: time in ms that each box takes to display the content, default to 100
• timeout: time in ms that each box takes to hide the content, default to 200
• direction: [lefty/righty] which direction each box is opened, default to left lefty

To use it with the default values, just follow this 2 simple steps:

1. Add your favorite jQuery library and this humble plugin:

   <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
   <script src="jqueryblox-v0.9.js" type="text/javascript"></script>

2. Activate it:

   <script type="text/javascript">
       $(function(){
           $().blox();
       });
   </script>

If you want to customize it to suit your needs, just change the necessary parameters:

 <script type="text/javascript">
     $(function(){
         $().blox({
             container: '#my_boxes,
             close: '.closeboxes,
             direction: 'righty',
             fadein: 0.6
         });
     });
</script>

See Demo 2

See Demo 3