dejar un solo div abierto en internet explorer

decano1891 · #1 (**permalink**) 30/09/2010, 13:46

Buenas tardes, estoy teniendo un inconveniente al intentar dejar un unico div abierto en una pagina que tiene alrededor de 40, cuando pincho uno de ellos si hay otro abierto se debe cerrar, esto funciona perfectamente en mozilla, etc pero no en internet explorer, si alguien me puede dar una mano muy agradecido.
Copio el codigo a continuacion:

function ocultatodo(prm1, prm2) {
anexo = '_1';
var elemento1 = document.getElementsByName("namediv_1");
for(var i=0; i<elemento1.length; i++) {
if(elemento1[i].style.display=='block'){
elemento1[i].style.display='none';
}
}
document.getElementById(prm1+prm2+anexo).style.dis play="block";
mostrarDiv2();
}

function mostrarDiv2(){
var elemento = document.getElementsByName("namediv");
for(var i=0; i<elemento.length; i++) {
if(elemento[i].style.display=='none'){
elemento[i].style.display='block';
}
}
document.getElementById(prm1+prm2).style.display=" none";
}

Perr0 · #2 (**permalink**) 30/09/2010, 14:28

coloca este script en el header o llamalo en un js

salu2

Código:

document.onclick=function (e){
    if (e && e.target)
	foco=e.target
	else
	foco=document.activeElement
	if(foco.tagName!="DIV" || !foco.id){
		alert("solo funciona con divs y tienen que tener \"Id\"\n despues deje este alert como comentario\n\nsu amigo Perr0")
		return false
	}
	var divs=document.getElementsByTagName("div")
	for(i=0;i<divs.length;i++)
	if(foco.id!=divs[i].id) divs[i].style.display="none"
}

decano1891 · #3 (**permalink**) 30/09/2010, 14:31

Voy a probarlo, muchas gracias

decano1891 · #4 (**permalink**) 30/09/2010, 14:52

No me funciona, me deja toda la pagina en blanco

Perr0 · #5 (**permalink**) 30/09/2010, 15:10

create una pagina con este codigo

luego adaptalo
es lo mismo pero funciona aqui, con IE y FF

la cosa es que te lee la funcion click, si detecta un div y tiene Id lo tira a display="none"

Lo mas probable es que tengas todos los divs contenidos en uno, habria que hacer un arreglo

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script>
document.onclick=function (e){
    if (e && e.target)
	foco=e.target
	else
	foco=document.activeElement
	if(foco.tagName!="DIV" || !foco.id){
		alert("solo funciona con divs y tienen que tener \"Id\"\n despues deje este alert como comentario\n\nsu amigo Perr0")
		return false
	}
	var divs=document.getElementsByTagName("div")
	for(i=0;i<divs.length;i++)
	if(foco.id!=divs[i].id) divs[i].style.display="none"
}
</script>
<style>
div{
	width:160px;
	height:100px;
	position:absolute;
	padding:5px;
}
.c1{
	border:3px solid red;
	background-color:#093;
}
.c2{
	border:3px solid blue;
	background-color: #FF0;
}
</style>
</head>

<body>
<div id="div1" class="c1" style="left:184px; top: 184px"></div>
<div id="div2" class="c1" style="left:111px; top: 27px"></div>
<div id="div3" class="c2" style="left:438px; top: 42px"></div>
<div id="div4" class="c2" style="left:580px; top: 116px"></div>
<div class="c2" style="left:751px; top: 133px"></div>
</body>
</html>

Perr0 · #6 (**permalink**) 30/09/2010, 15:21

aca esta corregido, debes saber cual o cuales son tus div contenedores

salu2

lo acomodas a tu pinta

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script>
document.onclick=function (e){
    if (e && e.target)
	foco=e.target
	else
	foco=document.activeElement
	if(foco.tagName!="DIV" || !foco.id){
		alert("solo funciona con divs y tienen que tener \"Id\"\n despues deje este alert como comentario\n\nsu amigo Perr0")
		return false
	}
	var divs=document.getElementsByTagName("div")
	//	AQUI IDENTIFIQUE "divmain" COMO EL DIV CONTENEDOR
	for(i=0;i<divs.length;i++)
	if(foco.id!=divs[i].id && divs[i].id!="divmain") divs[i].style.display="none"
}
</script>
<style>
div{
	width:160px;
	height:100px;
	position:absolute;
	padding:5px;
}
.c1{
	border:3px solid red;
	background-color:#093;
}
.c2{
	border:3px solid blue;
	background-color: #FF0;
}
.cmain{
	z-index:10;
}
</style>
</head>

<body>
<div id="divmain" class="cmain">
<div id="div1" class="c1" style="left:184px; top: 184px"></div>
<div id="div2" class="c1" style="left:111px; top: 27px"></div>
<div id="div3" class="c2" style="left:438px; top: 42px"></div>
<div id="div4" class="c2" style="left:580px; top: 116px"></div>
<div class="c2" style="left:751px; top: 133px"></div>
</div>
</body>
</html>

decano1891 · #7 (**permalink**) 01/10/2010, 06:57

impecable, ya mismo lo voy a probar, saludos y gracias por las respuestas