Foros del Web » Programando para Internet » Javascript »

div oculto y mostrado

Estas en el tema de div oculto y mostrado en el foro de Javascript en Foros del Web. Hola... Necesito tener una parte de mi página, específicamente una tabla, oculta. Y un botón o una imagen que al usuario dar click se muestre. ...
  #1 (permalink)  
Antiguo 20/02/2005, 14:01
 
Fecha de Ingreso: mayo-2004
Mensajes: 159
Antigüedad: 20 años, 5 meses
Puntos: 0
div oculto y mostrado

Hola...

Necesito tener una parte de mi página, específicamente una tabla, oculta. Y un botón o una imagen que al usuario dar click se muestre.

gracias
  #2 (permalink)  
Antiguo 20/02/2005, 18:52
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 22 años, 3 meses
Puntos: 0
Te hice un ejemplo a ver si te sirve. Funciona tanto para mostrar como para ocultar. Podés probar como variante usar la propiedad display en vez de visibility (visibility te mantiene el espacio que ocupa la tabla, display no).
Saludos, espero te sirva

Código:
<html>
<head>
<script language="Javascript">
	function mostrar() {
		var unaTabla, mostrar;
		unaTabla = document.getElementById("unaTabla");
		if(unaTabla.style.visibility == "hidden") {
			unaTabla.style.visibility = "visible";
			mostrar = document.getElementById("mostrar").childNodes[0];
			mostrar.data = "Ocultar";
		}
		else {
			unaTabla.style.visibility = "hidden";
			mostrar = document.getElementById("mostrar").childNodes[0];
			mostrar.data = "Mostrar";
		}

	}
</script>
</head>

<body>

<table border="1" id="unaTabla" style="visibility: hidden;">
	<tr>
		<td>Nombre</td><td>Apellido</td>
	</tr>
	<tr>
		<td>Juan</td><td>Pérez</td>
	</tr>
	<tr>
		<td>Mariana</td><td>Fernández</td>
	</tr>
	<tr>
		<td>Claudio</td><td>Rodríguez</td>
	</tr>
</table>

<a id="mostrar" href="javascript:mostrar();">Mostrar</a>
</body>
</html>
  #3 (permalink)  
Antiguo 20/02/2005, 20:26
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 19 años, 9 meses
Puntos: 1
http://www.onlinetools.org/tools/domcollapse.php
  #4 (permalink)  
Antiguo 21/02/2005, 05:45
 
Fecha de Ingreso: mayo-2004
Mensajes: 159
Antigüedad: 20 años, 5 meses
Puntos: 0
mil gracias a todos
  #5 (permalink)  
Antiguo 21/02/2005, 17:55
 
Fecha de Ingreso: mayo-2003
Mensajes: 544
Antigüedad: 21 años, 5 meses
Puntos: 1
www.cssboulevar.com.ar/leer.php/articulo/3
  #6 (permalink)  
Antiguo 22/02/2005, 02:24
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 10 meses
Puntos: 61
Vámonos a Javascript
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #7 (permalink)  
Antiguo 22/02/2005, 04:16
 
Fecha de Ingreso: febrero-2005
Mensajes: 6
Antigüedad: 19 años, 8 meses
Puntos: 0
como se haria para que pinchando en una imagen se viese una capa?
  #8 (permalink)  
Antiguo 22/02/2005, 04:23
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 22 años, 3 meses
Puntos: 0
Igual que con un link común. Fijate en el ejemplo que puse al principio, y probá de poner en el link una imagen, debería funcionar.
La capa en este caso es la tabla.
Saludos
  #9 (permalink)  
Antiguo 22/02/2005, 04:42
 
Fecha de Ingreso: febrero-2005
Mensajes: 6
Antigüedad: 19 años, 8 meses
Puntos: 0
Gracias, ya funciona!

He intentado hacer uno por mi cuenta y no me funciona, alguien sabe en que me he equivocado???

----------------------------------------

<html>
<head>
<script language="Javascript">
function mostrar() {
var layer1, mostrar;
layer1 = document.getElementById("layer1");
if(layer1.style.visibility == "hidden") {
layer1.style.visibility = "visible";
mostrar = document.getElementById("mostrar").childNodes[0];
mostrar.data = "Ocultar";
}
else {
layer1.style.visibility = "hidden";
mostrar = document.getElementById("mostrar").childNodes[0];
mostrar.data = "Mostrar";
}

}
</script>

</head>

<body>

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:2; background-color: #0033FF; layer-background-color: #0033FF; border: 1px none #000000; left: 44px; top: 22px; color: #FFFFFF; visibility: hidden;">un poquito de porfavor </div>

<div id="Layer2" style="position:absolute; width:173px; height:160px; z-index:3; left: 458px; top: 23px; background-color: #990000; layer-background-color: #990000; border: 1px none #000000; visibility: visible;"><a id="mostrar" href="javascript:mostrar();"><img src="mis%20cosillas/Nota.png"></a></div>
</body>
</html>


-----------------------------

Última edición por ratcarlos; 22/02/2005 a las 04:45
  #10 (permalink)  
Antiguo 25/04/2012, 11:54
 
Fecha de Ingreso: abril-2012
Mensajes: 3
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: div oculto y mostrado

aca encontre esto:
Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;” por ejemplo:
<div id=”flotante” style=”display:none;”> </div>

Luego debemos realizar dos funciones en javascript para mostrar y ocultar dicho div respectivamente.

<script>

function mostrardiv() {

div = document.getElementById('flotante');

div.style.display ='';

}

function cerrar() {

div = document.getElementById('flotante');

div.style.display='none';

}

</script>

Una vez hecho esto, tenemos las funciones en javascript que mostrarán y ocultarán el div cuando el usuario haga click en una imagen o un texto con el link a la función, como en el siguiente ejemplo:

<div id=”mostrarDiv”><a href=”javascript:mostrardiv();”>Mostrar Div</a></div>
<div id=”flotante” style=”display:none;”> Este es un div oculto <br><a href=”javascript:cerrar();”> presiona aquí para cerrar</a> </div>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:50.