Problema con capas

ferra99 · #1 (**permalink**) 15/04/2010, 03:16

Hola a todos, soy novato en html y necesito a traves de un boton hacer aparecer y desaparecer capas, lo he intentado asi pero no funciona, solo oculta, donde veis el error?

<html>
<head>
<script LANGUAGE="javascript">

function decide(){
op=document.getElementById('capa1').getAttribute(' visibility');
if (op=="hidden"){muestra();}
else {oculta();}
}

function oculta(){
document.getElementById('capa1').style.visibility= "hidden";
}
function muestra(){
document.getElementById('capa1').style.visibility= "visible";
}
</script>

<title>Mostrar/ocultar capas con Javascript</title></head>
<body>
<div id="capa1" style="position:relative;">
</div>
<a href="#" onclick="decide()">logo</a>
</body>
</html>

saludos

ferra99 · #2 (**permalink**) 15/04/2010, 04:27

Buscando por el foro he cambiado el script hasta quedar asi:

<script LANGUAGE="javascript">

var
capa=document.getElementById("capa1");

function decide(){
if (capa.style.visibility == "hidden"){
capa.style.visibility = "visible" ;
}else{
capa.style.visibility = "hidden";
}
}

</script>

Pero ni asi me funciona.... alguna idea?

emprear · #3 (**permalink**) 15/04/2010, 11:27

Prueba con lo siguiente:

Código para mostrarcapa.js

Código:

/* ---------------------------- */
/* MostrarOcultar Capas			*/
/* ---------------------------- */
function mostrarcapa(layer){
	var miCapa=document.getElementById(layer).style.display;
	if(miCapa=="none"){
		document.getElementById(layer).style.display="block";
	} else { 
		document.getElementById(layer).style.display="none";
		}
}

Código para mostrarcapas.html

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<script type="text/javascript" src="mostrarcapa.js"></script>
</head>

<body>
<div id="capauno">Ferra99</div>
<a href="#" onclick="javascript:mostrarcapa('capauno')">Mostrar-Ocultar</a>
</body>
</html>

El ejemplo funcionando lo puedes ver en http://foros.emprear.com/mostrarcapas/mostrarcapas.html

Saludos

ferra99 · #4 (**permalink**) 16/04/2010, 07:39

Muchas gracias emprear, llego a funcionar, ahora viene donde esta el mayor trabajo, ya que habra 6 botones y cada uno enseñara una capa y escondera las otras 5, lo he hecho todo asi:

Código:

function mostrarcapa(layer){
	var nom=document.getElementById(layer).getAttribute(Id);
	if(nom=="argenta"){
		document.getElementById("argenta").style.display="none";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";
		}
	if(nom=="nanet"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="none";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";
		}
	if(nom=="jai"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="none";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";		
		}
	if(nom=="cuseta"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="none";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";		
		}
	if(nom=="moro"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="none";
		document.getElementById("elena").style.display="block";		
		}
	if(nom=="elena"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="none";		
		}
}

y el html es:

Código:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<script type="text/javascript" src="capes.js"></script>
</head>

<body>
<a href="#" onclick="javascript:capes('nanet')">Mostrar-Ocultar</a>
<div id="nanet">Colocar aquí el contenido para  id "nanet"</div>
<a href="#" onclick="javascript:capes('jai')">Mostrar-Ocultar</a>
<div id="jai">Colocar aquí el contenido para  id "jai"</div>
<a href="#" onclick="javascript:capes('cuseta')">Mostrar-Ocultar</a>
<div id="cuseta">Colocar aquí el contenido para  id "cuseta"</div>
<a href="#" onclick="javascript:capes('moro')">Mostrar-Ocultar</a>
<div id="moro">Colocar aquí el contenido para  id "moro"</div>
<a href="#" onclick="javascript:capes('elena')">Mostrar-Ocultar</a>
<div id="elena">Colocar aquí el contenido para  id "elena"</div>
<a href="#" onclick="javascript:capes('argenta')">Mostrar-Ocultar</a>
<div id="argenta">Colocar aquí el contenido para  id "argenta"</div>
</body>

</html>

Pero no funciona... veis el problema?
hay alguna forma de ejecutar el script linea a linea para ver donde esta el error?

Gracias por vuestra paciencia!

emprear · #5 (**permalink**) 16/04/2010, 13:02

Ferra:
Por que no empezaste por esto....
Mira, yo desarrollo Webs de manera integral, manejo bastante bien el php y algo de javascript, pero a la hora de buscar soluciones, voy a lo práctico, y en tu caso, para hacer lo que quieres nada mejor que el Dreamweaver (Desde el Ultradev4 hasta el CS4, tienen te permiten realizar esto, y en tan solo 5 minutos), te dejo una demo, mirá el código fuente y analizalo. Si no tienes DreamWeaver, puedes hacerlo manualmente de manera sencilla, y de paso es una buena forma de aprender. El JavaScript (que como verás es minimo) no necesitas modificarlo. sólo los parámetros del evento onclick en los botones, si agregas más, yo tan solo puse tres, utiliza hide/show segun lo necesites, y por supuesto, cambia a tu gusto los valores de los id para las capas.

http://foros.emprear.com/mostrarcapas/varias-capas.html

Un abrazo

eduka · #6 (**permalink**) 12/05/2010, 14:19

Hola esta bien el ejemplo, mi nombre es eduard yo quisiera por favor me ayuden yo quiero trabajar algo presido pero no quiero usar botones quiero usar link por ejemplo uso el link
inicio y me muestre una capa inicio
nosotros me oculta las capas activas y me mustre la capa nosotros
agradeceré mucho su ayuda

emprear · #7 (**permalink**) 13/05/2010, 09:59

Si usas links en lugar de botones la cosa no cambia mucho, solo debes utilizar el evento onclick en los links, en el primer ejemplo que pase en el post jusatamente utilizo un link en lugar de botones,
http://foros.emprear.com/mostrarcapas/mostrarcapas.html

Saludos

anita19 · #8 (**permalink**) 08/06/2010, 09:52

Hola, alguien me puede ayudar porfis, kisiera k alguien me dijiera comomostrar y ocultamiento de capas, algo parecido al ejmplo de los botones. Tengo un submenu con 5 link, y kiero que cuando se cargue la pagina se muestre por default la primera capa, y k cuando de click en el 2do link se oculte la primera capa y me muestre la siguiente, y haci para los demas link. Y k cuando de click en el primer link vuelva aparecer la 1ra capa. Si me explico, aki te pongo mi submenu, ojala puedan ayudarme, cual es la funcion para esto y si hay k cambiar en los link o agregarles alguna funcion. Les agradecere su ayuda, por fas. No se mucho sobre esto.

<div id="submenu">

<ul>
<li><a href=>Acerca </a> </li>
<li><a href=>¿Quiénes Sómos? </a> </li>
<li><a href=>Mision </a> </li>
<li><a href=>Valores </a> </li>
<li><a hrer=>Objetivo Social </a> </li>
</ul>
</div>

emprear · #9 (**permalink**) 08/06/2010, 19:25

Anita:
Es hora de que empieces a aprender, la solución a lo que deseas esta ahi mismo, en el post de los botones, te doy una pista, en el CSS (los estilos)
visibility: hidden, significa que el valor por defecto para la capa es Oculta, en tanto que visibility: visible que la muestra, en tanto que en el javascript, hide es oculatr y show mostrar, analiza el código fuente y un poco de lógica.
y no es como para llorar

anita19 · #10 (**permalink**) 16/06/2010, 09:39

Gracias por la ayuda, me sirvio de mucho pues ya me sale. Saludos y en verdad muchisimas gracias

rirs · #11 (**permalink**) 26/10/2010, 09:28

Tengo una duda.

Estaba revisando su código y tengo una pregunta:

Código:

/* ---------------------------- */
/* MostrarOcultar Capas			*/
/* ---------------------------- */
function mostrarcapa(layer){
	var miCapa=document.getElementById(layer).style.display;
	if(miCapa=="block"){
		document.getElementById(layer).style.display="none";
	} else { 
		document.getElementById(layer).style.display="block";
		}
}

Estaba intentando que al abrir la página lo que va entro de la "miCapa" vaya invisible y al dar click se vuelva visible, es decir, lo contrario a lo que ustedes tienen, pero al poner el código así, lo que hace es que al dar click la primera vez me envía a otro enlace de página, luego se sigue mostrando abierto y al dar click nuevamente ya me funciona bien.

Por lo que entiendo en la etiqueta mensiona que si la capa está invisible al dar click debe mostrarse, y si no, debe oculatarse, pero no logro que me funcione.

¿Alguién por favor podría ascesorarme un poco?

De antemano, gracias.

ArturoGallegos · #12 (**permalink**) 26/10/2010, 10:04

muy posiblemente el display:none; inicial de tu div lo declaraste en una hoja de estilos, esta propiedad debes declararla en el mismo html

Código HTML:

Ver original<div id="capa1" style="display:none;"></div>

emprear · #13 (**permalink**) 26/10/2010, 10:42

rirs:

Te explico, la script, invierte el valor de la propiedad css establecida (en este caso "display")

Si está en "block" la pasa a "none" y a la inversa, el estado inicial de la capa, tenés que definirlo con el atributo "style" en cada una de las capas.

además, te aclaro que la script sufrió una modificación,

Te dejo un ejemplo funcional en
http://foros.emprear.com/mostrarcapa...tar_capas.html
notá que la capa 4 aparece por defecto visible.

saludos

rirs · #14 (**permalink**) 26/10/2010, 10:48

Cita:

Iniciado por Ag666

muy posiblemente el display:none; inicial de tu div lo declaraste en una hoja de estilos, esta propiedad debes declararla en el mismo html

Código HTML:

Ver original<div id="capa1" style="display:none;"></div>

Buenos días Ag666, primeramente gracias por responder.

Verás, estaba revisando pero no encuentro que tenga ninguna hoja de estilos, de hecho lo he realizado igual que arriba, tengo en mi html:

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=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<script type="text/javascript" src="mostrarcapa.js"></script>
</head>

<body>
<div id="capauno">Ferra99</div>
<a href="#" onclick="javascript:mostrarcapa('capauno')">Mostrar-Ocultar</a>
</body>
</html>

Mientras que en mi hora de .js:

Código:

/* ---------------------------- */
/* MostrarOcultar Capas			*/
/* ---------------------------- */
function mostrarcapa(layer){
	var miCapa=document.getElementById(layer).style.display;
	if(miCapa=="block"){
		document.getElementById(layer).style.display="none";
	} else { 
		document.getElementById(layer).style.display="block";
		}
}

Soy nueva para el Js, en mi vida lo había tocado, pero por lo que entiendo al leer el código es lo que mencionaba. He leído varias veces el html para ver si ahí encontraba alguna propiedad que me indicara o diera referencia a que la ventana aparezca cerrada, pero francamente no la encontré. ¿Hay alguna manera de que las propiedades de la hoja de estilo estén ocultas?

Agradezco mucho tu ayuda.

emprear · #15 (**permalink**) 26/10/2010, 10:55

rirs:

fijate en

http://www.forosdelweb.com/f4/proble...2/#post3611900

que he hecho algunas correcciones a la script, y ademas ahora el javascript está en el mismo html, no en un archivo externo, para que puedas visualizarlo, el css en el <style> es sólo para la estética, la propiedad display, te repito, debe estar definida inline a través del atributo style de cada div

Saludos

rirs · #16 (**permalink**) 26/10/2010, 11:05

Muchas gracias Emprear!

Sep, no lo había visto el post, pero ya me he puesto a revisarlo y tratar de entenderlo mejor, para así aprenderme el por qué funciona de dicha manera.

Tengo una pregunta, hablando de estética:

en la propiedad de:
<td><a onclick="cambia('capauno')">Mostrar-Ocultar Capa Uno</a>

la original es:
<td><p onclick="cambia('capauno')">Mostrar-Ocultar Capa Uno</p>

Pero con ella me da un espacio de interlineado a dos renglones cuando sólo desearía uno. Con la a, me maneja uno pero no me coloca la manita sino que me deja el puntero con texto seleccionable.

Pregunta entonces ¿de qué manera podría hacer que me respete mi manira sin necesidad de pasar tanto espacio en interlineado?

Gracias de verdad!

emprear · #17 (**permalink**) 26/10/2010, 11:15

bueno, en mi ejemplo no estoy usando una tabla, uso un elemento "clickeable" para hacer el cambio, y el div que contiene el texto a mostrar-ocultar

<p onclick="mostrarOcultar('capauno')">Mostrar-Ocultar Capa Uno</p>
<div id="capauno" style="display:none;">Contenido Capa Uno</div>

Ademas le doy un padding: 5px; a los dos elementos como para que no se amontone todo.
Habría que ver el conjunto de tu html

saludos

PD: un detalle, a la funcion cambia(), ahora la renombré como mostrarOcultar();

rirs · #18 (**permalink**) 26/10/2010, 11:28

Alo Emprear.

Veamos, ya cambié la propiedad que me has indicado, ahora... el cómo la estoy estrucurando, bueno, intentaba con celdas ya que me interesa meterlas para una tabla, te pego lo que he movido según yo para que no pase tanto espacio:

En el style ha sido lo siguiente:

Código:

<style type="text/css">
#capauno, #capados {
width: 350px;
border:
background-color:
padding: 0px;
}


p {
cursor: pointer;
padding: 0px
background-color:
width: 350px; 
}
</style>

Mientras que para el cuerpo del html:

Código HTML:

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a onclick="mostrarOcultar('capauno')">Mostrar-Ocultar Capa Uno</a>
<div id="capauno" style="display:none;">Contenido Capa Uno</div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<p onclick="mostrarOcultar('capados')">&nbsp;</p>
<p onclick="mostrarOcultar('capados')">Mostrar-Ocultar Capa Dos</p>
<div id="capados" style="display:none;">Contenido Capa Dos</div>



</body>

Como podrás darte cuenta en la capa uno coloco lo que te decía, la "a" en lugar de "p" porque me no me deja espacio entre nada, pero no me pone la manita, como lo hace en la capa dos que está tal cual la has subido.

Gracias, disculpa tanta molestía, es que llevo peleando semanas con las capas y apenas hoy me topado con lo más parecido a lo que buscaba.

emprear · #19 (**permalink**) 26/10/2010, 11:45

El css para poner la "manito", es

cursor: pointer;

normalmente un <a href=""> lo genera por si solo pero un <a onclick=""> no.

en mi css el cursor: pointer; se lo aplpique a <p>, tendrías que aplicarselo a <a> o bien llamar el Javascript como sui fuera un link, de la siguiente forma
<a href="javascript:mostrarOcultar('capauno')">mostra r Ocultar</a>, con lo cual te crearía la manito sin necesidad de aplicarla con css. Si querés quitarle el subrayado al link, usas en el css
a{
text-decoration: none;
}

Se entiende

rirs · #20 (**permalink**) 26/10/2010, 11:53

Oh... Creo que me siento más culta que hace cinco minutos, no sabía que se podía hacer eso. Y sep, ya me ha funcionado el cursor como debe ¡te lo agradezco mucho! Ahora veré meterle tablas y... si llego a tener nuevamente dudas espero que no te moleste si vuelvo a buscar ascesoria contigo.

Gracias nuevamente!!

emprear · #21 (**permalink**) 26/10/2010, 11:57

Para eso estamos colega

ah, hace rato que no trabajaba con esa script, le estoy poniendo unas mejoras, cuando terrmine te la paso

saludos

emprear · #22 (**permalink**) 26/10/2010, 13:49

Agregado a la script
Ahora se puede modificar el texto visible según el estado de la capa

http://foros.emprear.com/mostrarcapa...as-ctexto.html

saludos