Nueva versión de Popup DHTML

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

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.

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)
}

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.

Autor: Miguel Angel Alvarez, Director https://www.DesarrolloWeb.com