EN

Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as I can visually locate where the elements are positioned, if they’re collapsing, which elements are involving, etc. I use outline because it’s a property that does not modify the box model and won’t going to break more elements that are already working fine. If I use border instead, it will add 1 or 2 px to the box and can add more unnecessary problems. In addition, I use the red color not only because it’s strongly visible, but it’s fastest writing on the keyboard (lazy huh?).

Anyway, that was the introduction. I made this bookmarklet that does the job for me directly on the browser, so I don’t add dirt to my stylesheet or to the HTML file. I could use the web inspector from the browser (or Firebug) but this method is quicker. The bookmarklet asks you for which selector to draw (div is by default but it could be any selector from jQuery sentences) and the color (red is the default but it can be blue, green, #f60, etc).

I hope it can be useful for somebody else than me.

Requirement: you have to be connected to the Internet, it calls jQuery from Google API’s.

ES

Frecuentemente en mi etapa de debugging (cuando necesito solucionar algo dentro del marcado HTML/CSS que estuviera provocando algún conflicto) utilizo la propiedad CSS outline para contornar los elementos HTML y ver dónde están ubicados, si están colapsando, qué elementos envuelve, etc. Utilizo outline porque es una propiedad que no influye en el modelo de caja y no va a hacer que se quiebren los elementos que ya sé que están correctamente posicionados. Si utilizara border le agregaría mínimo 1 ó 2 pixeles a la caja y seguro provocaría un problema más del que estoy tratando de resolver. Además, utilizo el color rojo no porque es uno de los colores más fuertes y menos comunes dentro de un layout, sino que es el más rápido de escribir (en inglés) dentro del CSS. Me acostumbré.

Enfin, esa fue la introducción. Hice un bookmarklet que hace ese trabajo por mí directo en el browser, sin tener que ensuciar mi hoja de estilos y menos el HTML. Podría utilizar el web inspector del browser (ó Firebug) pero este método es más rápido. El bookmarklet te pregunta qué selectores dibujar (por defecto es div pero puedes utilizar cualquier selector mediante las sentencias de jQuery) y además del color (por defecto es red pero puedes utilizar blue, green, #f60, etc).

Espero pueda ser útil a alguien más que a mí.

Requisito: tienes que estar conectado a Internet ya que llama a jQuery desde Google API’s.

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.

EN

Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS reseter.

With jQuery browserSizr you’ll have more control over CSS styles when there is a significant change in browser size. It has 4 of the most common screens width:

• smartphones (310px or less)
• less than 1024px (from 311px to 1023px)
• greater than 1024px (from 1024px to 1279px – including 1024px)
• greater than 1280px (from 1280px and higher – including 1280px)

Specifically, browserSizr detects the current width of your browser or it’s resize and injects a specific class when it is in the range you’ve activated. Through CSS and a bit of specificity, you can define what happens when the browser is in each resolution:

#container {
   width: 960px; /* normal width */
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; /* width for less than 1024px */
      font-size: 12px; /* smaller font-size */
   }
   #container.over1280 {
      width: 1200px; /* width for over 1280px */
      font-size: 16px; /* bigger font-size */
   }

See example

Configuration:

• Include the jQuery library and this humble plugin:

  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.browserSizr.js" type="text/javascript"></script>

• Inicialize-it with the default parameters:

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

• Or configure it as preferred

  $().browserSizr({
     containerDiv: '#container',
     //containerDiv - value: any HTML tag or #id, default to #container
     debug: 'off', 
     //debug-  value: on | off, default to 'off'
     smartphones: 'off',
     //smartphones - value: on | off, default to 'off'
     lower1024: 'on',
     //lower1024 - value: on | off, default to 'on'
     over1024: 'on',
     //over1024 - value: on | off, default to 'on'
     over1280: 'off'
     //over1280 - value: on | off, default to 'off'
  });

ES

Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores. Con un layout fijo esto no debería ocurrir ya que tienes más control sobra la estructura misma y el modelo de caja se comporta como esperas si haces uso de un buen reseter de estilos CSS.

Con jQuery browserSizr podrás tener más control sobre los estilos CSS cuando existe una variación significativa la dimensión del browser: en cuántos pixeles quedaría el tamaño de la tipografía del menú a 1280x1024px, o que las imágenes queden a 80% de su tamaño en resoluciones de 800x600px por ejemplo. Tienes los 4 anchos de pantallas más comunes:

• smartphones (310px o menos)
• menor que 1024px (de 311px a 1023px)
• mayor que 1024px (de 1024px a 1279px – incluye 1024px)
• mayor que 1280px (de 1280px o más – incluye 1280px)

En específico, browserSizr detecta el actual ancho del navegador ó su redimensionado e inyecta una class específica cuando se encuentra en el rango que hayas activado. A través de CSS y un poco de especificidad, puedes definir qué quieres que ocurra cuando el browser se encuentre en cada resolución:

#container {
   width: 960px; /* ancho normal del sitio web */
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; /* ancho para resoluciones menores que 1024px */
      font-size: 12px; /* menor tamaño de fuente */
   }
   #container.over1280 {
      width: 1200px; /* ancho para resoluciones mayores que 1280px */
      font-size: 16px; /* mayor tamaño de fuente */
   }

Ver ejemplo

Configuración:

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

  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.browserSizr.js" type="text/javascript"></script>

• Inicialízalo con los parámetros por defecto:

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

• O configúralo como más prefieras:

  $().browserSizr({
     containerDiv: '#container',
     //containerDiv - id o etiqueta donde se inyectará la class
     debug: 'off',
     //debug - ventana debug on | off, por defecto off
     smartphones: 'off',
      //smartphones - valores: on | off, por defecto 'off'
     lower1024: 'on',
      // valores: on | off, por defecto 'on'
     over1024: 'on',
      //over1024 - valores: on | off, por defecto 'on'
     over1280: 'off'
      //over1280 - valores: on | off, por defecto 'off'
  });

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