En este capítulo nos adentraremos en la creación de documentos con contenido dinámico usando las propiedades anteriores mediante funciones en Javascript. Como vimos en el capitulo anterior, cada browser tiene distintas propiedades y distintas formas de referenciar cada propiedad. Para evitar este problema, es útil construir funciones independientes de cada Browser. Asi, el hecho de mover o modificar un elemento es transparente para el programador.
Metodos Layer
Netscape provee por si mismo un conjunto de funciones predefinidas que son aplicables a objetos Layer. La lista es la siguiente:
load("filename", y)
moveAbove(layerObj)
moveBelow(layerObj)
moveBy(deltaX, deltaY)
moveTo(posX, posY)
moveToAbsolute(posX, posY)
resizeBy(deltaX, deltaY)
resizeTo(width, height)
La forma de usar estas funciones es: document.myLayer.moveTo(50,30).
Detectar Browser
Antes de comenzar a construir funciones, necesitamos saber que browser esta utilizando el cliente. Para hacer esto, utilizamos en siguiente código en Javascript:
var isNav, isIE;
var coll = ;</FONT></P>
<P class=CompletoP><FONT size=2>var styleObj = ;
if( parseInt( navigator.appVersion >= 4 ) {
if( navigator.appName == "Netscape" ) {
isNav = true;
} else {
isIE = true;
coll = "all.";
styleObj = ".style"; } }
A modo de ejemplo, si queremos modificar la propiedad Z-Index del elemento myObj (que es una propiedad igual para ambos browsers, en caso contrario, habria utilizar la propiedad adecuada dependiendo del valor de las variables isNav y isIE), sencillamente colocamos:
var obj = eval("document." + coll + "myObj" + styleObj);
obj.zIndex = 5;
Librería
En esta sección veremos como construir funciones independientes del browser utilizado. Es de mucha utilidad almacenar este conjunto de funciones dentro de una libreria .js. A modo de ejemplo, veamos tres funciones tipicas. Para ver la lista completa haga clic (con el botón derecho, grabar a disco, si no funciona un click simple; esto porque el archivo está en Javascript y algunos browsers intentarán interpretarlo).
// Convierte un nombre como string de un objeto o una referencia a un objeto // en un objeto valido, dependiendo del browser function getObject(obj) {
var theObj;
if( typeof obj == "string" ) {
theObj = eval("document." + coll + obj + styleObj);
} else {
theObj = obj;
} return theObj; }
// Posiciona un objeto en una coordenada dada en pixeles function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if( isNav ) {
theObj.moveTo( x,y );
} else { theObj.pixelLeft = x;
theObj.pixelTop = y; } }
// Cambia el color de fondo de un objeto function setBGColor(obj, color) {
var theObj = getObject(obj);
if( isNav ) { theObj.bgColor = color;
} else { theObj.backgroundColor = color; } }
La forma de utilizar esta libreria, seria de la forma:
<script language="Javascript" src="dhtml.js"></script>
Resize y Netscape
Netscape tiene el problema que cuando el usuario modifica el tamano de la ventana del Browser, todo el Layout (esquema) de los elementos se destruye. La solución es recargar la página.
Para evitar este problema, debemos obligar a regargar la pagina cuando el usuario modifique el tamaño de la ventana. Para hacer esto, utilizamos el siguiente código:
// Funcion que recarga la pagina function handlerResize() {
location.reload();
return false; }
// primer uso if( isNav ) {
window.captureEvents(Event.RESIZE);
window.onResize = handlerResize(); }
// segundo uso <body onResize="handlerResize()">
