Generalmente no hay problemas de compatibilidad cuando se asigna una localización nueva para el elemento de tus CSS-P.
Para mover a un elemento llamado "myelement" al coordinador (100, 50) simplemente tienes que asignar valores nuevos en la izquierda y arriba:
myelement.left = 100 myelement.top = 50No te olvides que myelement deberá ser un indicador variable definiendo algo como esto:
function init() {
if (ns4) myelement = document.myelementDiv
if (ie4) myelement = myelementDiv.style
}
Desde este momento, esto será inherente en todos los ejemplos así que no olvides!
Como he dicho, no hay problemas de compatibilidad con asignar una nueva localización, sin embargo, hay allí un problema cuando se captura la localización actual del elemento. Esto pasó ya que IE guarda sus localizaciones con un "px" al final de los valores (como se ha visto en él ejemplo Cross-Browser Javascript.
Para deshacerse de "px" puedes parse-ear el valor a un "integer".
Entonces en lugar de solamente escribir
myelement.left
Tienes que escribir
parseInt(myelement.left)
Por ejemplo, si deseas que una advertencia aparezca con las actuales localizaciones de la izquierda y arriba tienes que escribir:
alert(parseInt(myelement.left) + ", " + parseInt(myelement.top))
Créeme, siempre escribiendo parseInt() antes que todos tus variables te pondrá un poco enojado. Pronto te preguntaras si hay una forma más fácil... y pienso que tengo una buena respuesta para eso.
No hay nada que te prohibe de agregar más propiedades dentro de nuestro indicador variable, o object, como pienso llamarle a partir de este momento.
Lo que yo sugiero que hagas, es de guardar la localización actual del elemento en propiedades separadas fuera de las propiedades izquierda y arriba. Para hacer estas nuevas propiedades tienes que asignarlas directamente. Comenzare con fijarles la localización actual:
myelement.xpos = parseInt(myelement.left) myelement.ypos = parseInt(myelement.top)
Luego después de este punto, si alguna vez necesitas saber a donde están las posiciones de la izquierda y arriba, solamente tienes que chequear al valor de myelement.xpos y myelement.ypos respectivamente. Nuestra nueva advertencia "alert()" aparecerá así, entonces:
alert(myelement.xpos + "," + myelement.ypos)
Cuando desees cambiar la localización del elemento, lo PRIMERO que tienes que cambiar son los valores de xpos y ypos. LUEGO tienes que fijar los valores de la izquierda y arriba iguales que los xpos y ypos respectivamente. Por ejemplo:
function move() {
myelement.xpos = 200
myelement.ypos = -40
myelement.left = myelement.xpos
myelement.top = myelement.ypos
}
Debes de siempre guardar los valores de xpos y ypos en igualdad con los valores de la izquierda y arriba. De esa forma cuando chequeas a los elementos myelement.xpos, sabrás que siempre serán lo mismo que él myelement.left.
Ejemplo: moving1.html [fuente] - para ver un ejemplo utilizando esta técnica.
No es nada difícil ¿verdad?. Esta idea será lo básico para cualquiera cosa que te muestre en los ejemplos futuros. Parecerá un poco tonto de tener estos variables extras, pero cuando comiences a ver cosas mas complicadas encontraras que esta técnica ayuda a que tu código sea más liso.
|
Aparte:
Debes de estarte preguntando de porque utilizar xpos y ypos como mis propiedades en lugar de solamentex y y... Bueno he hecho eso por una razón: Es muy poco conocido que Netscape ha incluido ya a estas propiedades dentro de las CSS-P. He encontrado eso si tu utilizas x y y entonces tus valores siempre estarán guardados integrales "integers". Ahora tal vez puedes pensar " ¿qué importa?"... pero hay casos cuando necesitaras de guardar las actuales posiciones de la izquierda y arriba con algo mas que solo integers (números reales con decimales y todo) y esto no es posible si solamente utilizas x y y. |
En ese último ejemplo he codificado los movimientos - he escrito funciones separadas para cada movimiento. Ahora si deseas mover muchas diferentes capas a varias localizaciones no tienes que continuar escribiendo mas funciones. Entonces lo que podemos hacer es de crear algunas funciones genéricas las cuales se ocuparan de casi todos estos tipos de movimientos.
La Función moveTo()
La Función moveTo() toma a tu capa/objeto y la mueve directamente a una nueva localización
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
Para utilizar esta función es bastante fácil - todo lo que tienes que hacer es decirle que capa/objecto que tiene que utilizar y las nuevas localizaciones de X y Y. Por ejemplo, si inicias tu capa con:
if (ns4) mysquare = document.mysquareDiv if (ie4) mysquare = mysquareDiv.style mysquare.xpos = parseInt(mysquare.left) mysquare.ypos = parseInt(mysquare.top)Luego para mover el cuadro a la nueva localización tienes que escribir:
moveTo(mysquare,50,100)
La Función moveBy()
MoveBy funciona exactamente igual pero en lugar de mover esta directamente a una nueva localización cambia la capa con darle en número de pixeles.
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
Para cambiar mi cuadrado "mysquare" 5 pixeles a la derecha, y 10 pixeles arriba tienes que escribir:
moveBy(mysquare,5,-10)
Ejemplo: moving2.html [fuente] - para ver un ejemplo
| Casa | Próxima Lección: Sliding (Desplazarse) |