Problemas con divs apilados

Oasis8 · #1 (**permalink**) 03/02/2011, 06:51

El problema que tengo es que si defino en css los div con display:none, despues no puedo cambiarlo de ningun modo. La soluciones que he encontrado es usar la propiedad visibility, o quitando el display del css y asignarle esa propiedad al inicio de la pagina con js.

¿ Alguna luz de porque cuando se pone el display:none en css, no hace caso cuando se intenta cambiar con js ?

Dejo aqui un exctracto de codigo deonde he aislado el problema

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<style>
 
#div1 {
    z-index:1;
    width:600px;
    height:400px;
    background:#fffcd1;
    color:#444;
}
 
#div2 {
    position: absolute;
    z-index:2;
    top:50px;
    left:50px;
    width:400px;
    height:200px;
//  display:none; 
    background:red;
    color:#444;
}
 
#div3 {
    position: absolute;
    z-index:3;  
    top:100px;
    left:100px; 
    width:200px;
    height:100px;
//  display:none; 
    background:blue;
    color:#444;
}
 
</style>
 
<script>
 
function cambia(id) {
 
  var fila = document.getElementById(id);
  if (fila.style.display != "none") {
    fila.style.display = "none"; //ocultar fila
  } else {
    fila.style.display = ""; //mostrar fila
  }
 
}
 
function inicio() {
 
    document.getElementById("div2").style.display = "none";
    document.getElementById("div3").style.display = "none";
 
}
 
</script>
 
</head>
 
<body onload="javascript:inicio()">
 
<div id='div1'>
aaaaaaaa1111
</div>
 
<div id='div2'>
aaaaaaaa222222222
</div>
 
<div id='div3'>
aaaaaaaa3333333333
</div>
 
<a href='javascript:cambia("div2")'>Mostras/ocultar el 2</a><br>
<a href='javascript:cambia("div3")'>Mostras/ocultar el 3</a><br>
</body>
</html>

Adler · #2 (**permalink**) 03/02/2011, 07:01

Hola

Dos cosas

En css se comenta con /* */
No te funciona por que estás asignando valor en lugar de evaluar. (=) asigna valor, (==) evalua

Suerte

Oasis8 · #3 (**permalink**) 03/02/2011, 10:21

Gracias por responder.

Pero no entiendo tu respuesta. Si lo que quiero cambiar es el valor tendre que asignarselo con
fila.style.display = "";
o
fila.style.display = "none";

Nunca habia tenido problemas con esto y la unica diferencia es que estas capas las necesito con position absolute.

El ejemplo que he puesto tal y como esta funciona correctamente, pero si descomento display:none, deja de funcionar y las capas nunca se muestran.

Tomo nota de lo que me dices y en el futuro comentare css con /* */

goteen_mx · #4 (**permalink**) 03/02/2011, 10:35

Dale la propiedad block para mostrar el div

if (fila.style.display != "none") {

fila.style.display = "none"; //ocultar fila

} else {

fila.style.display = "block"; //mostrar fila

}

Oasis8 · #5 (**permalink**) 03/02/2011, 10:54

Correcto!!!

Con esa modificacion ya si funciona con el display none incluido en el css.

El problema, es que es parte de una funcion generica que la uso en multitud de ocasiones, y no se si el modificarla me descalbalgara otras cosas.

Optare por clonarla o usar una de las dos "soluciones" que antes comente

Gracias