Estas en: Home > jquery

Entradas etiquetadas con jquery

Ebooks de desarrollo gratuitos

0

Al final, por mucho contenido que haya en internet, los desarrolladores terminamos tirando de libros. Por suerte para nuestros bolsillos hay páginas que nos ofrecen muchos conocimientos comprimidos en un ebook, como es el caso que os traigo hoy.

En esta web encontraréis una decena de  ebooks de desarrollo, desde SQL Server a Ensamblador, pasando por Windows Store, F#, Git, jQuery, etc.

Disfrutadlo, y recordad: el conocimiento os hará libres.

http://www.syncfusion.com/resources/techportal/ebooks?utm_medium=devmediaebOct13

Obtener la altura de una capa con contenido oculto (overflow:hidden)

0

Hay veces que nos encontramos con capas con alturas dinámicas a causa de su contenido, pero que no podemos redimensionarlas debido a que tenemos una altura fija, o hay otros elementos que impiden su visualización completa. Las soluciones que he podido encontrar me resultaban un poco chapuceras, ya que se limitaban a crear una capa fuera del area visible de la pantalla (valores negativos para top y left) con el contenido que iba a tener la capa y obtener su altura, obviamente después se eliminaba, pero no me convencía del todo.

La solución que propongo no es precisamente la mejor, pero es algo más elegante que crear contenido duplicado. Veamoslo:

Creamos la capa :

<div class=”contenido” id=”contenido”></div>

Y le damos formato:

.contenido{ width:400px; height:auto; overflow:hidden; }

Supongamos que la capa ya dispone de tal cantidad de contenido que se desborda y no podemos verlo a causa del atributo ‘overflow’. Con javascript hariamos lo siguiente:

Justo antes de cargar el contenido y al tener el atributo ‘height’ en auto tendremos que ocultar la capa:

var capa_contenido = document.getElementById(‘contenido’)

capa_contenido..style.visibility = ‘hidden’;

De esta manera el usuario no verá la capa, pero tampoco el contenido que se le fuese a añadir a continuación.

Una vez añadido el contenido, procedemos a obtener la altura de la capa, ponerle la altura correcta y volverla visible:

var altura = capa_contenido.offsetHeight;

capa_contenido.style.height = ‘400px’;
capa_contenido.style.visibility = ‘visible’;

Ya podemos trabajar con la altura dinámica de la capa. Esto es muy útil, sobre todo, a la hora de trabajar con ajax o con capas con barra de desplazamiento y no se quiere usar el atributo ‘overflow:scroll’;.

PD: Antes de esto, estuve mirando jQuery pero las propiedades que me ofrecía (position() y offSet) no funcionan con capas o contenido oculto.

Ir arriba