Mover capas ¡por favor!

[Jamlet]

Por favor, alguien que sepa de script.aculo.us, o de mootools, o jQuery, o de lo que sea que necesito para poder mover capas en un html. He estado mirando y no me puedo creer que me cueste tanto. ¡LLevo días!

No sé de javascript pero solo queiro hacer una web en la que al empezar entren en pantalla diferentes capas y se queden quietas en un sitio concreto. Nada más. Ni Drag and Drop, ni nada del otro mundo. Pero o es demasiado sencillo y nadie habla de ello o es imposible.

Ayuda, por favor.

[caricatos]

Hola:

Ne me entero... en el primer párrafo he entendido que buscas info para mover capas, y en el segundo que se queden fijas

La posición de una capa se fija con estilos, y se puede modificar esa posición, simplemente modificando los estilos top y left de esa capa (sin olvidar las medidas...), el estilo position absolute, y la capa contenedora position: relative...

Aclara un poco mejor tu problema, y entre otras acciones, revisa nuestras maravillosas FAQs... seguro que encuentras cosas interesantes... además son temas bastante recurrentes, así que otra acción sería realizar una búsqueda.

Saludos

[Jamlet]

Gracias por contestar tan pronto. Intentaré explicarme mejor.

Mi web simula ser una mesa de trabajo y quiero que nada más entrar se vea la mesa vacia. A continuación encima de la mesa se colocarán papeles (que pretendo que sean diferentes capas) que apareceran desplazandose desde arriba y desde la izquierda para acabar deteniendose en una posición concreta. Despues en una de esas capas cargaré él texto y las imágenes de la web.

Nada como ejemplos visuales:

Algo así es mi web: http://www.tohavit.com/abi09/

y quiero que lo elementos entren moviendose como hace el logo de script.aculo.us en esta web: http://script.aculo.us/

Muchas gracias.

[Panino5001]

Como te dijeron, sólo se trata de manipular los estilos css dentro de un temporizadorque los actualice en función a algún cálculo. En el caso que mencionás, se trata de un elemento con un estilo position puesto a absolute y un left negativo (ejemplo: <div style="position:absolute; left:-500px">).
Lo que pasa es que si no sabés nada de javascript, como señalaste, no te será sencillo hacerlo. Mejor empezar con lo básico y luego dedicarte a lo sofisticado. Sobre todo en lo que se refiere a animaciones hay muchas cosas a tener en cuenta.
Quizá este enlace te ayude un poco, aunque no estoy muy seguro:
http://www.disegnocentell.com.ar/notas2.php?id=239

[Jamlet]

Pues se ve complicado pero creo que podré apañarmelas con ese enlace, lo que no sé es si lo haré a tiempo para entregar el trabajo

Muchas gracias a todos.

[Jamlet]

Hola, no. No puedo apañarmelas porque no tengo tiempo

He retomado la idea de la capa situada por encima de la película flash. La abandoné porque cuando una película flash está incrustada al 100% de ancho y alto, si el ancho de la ventana es mayor que el de la película, ésta no deforma las imágenes, amplia el ancho de la película pero los elementos interiores conservan el tamaño.

Me he dado cuenta de que el valor que me sirve es el alto, creo que con javascript se conseguiría lo que quiero pero no sé hacerlo.

La idea es:

Saco el alto de la ventana (AltoVentanaNuevo) con windowInnerHeight y por una regla de tres:

AnchoVentanaNuevo = AnchoVentanaOriginal * AltoVentanaNuevo / AltoVentanaOriginal

Y luego con el AnchoVentanaNuevo puedo calcular por el mismo método las medidas del div y los márgenes que debe tener.

Ahora bien, ¿alguíen podría decirme como se pondría esta función en flash? Y otra dudilla. Si quiero variar el tamaño del div, volvería al problema de animar capas, pero este solo sería un aumentod e tamaño.

Espero que podáis ayudarme. Muchas gracias.

[Panino5001]

Con esta función podés obtener las dimensiones de la ventana en todo momento:

Código PHP:

  <script>
function getWindowData(){
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.innerWidth != 'undefined'){
        widthViewport= window.innerWidth-17;
        heightViewport= window.innerHeight-17;
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
        widthViewport=document.documentElement.clientWidth;
        heightViewport=document.documentElement.clientHeight;
    }else{
        widthViewport= document.getElementsByTagName('body')[0].clientWidth;
        heightViewport=document.getElementsByTagName('body')[0].clientHeight;
    }
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
</script> 
  

Ejemplo:

Código PHP:

  var m=getWindowData();
alert(m[0]);//este es el ancho de la porción visible de la ventana sin contar lo que queda oculto por el scroll, si es que existe (o sea, es el ancho del viewport). 
   

(Los otros datos son m[1], m[2], etc. y los nombres son bastante descriptivos, fijate en el return. )
En Flash, el objeto Stage tiene las ptropiedades width y height, con las que podés obtener las medidas del escenario; trace (Stage.width);//por ejemplo.

[Jamlet]

Hola de nuevo,

me embarga la emoción, creo que estoy cerca del final. Creo que tengo todos los valores que necesito y creo que son correctos. El problema ahora es cómo los aplíco. Os lo pregunto mientras busco como hacerlo porque si no os cuesta trabajo confio en que me echéis otra mano más.

Tengo el ancho y el alto que debe tener el div y tb tengo el margen superior y lateral que debe guardar. Tengo que ver como cambio los valores en el css. Cada vez que varie el tamaño de la ventana ha de variar el div. No necesito que sea una animación fluida, solo que se reescale.

Muchas gracias por la ayuda prestada hasta ahora.

[Panino5001]

Quizá esto te sirva:

Código:

window.onresize=function(){
document.getElementById('idDelObjeto').style.width=250+'px';
}

En lugar del 250, la medida que quieras (seguro la que obtenés con alguna función que la calcule). Y en lugar de idDelObjeto, el atributo id del objeto a modificar (si tu html fuera: <div id="algo">, ese algo sería lo que deberías usar)

[Jamlet]

Hola, quería hacer otra consulta Como véis tengo el código de tal manera que la capa varía solo al reescalar la página. Es que no sé como hacer que la reescale nada más entrar en la página. Hasta he pillado un manual de javascript en la biblioteca y no doy con la forma. ¿Me podéis ayudar? ¿Cómo hago para que varíe la capa al acceder el usuario a la web? Es que la deja con los valores que le pongo por defecto. Prometo aprender bien javascript y volver aquí para ayudar a novatos como yo

Código PHP:

  window.onresize=function(){
 
    var anchoTotal = [];
    if(typeof(window.innerWidth) == 'number') {
        // No es IE
        anchoTotal = [window.innerWidth];
    } else if(document.documentElement && (document.documentElement.clientWidth)) {
        //IE 6 en modo estandar (no quirks)
        anchoTotal = [document.documentElement.clientWidth];
    } else if(document.body && (document.body.clientWidth)) {
        //IE en modo quirks
        anchoTotal = [document.body.clientWidth];
    }
 
    var nuevoAlto = [];
    if(typeof(window.innerHeight) == 'number') {
        // No es IE
        nuevoAlto = [window.innerHeight];
    } else if(document.documentElement && (document.documentElement.clientHeight)) {
        //IE 6 en modo estandar (no quirks)
        nuevoAlto = [document.documentElement.clientHeight];
    } else if(document.body && (document.body.clientHeight)) {
        //IE en modo quirks
        nuevoAlto = [document.body.clientHeight];
    }
 
    var nuevoAncho = [];
    nuevoAncho = 1007 * nuevoAlto / 693;
 
    var nuevoAnchoDiv = [];
    nuevoAnchoDiv = nuevoAncho * 776 / 1007;
 
    var nuevoAltoDiv = [];
    nuevoAltoDiv = nuevoAlto * 447 / 693;
    
    var margenes = [];
    margenes = anchoTotal - nuevoAnchoDiv;
    
    var margenIzquierda = [];
    margenIzquierda = margenes * 0.714285;
 
    var margenSuperior = [];
    margenSuperior = nuevoAlto * 196 / 693;
 
 
document.getElementById('web').style.width=parseInt(nuevoAnchoDiv)+'px';
document.getElementById('web').style.height=parseInt(nuevoAltoDiv)+'px';
document.getElementById('web').style.marginLeft=parseInt(margenIzquierda)+'px';
document.getElementById('web').style.marginTop=parseInt(margenSuperior)+'px';
} 
   

[Panino5001]

Probá así:

Código:

window.onload=window.onresise=resto del código