Nueva versión de Popup DHTML

  • Por
Como sustituir un popup tradicional por una función DHTML que muestra el contenido en una capa. Además, hemos mejorado el popup para que se muestre con un movimiento.
Hemos realizado nuevas mejoras al script de Popup DHTML para mostrar una imagen, que vimos anteriormente. Este popup servía para mostrar una imagen en una capa aparte, de manera similar a los popups tracionales. En general los popup se muestran en una nueva ventana del navegador, pero como ahora casi todos los navegadores bloquean los popups, no conviene utilizarlos.

Ya habíamos publicado otro artículo con mejoras para realizar un popup DHTML. Merece la pena leer previamente ese artículo, así como el primer artículo que presentamos en la serie del popup DHTML.

En este caso, la mejora consiste en mostrar el popup con un scroll o desplazamiento de izquierda a derecha. Es un sencillo efecto de movimiento que puede dar dinamismo a la presentación de la imagen.

Antes de continuar, podemos ver el ejemplo en marcha en una página aparte.

Aclararemos que hay que descargarse las librerías actualizadas de Cross-Browser, pues las funciones que vamos a utilizar aquí han sido modificadas. Anteriormente había un problema con la función xClientHeight() en Firefox, que nos devolvía el número de píxeles del documento en vertical, en lugar del espacio disponible en la ventana del navegador, en vertical. Los ejemplos que hemos realizado en los anteriores artículos del popot DHTML utilizaban las librerías con este problema.

Así mismo comentar, para el que quiera implementar este ejemplo, que puede utilizar directamente el código que hemos publicado. Pero si quiere hacerlo desde cero por si mismo (mucho mejor para aprender) necesitará conocer las librerías xLibrary, descargarlas y compilar el ejemplo con xCompiler.

Explicación de los cambios al popup DHTML, con respecto a anteriores artículos

Hemos hecho pocas modificaciones al código del ejemplo anterior. Simplemente se ha creado una función situar() que se encarga de realizar el desplazamiento de la capa popup de izquierda a derecha. Antes se mostraba directamente la imagen en la posición calculada, pero ahora se coloca la imagen a la izquierda y luego se desplaza alterando su posición. La posición vertical no cambia, lo único que cambia es la posición horizontal.

Las posiciones se almacenan en variables. Tendremos tres variables: 1) la posición vertical, que se almacena en "pos_top". 2) Posición horizontal de transición "pos_left_actual", que es la que se actualiza repetidas veces para realizar el efecto de movimiento. Y 3) la posición horizontal final "pos_left", que es la que utilizamos para saber dónde detener el efecto de movimiento.

Las posiciones iniciales se calculan con estas líneas de código:

// posición horizontal final
//se calcula conociendo el ancho de la ventana y de la imagen
pos_left = parseInt((xClientWidth()-ancho)/2)

//Posición horizontal de transición
//al principio la foto tiene que quedar fuera de la página
pos_left_actual=-ancho

//la altura donde colocar la imagen se calcula en dos casos
//1) si la imagen es más alta que el alto disponible en el navegador
//2) si la imagen cabe en la ventana del navedador
if (xClientHeight() < alto){
    pos_top = xScrollTop() + 10;
}else{
    pos_top = xScrollTop() + parseInt((xClientHeight() - alto - 20) / 2)
}

Las funciones xClientHeight() y xScrollTop() para el posicionamiento de la imagen fueron explicadas en el artículo anterior del popup DHTML.

Luego se realiza el movimiento de la capa a la primera posición actual, se llama a la función situar(), que veremos luego, y se muestra la capa.

xMoveTo('ampliacion',pos_left_actual,pos_top)
situar()
xShow('ampliacion')

Función situar()

Esta es una típica función para realizar un movimiento con Javascript. Se llama a si misma y en cada llamada altera la posición de la capa. Las llamadas las hace con un retardo para que no bloquee el navegador cuando realice el movimiento.

function situar(){
    if (pos_left_actual < pos_left){
       pos_left_actual += 20
       xMoveTo('ampliacion', pos_left_actual,pos_top);
       setTimeout ('situar()',10)
    }
}

La función primero comprueba que la posición actual es inferior a la posición donde se tiene que quedar la capa al final. Si ya está al final, no hace nada, con lo que se detiene el movimiento. Si la capa no está en la posición final, realiza estas acciones:

1) Altera la variable pos_left_actual
2) Mueve la capa a la nueva posición
3) Realiza una nueva llamada a la función situar, con un retardo de 10 milisegundos.

Conclusión

Esto es todo lo que teníamos que explicar de esta actualización del popup DHTML. Esperamos que os parezca un efecto interesante y no haya resultado demasiado complicado.

Podemos ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Karlo V. Rodriguez

04/3/2006
el popup esta increible, pero cuando dentro de la pagina tengo algun elemento swf el la imagen se pone atras del swf, como se puede remediar esto?

Claudio

28/10/2010
popup dhtml para mostrar cualquier contenido
Me interesa poder mostrar contenido formado por texto e imagen. Como seria el codigo en ese caso? Muchas gracias.

usuario_borrado_743392

28/4/2011
...
Lo de los pop ups a mi no me pasa aquí, usuario..