Cross-Browser. DHTML compatible con todos los navegadores.

Es de sobra conocido, para todos los que hayan experimentado con capas y Javascript, el problema de la compatibilidad de navegadores y la necesidad de realizar distintos códigos DHTML dependiendo del explorador que tenga el cliente.

Si no has encontrado todavía problemas de compatibilidad de tus scripts, posiblemente nunca te hayas enfrentado con la programación del lado del cliente en Javascript, más concretamente con el trabajo con las capas y por tanto, no te interesará mucho este artículo.

Ahora bien, si tienes problemas con las capas al programar una web y no consigues que se vea bien en los distintos navegadores, puede que este artículo te haga más sencilla la vida. Esto gracias a cross-browser.com, un sitio web que ofrece una interesante librería de funciones, que vamos a presentar a continuación, para el trabajo con HTML Dinámico compatible con todos los navegadores más habituales.

X Library VS CBE API

En cross-browser.com nos proporcionan dos librerías distintas para el trabajo con DHTML. En realidad se trata de un mismo conjunto de funciones, siendo una librería la evolución de otra. CBE API es la librería original y X Library es su evolución, que todavía (en el momento de publicar este artículo) se encuentra en fase experimental.

CBE API es la librería más antigua y todavía tiene mayores funcionalidades, pero en un breve espacio de tiempo X Library dispondrá de las mismas funcionalidades que la otra, aunque con diversas mejoras como una considerable reducción del peso de los archivos Javascript.

En principio, si entramos a cross-browser.com, nos presentan X Library, aunque un poco más escondido encontraremos su antecesor CBE API. El consejo es que se utilice X Library para proyectos nuevos. De todos modos, CBE API sigue perfectamente vigente (por ahora). Por ejemplo, en DesarrolloWeb.com utilizamos la librería CBE API para gestionar el tema de las capas, en concreto en el menú de la cabecera de la página.

Cómo utilizar X Library

Tenemos que empezar por descargar la versión actual de X Library. Para ello entramos en cross-browser.com y accedemos a la sección de Toys (para el creador de este sitio web, sus juguetitos son librerías DHTML). Aquí podemos hacer el download de la última versión, donde encontraremos las librerías y ejemplos de uso.

Una vez descomprimido el paquete, podemos encontrar una carpeta llamada "x", donde están las librerías. Nos fijamos en que hay una buena cantidad de archivos .JS, cada uno con diversas funciones. Dependiendo de la acción que se desee realizar tendremos que llamar a una función u otra, y tendremos que saber en qué archivo .JS se encuentra. Las funciones más habituales se encuentran en el archivo x_core.js. En nuestras páginas no tenemos por qué incluir todos los archivos del directorio, sólo los que vayamos a utilizar. Podemos ver en qué archivo está cada función en la documentación del propio programa, más concretamente en la referencia de funciones (el directorio donde se aloja la documentación está dentro de la carpeta "docs" que está dentro del directorio "x").

Dentro del directorio "x" también hay una carpeta de ejemplos, llamada "examples", a los que podemos echar un vistazo para empezar a familiarizarnos con las posibilidades de la librería. Nosotros hemos creado un par de ejemplos para comprobar las bondades de este software. Para ello hemos seguido el esquema del código de la propia página cross-browser.com y el de los distintos ejemplos que se ofrecen. Algunas funcionalidades de los ejemplos, como la función xInclude() están todavía en fase de experimentación, por lo que nosotros no las hemos utilizado y en su lugar incluimos los archivos que necesitamos tal como se hace habitualmente en Javascript.

Ejemplo mostrar y ocultar capa

X Library dispone de una sencilla función para mostrar y ocultar una capa. Simplemente recibe el identificador de la capa que se desea mostrar u ocultar. En principio, podemos enviarle a la función el propio objeto capa o bien un string con su identificador (que se indica con el atributo id en la etiqueta <div>).

Referencia: En el manual de CSS tenemos explicaciones de lo que son las capas y la forma de crearlas y definir su posicionamiento y apariencia.

<html>
<head>
    <title>Ejemplo de utilización de Cross-Browser</title>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
function muestra(){
    xShow('c1');
}
function oculta(){
    xHide('c1');
}
</script>
</head>

<body>
<div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:#9999aa; width:100px; height:80px;">
Hola!
</div>

<form>
<input type=button onclick="muestra()" value="Muestra Capa">
<input type=button onclick="oculta()" value="Oculta Capa">
</form>

</body>
</html>

En este ejemplo hemos creado una capa (con identificador "c1") y un par de botones. Cuando se pulsa uno se muestra la capa y cuando se pulsa el otro se oculta. Para ello hemos creado también un par de funciones, que se llaman cuando se hace clic en los botones, cuyo cometido es mostrar y ocultar la capa utilizando la librería X Library.

Concretamente vamos a hacer uso de las funciones xShow() y xHide(), que reciben el identificador de la capa que hay que mostrar u ocultar respectivamente. Estas dos funciones se encuentran en el archivo "x_core.js", que hemos incluido en la página como bloque de script externo.

Se puede visualizar este sencillo ejemplo en una página web aparte.

Ejemplo para hacer un movimiento de capa

El segundo ejemplo que hemos creado es una capa que se mueve por la página de izquierda a derecha. Esta página tiene también un par de botones, para detener el movimiento o ponerlo en marcha.

<html>
<head>
    <title>hacemos un scroll</title>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
function inicia(){
    velocidad=2
}
function detiene(){
    velocidad=0
}
function mueve(){
    posicion+=velocidad
    posicion %= 500
    xMoveTo('c1',posicion,100)
    setTimeout("mueve()",100)
}

window.onload = function()
{
    velocidad = 0
    posicion = 200
    mueve()
}

</script>
</head>

<body>
<div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:red; width:100px; height:20px;">
Hola!
</div>

<form>
<input type=button onclick="inicia()" value="Mueve la Capa">
<input type=button onclick="detiene()" value="Para la Capa">
</form>

</body>
</html>

En este caso, por lo que respecta a la librería, hemos utilizado la función xMoveTo(), que recibe el identificador de la capa a mover y las nuevas coordenadas donde colocarla. Esta función también se encuentra dentro del archivo "x_core.js", que hemos incluido con el primer bloque de script.

Para entender el movimiento de la capa tenemos que haber visto alguna vez la función setTimeout(), que recibe una instrucción Javascript a ejecutar y una cantidad de milisegundos que deben de pasar antes de la ejecución. En el ejemplo tenemos una función que se llama mueve(), que se encarga de variar la posición actual de la capa. Esta función se llama a si misma por medio de setTimeout(), con un retardo de 100 milisegundos, por tanto, la función mueve() nunca para de ejecutarse, en concreto 10 veces por segundo.

Nota: setTimeout es un método del objeto window. Tenemos varios artículos que utilizan esta función, por ejemplo: Reloj en Javascript o Texto en movimiento en la barra de estado.

Luego hemos definido una variable velocidad, que es el número de pixels que se desplaza la capa en cada llamada a mueve(). Los dos botones lo único que hacen es modificar el valor de esa variable velocidad. El botón que para el movimiento simplemente asigna el valor cero a la velocidad.

Otra cosa que tenemos que ver es que se ha definido una serie de instrucciones a ejecutar cuando se carga la página, en el bloque window.onload = function(). Entre esas acciones a ejecutar se encuentra la configuración de la posición inicial de la capa y la velocidad del movimiento. Además, se hace una llamada inicial a mueve(), que desencadena el flujo del movimiento, pues la función mueve se encarga de llamarse a si misma hasta que el usuario abandona la página.

Si se desea, se puede ver el ejemplo en funcionamiento.

Conclusión

No era nuestra intención explicar todas las funcionalidades de esta herramienta, sino más bien darla a conocer. Tampoco es nuestra intención explicar cómo realizar un movimiento de una capa ayudados por setTimeout(), aun así pedimos disculpas para aquel lector que no haya podido entender por qué realizamos un script de movimiento de esa forma.

Nuestro objetivo era presentar las librerías y mostrar como, con muy poco código y sin tener que conocer los entresijos de cada navegador, se puede realizar un ejemplo ya bastante avanzado del manejo de capas.

Recomendamos que no reinventéis la rueda. Ya que se dispone de herramientas de trabajo con capas tan versátiles como X Library, es mucho más interesante basar nuestros scripts en ella que rompernos la cabeza para inventar mecanismos compatibles con cada navegador.

Hemos creado un manual donde vamos a ir comentando varios ejemplos de efectos interesantes que se pueden realizar utilizando estas librerías. El manual en concreto se llama Taller de Cross-Browser DHTML.