JMiur [E]

La propiedad overflow es esa que nos ayuda a agregar contenidos voluminosos en espacios pequeños. Como cualquier otra propiedad CSS, puede ser modifíciada dinámicamente con JavaScript, es decir, puede tener un valor pre-establecido y cambiar respondiendo a un evento como un click.

En este ejemplo, pondremos un contenedor al que le daremos una altura fija de tal forma que pueda tener cualquier contenido y ocupar siempre el mismo espacio. Usando overflow se le adosa una barra de scroll para que ese contenido sea accesible:
<div style="height: 100px;overflow-y: scroll;width:400px;">
  ....... el contenido .......
</div>
Mauris lorem eros; tincidunt vel elementum a, tempus ac ante! Etiam gravida porttitor convallis? Sed cursus cursus sem porttitor ullamcorper? Phasellus congue diam volutpat quam iaculis vel posuere dui sollicitudin! In et dui quis libero cursus fringilla a non odio. Integer sit amet lorem tortor.

Duis mauris libero, fermentum id lacinia sed, molestie sed massa. Etiam ut metus lacus, non fringilla felis. Vestibulum luctus venenatis justo id rutrum. Nullam rhoncus bibendum magna ut consectetur. Praesent suscipit ligula sit amet nibh sagittis nec lobortis mi vulputate. Nulla a turpis quis erat viverra ullamcorper at ac metus.

Definiendo su tamaño con width y height, basta establecer la propiedad overflow-y con el valor scroll para que el contenido, cualquiera sea este, no se desborde y se muestre una barra de desplazamiento vertical.

Ahora, le agregaremos un pseudo-botón (un enlace) que permitirá expandirlo o colapsarlo, es decir, cambiarle las dos propiedades que controlan ese desbordamiento.

Creamos el HTML con algunas etiquetas extras para no tener problemas y las identificamos con atributos ID para luego, poderlas manipular con JavaScript:
<div id="centrado">
  <a href="javascript:expandir();" id="elenlace">expandir</a>
  <div id="micontenedor" style="height: 200px;overflow-y: scroll;">
    ....... el contenido .......
  </div>
</div>
Y le damos un estilo; básicamente, algo así:
<style>
  #centrado { /* coloco todo en un DIV centrado */
    margin: 0 auto;
    width: 400px;
  }
  #elenlace { /* el pseudo-botón */
    float: right;
    text-decoration:none;
    width: 100px;
    /* centro el texto en ambos sentidos */
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    /* cualquier diseño gráfico */
    background-color: #ABC;
    border-radius: 4px 4px 0 0;
    color: #234;
    font-family: Tahoma;
    font-size: 11px;
    /* lo muevo levemente para que parezca una solapa */
    margin-right: -1px;
    /* un poco de animación para divertirse */
    letter-spacing: 0px;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
  }
  #elenlace:hover { /* efecto hover sobre el botón */
    letter-spacing: 4px;
    text-decoration:none;
  }
  #micontenedor { /* el DIV con el contenido a mostrar */
    clear: both;
    margin: 0;
    overflow-x: hidden;
    /* cualquier diseño gráfico */
    background-color: #EEE;
    border: 3px solid #456;
    color: #222;
    font-family: Georgia;
    font-size: 13px;
    outline: 1px solid #ABC;
    padding: 10px 10px 0 10px;
    text-align: justify;
    text-shadow: 1px 1px 1px #CCC;
    /* animamos el cambio */
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    /* tanto height como overflow-y se definen en la etiqueta misma */
  }
</style>
Por último, la función expandir() que funcionará en ambos sentidos, si está colapsado lo expandirá y si está expandido lo colapsará.

Para esto, necesitamos saber la altura de ese contenido no visible ya que lo hemos "cortado". Hay dos formas básicas, la primera es simplemente cambiar esa altura que desconocemos por height:100%; y el navegador se encargará del resto.

La segunda es la que usábamos en el ejemplo para aplicar las propiedades de transición que requieren que los cambios estén expresados en la misma unidad de valor, así que si queremos que la altura pase de 200 pixeles a otra mayor y eso se muestre animado, deberemos indicar una altura en pixeles pero, no hace falta que lo sepamos con anterioridad o lo calculemos ya que JavaScript posee una función que nos dice cuál es ese valor:

document.getElementById(ID).scrollHeight

Así que vamos con nuestro script:
<script type='text/javascript'>
//<![CDATA[
function expandir() {
  el = document.getElementById("micontenedor");
  // leemos la propiedad overflowY
  if(el.style.overflowY=="scroll") {
    // si está colapsado, lo expandimos
    document.getElementById("elenlace").innerHTML = "colapsar"; // cambiamos el texto del enlace
    el.style.overflowY = "visible"; // quitamos la barra de scroll
    el.style.height = el.scrollHeight + "px";// cambiamos la altura
  } else {
    // si está expandido, lo colapsamos
    document.getElementById("elenlace").innerHTML = "expandir"; // cambiamos el texto del enlace
    el.style.overflowY = "scroll"; // agregamos la barra de scroll
    el.style.height = "200px"; // restauramos la altura
  }
}
//]]>
</script>
expandir
Donec blandit tempus congue. Ut tellus nisi, convallis nec sodales a, gravida nec justo. In hac habitasse platea dictumst. Quisque egestas tincidunt augue et dignissim.

Mauris lorem eros; tincidunt vel elementum a, tempus ac ante! Etiam gravida porttitor convallis? Sed cursus cursus sem porttitor ullamcorper? Phasellus congue diam volutpat quam iaculis vel posuere dui sollicitudin! In et dui quis libero cursus fringilla a non odio. Integer sit amet lorem tortor.

Duis mauris libero, fermentum id lacinia sed, molestie sed massa. Etiam ut metus lacus, non fringilla felis. Vestibulum luctus venenatis justo id rutrum. Nullam rhoncus bibendum magna ut consectetur. Praesent suscipit ligula sit amet nibh sagittis nec lobortis mi vulputate. Nulla a turpis quis erat viverra ullamcorper at ac metus.

13 comentarios:

Graciela  

Soprendida Jmiur, queda bellísimo :D

Responder
Gem@  

Siempre encontraba esa propiedad en los bloques importantes de la plantilla hasta que descubrí que era para que las cosas no se desbordaran pero hoy rizas el rizo con ese popurrí de propiedades. Magistral :)

Responder
JMiur  

Esta divertido :D

Responder
Alfredo  

Hola Jmiur, esta increible el widget que posteaste, pero tengo una duda, ¿Se puede hacer lo mismo pero con transiciones? a esto existirá algo así pero con html5? eso saludos!

Responder
JMiur  

Alfredo:

Este ejemplo, usa transciones; ves las propeidades en #elenlace {} y en #micontenedor {}
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;

Las transciones y cualquier otra propiedad CSS puede ser utilizada en cualquier tipo de página, sin importar si tiene estructura HTML5 o no.

Responder
Graciela  

Puch puch lo logré, ahhh lo insertaba en la plantilla :((
Queda genial :D

Responder
JMiur  

Podría hacerse en la plantilla sin problemas aunque tal vez requeriría algún leve cambio dependiendo de como esté hecha.

Responder
Graciela  

Mi alegría duró poco, quiero pedirte, siempre si podés: cómo hago para colocar el código html de una entrada por ejemplo, dentro de la cajita?

Traté de colocarlo en la plantilla, hice pases mágicos, la pócima no funcionó :S
Hace días que estoy con ésto, me dije 'vamos vos podés, vos podés, no preguntés a Jorge', ahhh la terapia no funciona :D

Gracias!

Responder
JMiur  

Se coloca igual que cualquier otro código, si me decias cómo lo estás poniendo o si tenés un ejemplo, me fijo si hay alguna clase de error.

Responder
Graciela  

Jorge perdón por hacerte perder el tiempo, lo logré, me faltaba un div
aquí lo tengo
http://anotacionespalomas.blogspot.com/2011/09/expandir-centrado-coloco-todo-en-un-div.html
Muchas muchas gracias :D

Responder
JMiur  

Todo perfecto :D

Responder
Jose Argseg Palacios  

Hola, estoy intentando hacer un "float: left;" para ubicarlo a la izquierda pero no me funciona, solo cuando aparece centrado... podrás orientarme?

JMiur  

No a menos que muestres el ejemplo concreto y expliques qué quieres hacer porque sino, es imposible saber.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR