Posicionar capas "dinámicamente"

pinchoso · #1 (**permalink**) 12/06/2006, 02:36

Hola,

estoy montando una cabecera donde tengo varias capas. Estas capas han de ir alineadas a la derecha de la página.

teniendo en cuenta las diferentes resoluciones con las que se podrá ver la página decidí utilizar el siguiente código para no tener que preocuparme de dicha resolución y que estas se alinearan directamente:

Código:

 
function locsearch() {
var w = document.getElementById('head').offsetWidth;
w = w-223;
document.getElementById('searchfor').style.left = w;
document.getElementById('searchbk').style.left = w;
}
 
<body onload='locsearch()'>
 
-----estilos-------
 
#searchfor {
 position:absolute;
 top:19px;
 width:205px;
 height:42px;
 z-index:4;
 border:1px solid #FFFFFF;
 display:none;
}

#searchbk {
 position:absolute;
 top:19px;
 width:223px;
 height:46px;
 z-index:3;
 display:none;
}

El problema es que me funciona en IE, pero en FireFox se muestran a la izquierda, o sea que no coge el valor de style.left
A ver si alguien me muestra el camino

Un saludo!

tunait · #2 (**permalink**) 12/06/2006, 02:45

Hola

debes añadirle la unidad de medidas

document.getElementById('searchfor').style.left = w + "px";

un saludo

JavierB · #3 (**permalink**) 12/06/2006, 02:46

Hola pinchoso

Tienes que poner siempre las unidades de medida, es decir px, cm, etc... En IE te funciona porque si no pones nada entiende que son pixels. Esto debería funcionarte:

document.getElementById('searchfor').style.left = w+'px';

Edito: ¡Jolines, que precisión! hemos contestado en el mismo segundo

Saludos,

pinchoso · #4 (**permalink**) 12/06/2006, 02:55

Ei, muchas gracias a los dos! Que velocidad endiablada!
No sabia que era imprescindible poner las unidades, un saludo!

pinchoso · #5 (**permalink**) 12/06/2006, 08:06

Hola otra vez, me surgió otra duda.

¿¿Porque el mismo código no me funciona al ponerlo con el evento "onresize"??

Gracias!

tunait · #6 (**permalink**) 12/06/2006, 08:08

¿Cómo se lo estás pidiendo?

pinchoso · #7 (**permalink**) 12/06/2006, 08:21

Hola tunait,
en el mismo body le pongo onresize="locsearch()"

no es correcto?

tunait · #8 (**permalink**) 12/06/2006, 08:49

mmmnop, no es un evento para body, en todo caso aplícaselo al objeto window

pinchoso · #9 (**permalink**) 12/06/2006, 09:03

Lo acabo de probar y me da error, ya que me dice que el objeto 'head' que es la tabla de la cual cojo el ancho de la página no tiene prodiedades:

-document.getElementById('head') has no properties.....

Creo que llama a la función antes que la pagina se haya cargado y por eso no "encuentra" propiedades.

La página esta dentro de un frameset que se maximiza al cargarse.
Me lo seguiré mirando, pero si me da muchos problemas lo dejaré como esta ahora.

Saludos!

tunait · #10 (**permalink**) 12/06/2006, 09:17

Mete el código debajo de esa tabla entonces para que se haya cargado ya en el documento al llegar al script

pinchoso · #11 (**permalink**) 12/06/2006, 09:35

Na, que no hay manera, ahora en IE poniendo al final de la página antes de cerrar el body:

<script>
window.onresize=locsearch()
</script>

me da el siguiente error: No implementado

i en FF no da error (al menos no sale en la consola) pero tampoco hace nada...

Gracias y disculpas por la pesadez!

tunait · #12 (**permalink**) 12/06/2006, 09:44

Pero no debes poner los paréntesis en la llamada a la función en el evento.

Mira este ejemplo

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<script type="text/javascript">
function pepe(){
	alert('hola')
}
window.onresize = pepe
</script>
</body>
</html>

pinchoso · #13 (**permalink**) 12/06/2006, 12:01

Ok, lo probaré (hasta el viernes no podré hacerlo) y a ver si funciona, muchas gracias por tu tiempo tunait, es un placer que te traten así en los foros.

Saludos.

tunait · #14 (**permalink**) 12/06/2006, 14:04

Muchas de nadas

ya nos contarás el viernes si lograste solucionarlo

Un saludo

pinchoso · #15 (**permalink**) 16/06/2006, 01:58

Hola! ya es viernes...

Lo prové, pero nada...la llamada a la función la hace bien pero ie me da un error "argumento no válido".

lo dicho de momento lo dejaré si en onresize, y más adelante y si es necesario ya me volveré a pelear, un saludo!

pinchoso · #16 (**permalink**) 21/06/2006, 06:00

He estado probando un código similar en otro proyecto que estoy montando y en este caso no me da problemas al ponerlo tal y como dice tunait (por cierto, felicidades por el reconocimiento de forosdelweb).

Me imagino que debe haber algo mal en el proyecto con el que me encontré el problema así que lo que decia tunait funciona perfectamente (aunque ya me lo imaginaba)

bueno, un saludo a tod@s.