Sencillo pero raro, redefinir ancho y alto

[caneva]

Actualmente tengo una función que crea una ventana (una capa CSS) mediante DOM con la siguiente estructura:

Código PHP:

  <div id="ventana">
<div id="fondo"></div>
<div id="contenido>
</div>
</div> 
   

el div "fondo" es simplemente un fondo transparente blanco. Dentro de esa misma función que crea la "ventana" tras crear el <div> "contenido" este se rellena leyendo un archivo .php con por ejemplo un formulario. Llegados a este punto pense que para situar la capa "contenido" en el centro de la pantalla primero dejaría que se llenara con el archivo .php y luego tras colocar el objeto en su sitio haría una llamada a ese al div de id="contenido" para coger su ancho y alto y así poder posicionarla correctamente, pero el problema es que estos no existen y esa es mi sorpresa, si has rellenado un div con algo el div se adapta al lo que le eches en dimensiones, pero su valor de ancho y alto no aparecen por ningún lado ¿alguna idea?

[zerokilled]

¿los valores de ancho y alto estan definidos en un stylesheet? bien, si es el caso, leer las dimensiones a traves del objeto style del elemento, siempre te devolvera un valor vacio. la razon es que el objeto style no es otra cosa mas que el atributo style de los elementos. si el elemento no tiene definido el atributo, todos los valores que intentes recoger por el objeto style seran devuelto vacios. para ello, puedes usar otra propiedad que devuelve las dimensiones del elemento: offsetWidth y offsetHeight. fijate que son propiedades del elemento, no del objeto style.

[caneva]

Iniciado por zerokilled

¿los valores de ancho y alto estan definidos en un stylesheet? bien, si es el caso, leer las dimensiones a traves del objeto style del elemento, siempre te devolvera un valor vacio. la razon es que el objeto style no es otra cosa mas que el atributo style de los elementos. si el elemento no tiene definido el atributo, todos los valores que intentes recoger por el objeto style seran devuelto vacios. para ello, puedes usar otra propiedad que devuelve las dimensiones del elemento: offsetWidth y offsetHeight. fijate que son propiedades del elemento, no del objeto style.

Efectivamente los valores de ancho alto se pretendían alterar mediante objeto.style.height/widht respectivamente, claro que para que se adaptara el div al contenido cargado desde el .php directamente en la creación del objeto no definí ningún height ni width que pudiera limitar esa "adaptabilidad".

Parece por tanto que la única opción que me queda es la que comentas de usar offsetWidth y offsetHeight, pero me surge otro problema, cree esta función:

Código:

function recolocar_ventana()
{
	var ventana = document.getElementById("contenido");
	var anchofinal = ventana.offsetWidth;
	var altofinal = ventana.offsetHeight;
	alert("Anchofinal: "+anchofinal+", Altofinal: "+altofinal);
	ventana.style.marginLeft = "-"+ (anchofinal/2) + "px";
	ventana.style.marginTop = "-" + (altofinal/2) + "px";
}

Y luego hice una llamada a la misma dentro de la función que crea la ventana, pero justo después de que esta fuera rellenada y colocada en el html. Extrañamente devuelve los valores incorrectos, como si no le hubiera dado tiempo a rellenar el <div> con el contenido de .php, ya que si llamo a la función desde un enlace cargado a la vez que el formulario si responde bien ¿sugerencias? ¿un wait o algo antes de la llamada u alguna forma mas exacta de saber si el div se ha rellenado bien antes de mirar su ancho y alto?

[zerokilled]

¿como estas rellenando el DIV? ¿con ajax? si es asi, ¿en que momento invocas la funcion que crea la ventana?

[caneva]

Iniciado por zerokilled

¿como estas rellenando el DIV? ¿con ajax? si es asi, ¿en que momento invocas la funcion que crea la ventana?

Código PHP:

  function recolocar_ventana()
{
    var ventana = document.getElementById("contenido");
    var anchofinal = ventana.offsetWidth;
    var altofinal = ventana.offsetHeight;
    alert("Anchofinal: "+anchofinal+", Altofinal: "+altofinal);
    ventana.style.marginLeft = "-"+ (anchofinal/2) + "px";
    ventana.style.marginTop = "-" + (altofinal/2) + "px";
}

function crear_ventana(nombre, ancho, alto, referencia, seccion)
{
    var anterior = document.getElementById(nombre);
    if ( !anterior ) //Si no existe ya esa ventana creala. 
    {
        var divprincipal = document.createElement("div"); //Creamos un elemento div
        divprincipal.setAttribute("id", nombre); //Le asignamos como Id el parámetro nombre.
        divprincipal.style.visibility = "visible";
        
        //Creamos sus dos divs hijos.
        var hijoprincipal = document.createElement("div");
        divprincipal.appendChild(hijoprincipal);
        hijoprincipal.setAttribute("id", "fondo");
        //Atributos de estilo CSS:
        hijoprincipal.style.position = "absolute";
        hijoprincipal.style.backgroundColor = "#CCCCCC";
        hijoprincipal.style.opacity = "0.5";
        hijoprincipal.style.filter = "alpha(opacity=50)";
        hijoprincipal.style.height = "100%";
        hijoprincipal.style.width = "100%";    
        hijoprincipal.style.top = "0";
        hijoprincipal.style.left = "0";
        hijoprincipal.style.zIndex = "1";
        
        var hijosecundario = document.createElement("div");
        divprincipal.appendChild(hijosecundario);
        hijosecundario.setAttribute("id", "contenido");
        //Atributos de estilo CSS:
        hijosecundario.style.position = "absolute";
        hijosecundario.style.backgroundColor = "#FFFFFF";;
        hijosecundario.style.top = "50%";
        hijosecundario.style.left = "50%";
        hijosecundario.style.zIndex = "2";
        hijosecundario.style.padding = "25px";
        
        xhr = getHTTPObject();
        xhr.onreadystatechange = function(){
        if(this.readyState != 4)return;
        hijosecundario.innerHTML = this.responseText; //hijosecundario es el objeto DOM que contendrá lo que se cargue en la petición ajax
        }
        xhr.open('get', 'http://www.midominio.com/objetos/formularios/'+ nombre +'.php?sec='+ seccion, true); //Cargar el contenido de la ventana
        xhr.send(null);
        
//Colocamos el divprincipal con sus hijos en el punto de referencia del html o "ancla".        
var ancla = document.getElementById(referencia);
        ancla.appendChild(divprincipal);
        
        recolocar_ventana(); //Reposicionamos la "ventana"
    }
    else
    { abrir_ventana(nombre); }
} 
   

Por cierto el error no ocurre en IE, si en FF y Chrome.

[zerokilled]

intentalo asi. la siguiente porcion corresponde al evento onreadystatechange.

Código:

hijosecundario.innerHTML = this.responseText; //hijosecundario es el objeto DOM que contendrá lo que se cargue en la petición ajax
recolocar_ventana(); //Reposicionamos la "ventana"
}

si aun asi te da problema, la ultima solucion que se me ocurre (y que a mi juicio es un tanto puerco), invocas la funcion programandola con un tiempo. o sea, setTimeout.

Código:

setTimeout(recolocar_ventana, 250); // se ejecuta luego de 250ms;

[caneva]

Iniciado por zerokilled

intentalo asi. la siguiente porcion corresponde al evento onreadystatechange.

Código:

hijosecundario.innerHTML = this.responseText; //hijosecundario es el objeto DOM que contendrá lo que se cargue en la petición ajax
recolocar_ventana(); //Reposicionamos la "ventana"
}

si aun asi te da problema, la ultima solucion que se me ocurre (y que a mi juicio es un tanto puerco), invocas la funcion programandola con un tiempo. o sea, setTimeout.

Código:

setTimeout(recolocar_ventana, 250); // se ejecuta luego de 250ms;

Colocandola ahí funciona al contrario, es decir en FF y Chrome pero no en IE ¿acaso manejan de forma distinta los eventos de ajax? de todas formas no le veo el sentido, porque si ahí aun no han colocado el contenido ¿cómo es que ya saben FF y Chrome el valor del ancho y alto?

Si, la solución del timer funciona, pero como a ti no me gusta, debe haber otra menos "chapuza" :S

[zerokilled]

jeje, se soluciona un error para entrar en otro! ahi me agarraste. en terminos practico yo no uso ajax pero en teoria se como funciona. de todos modos, si puedes hacer una version reducida y subirla a la web para ver si le encuentro alguna solucion. sino, pasate por el foro AJAX, quizas alli esten mas familiarizado con los errores referente a renderizacion con XHR. es curioso, en teoria asi es como debe ir el codigo.