Foros del Web » Programando para Internet » Javascript »

mostrar y ocultar capa div con contenido

Estas en el tema de mostrar y ocultar capa div con contenido en el foro de Javascript en Foros del Web. hola foreros tengo una inquietud que me inunda :( Al grano: tengo unos links que se muestran sobre mi formulario, links1, links2, links3 Lo que ...
  #1 (permalink)  
Antiguo 26/12/2011, 23:04
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 10 meses
Puntos: 5
Pregunta mostrar y ocultar capa div con contenido

hola foreros tengo una inquietud que me inunda :( Al grano:

tengo unos links que se muestran sobre mi formulario,

links1, links2, links3
Lo que quiero es que al precionar sobre "links2" se muestre lo que hay en el div2; al presionar "links3" el div2 que se cierre automaticamente y muestre el contenido del div3. Se entiende lo que quiero decir?

ejemplo:

Código:
links1 | links2 | links3

<div1>en este div se visualiza por defecto es del links1</div>
<div2>mostramos la petición de links2 y ocultamos automáticamente links1</div>
<div3>mostramos la petición de links3 y ocultamos automáticamente links2</div>
si es con javascript y ajax o jquery mucho mejor (creo que sin eso los efectos no funcionan o no?)
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #2 (permalink)  
Antiguo 27/12/2011, 00:10
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años, 7 meses
Puntos: 50
Respuesta: mostrar y ocultar capa div con contenido

Se puede hacer sólo con JavaScript, aunque te resultará más fácil con jQuery (que es JavaScript, pero ya trae algunas cosas hechas). AJAX no es necesario. Básicamente debes añadirle un callback al evento click de cada uno de los links, en ese callback debes ocultar los otros divs (si están ocultos simplemente no se notará) y mostrar el que corresponda. ¡Suerte!
  #3 (permalink)  
Antiguo 27/12/2011, 07:30
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: mostrar y ocultar capa div con contenido

es tan sencillo como usar los eventos adecuados
Cita:
onclick / onmousedown ---> se muestra la capa, se le dar el foco al link y se devuelve false
onblur ---> se oculta la capa
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 27/12/2011, 10:03
Avatar de abermejo  
Fecha de Ingreso: julio-2011
Mensajes: 20
Antigüedad: 13 años, 5 meses
Puntos: 6
Respuesta: mostrar y ocultar capa div con contenido

Puedes hacerlo con Javascript puro, pero mas facil lo podrias hacer con Jquery y aun mas facil ya hecho lo puedes hace con Jquery UI con un acordeon por ejemplo.

Con jquery una idea general: Sean #enlace y #capa los id de algun link y div respectivamente

$('#enlace').on('click', function(){
$('#capa').show('slow');
})

y para Javascript puro puedes revisar esto.

http://www.forosdelweb.com/f13/faqs-javascript-105325/index2.html#post267126

Última edición por abermejo; 27/12/2011 a las 10:08
  #5 (permalink)  
Antiguo 27/12/2011, 13:47
Avatar de SirAse  
Fecha de Ingreso: octubre-2008
Mensajes: 38
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: mostrar y ocultar capa div con contenido

Hola, estoy intentando hacer lo mismo que alette666 y tengo este codigo:


Javascript
Código:
<script language="JavaScript">
	function muestra_oculta(id){
		if (document.getElementById){ //se obtiene el id
			var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
			el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
		}
	}
		window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
		muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
		muestra_oculta('contenido_a_mostrar2');
	}
</script>
HTML
Código:
<p><a href="#" onClick="muestra_oculta('contenido_a_mostrar')" title="">Informacion 1</a></p>
<p><a href="#" onClick="muestra_oculta('contenido_a_mostrar2')" title="">Informacion 2</a></p>
Pero a pesar de haber intentado hacerlo como habeis propuesto me parece que me falta conocimiento, ¿podeis ayudarme a completarlo?
  #6 (permalink)  
Antiguo 27/12/2011, 15:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: mostrar y ocultar capa div con contenido

lee este tema
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #7 (permalink)  
Antiguo 28/12/2011, 02:23
Avatar de SirAse  
Fecha de Ingreso: octubre-2008
Mensajes: 38
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: mostrar y ocultar capa div con contenido

Muchas Gracias IsaBelM !!!

Me he tenido que calentar la cabeza un poco por unos espacios que habia pero me lo has solucionado, funciona tal y como quería a la perfección, además, me has ahorrado codigo, gracias.

a quien le pueda servir le dejo el codigo aqui tambien:
Código:
<a href="#" onclick="document.getElementById('tr').style.display='block'; this.focus(); return false;" onblur="document.getElementById('tr').style.display='none';">opción1</a>
<a href="#" onclick="document.getElementById('tr2').style.display='block'; this.focus(); return false;" onblur="document.getElementById('tr2').style.display='none';">opción2</a>

<div id="tr" style="display:none">contenido opción1</div>
<div id="tr2" style="display:none">contenido opción2</div>
Me surgio una cosilla:

Dentro del texto que muestro tengo un boton con enlace que no me va debido al onBlur, alguna opcion para que funcione?

Última edición por SirAse; 28/12/2011 a las 02:57 Razón: Una ultima cosa
  #8 (permalink)  
Antiguo 28/12/2011, 07:46
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: mostrar y ocultar capa div con contenido

entonces hay que atacarlo de un modo distinto
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #9 (permalink)  
Antiguo 28/12/2011, 12:33
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: mostrar y ocultar capa div con contenido

Ya extrañaba la presencia de IsaBelM jajajajaja a ver vamos a ver que tal sale, cualquier cosa expongo el resultado.
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #10 (permalink)  
Antiguo 28/12/2011, 14:02
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 10 meses
Puntos: 5
Pregunta Respuesta: mostrar y ocultar capa div con contenido

Miren gente el codigo que encontre por la pagina de jquery

Código HTML:
<html>
<head>
  <style media="screen" type="text/css">
    #div1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	position:absolute;
	width:200px;
	height:56px;
	z-index:2;
	left: 185px;
	top: 29px;
	margin:5px;
	float: right;
	background-color:#0F0;
}

#div2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	position:absolute;
	width:200px;
	height:56px;
	z-index:1;
	left: 358px;
	top: -1px;
	margin:5px;
	float: right;
	background-color:#F00;
}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table width="18%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%"><input type="button" value="boton 1"/> </td>
    <td width="80%">
    &nbsp;

<script>
	var toggleFx = function() {
  	$.fx.off = !$.fx.off;
	};
	toggleFx();

	$("button").click(toggleFx)

	$("input").click(function(){
  	$("div").toggle("slow");
	});
</script>  

    <div id="div1">Aca va contenido 1</div></td>
  </tr>
  <tr>
  <td> <input type="button" value="boton 2"/></td>
  <td>
  &nbsp;

<script>
//efecto de transicion del modo de ocultacion/aapricion
	var toggleFx = function() {
  	$.fx.off = !$.fx.off;
	};
	toggleFx();

	$("button").click(toggleFx)

	$("input").click(function(){
 	 $("span").toggle("slow");
	});
</script>
    <span id="div2">Aca va contenido 2</span></td>
  </tr>
</table>
</body>
</html> 
las capas div y el css lo hice yo para que quede mas lindo; pero cierra los dos a la vez o si se preciona boton dos y luego boton 1 se pone fiera la cosa aca esta la pagina de prueba: EJEMPLO, miren como queda pero no hace casi el 25% que me falta, como lo arreglo, para que al presionar el boton 2, me esconda div1 y me muestre div2 y al precionar boton 1 me esconda div2 y me muestre div 1, y asi sucesivamente.
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #11 (permalink)  
Antiguo 28/12/2011, 20:39
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 10 meses
Puntos: 5
De acuerdo Respuesta: mostrar y ocultar capa div con contenido

Cita:
Iniciado por IsaBelM Ver Mensaje
entonces hay que atacarlo de un modo distinto
Mira IsaBelM aca termine un sistema muy divertido, mesclando codigo de SirAse con uno mas divertido por ahi y este es el resultado:

index.html
Código HTML:
<html>
<head>
<title>Documento sin título</title>
 <style media="screen" type="text/css">
    #div1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	position:absolute;
	width:200px;
	height:56px;
	z-index:2;
	left: 185px;
	top: 29px;
	margin:5px;
	float: right;
	background-color:#0F0;
}

#div2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	position:absolute;
	width:200px;
	height:56px;
	z-index:1;
	left: 358px;
	top: -1px;
	margin:5px;
	float: right;
	background-color:#F00;
}
  </style>
  <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            function desaparecer(objeto, caida){
                $(objeto).animate({
                    opacity: 0.0,
                    marginTop: caida,
                }, 500 ).hide("slow");
            }
           
            function aparecer(objeto, caida){
                $(objeto)
                    .animate({
                        opacity: '0.0',
                        marginTop: "-"+caida,
                    }, 10 ).show()
                    .animate({
                        opacity: '1.0',
                        marginTop: "0",
                    }, 1000 );
            }
        </script>
</head>
<body>
<input type="button" onClick="javascript:aparecer('#div1', '10%'); return false;" onfocus="javascript:desaparecer('#div2', '10%'); return false;" value="Boton 1">
<br />
<input type="button" onclick="javascript:aparecer('#div2', '10%'); return false;" onfocus="javascript:desaparecer('#div1', '10%'); return false;" value="Boton 2">

<div id="div1">Aca va contenido 1</div>
<div id="div2">Aca va contenido 2</div>
</body>
</html> 
Pero me temo que aun me falta 5% para perfecciones, y es que aun no aparezca ningún div si no he pinchado en ninguno de los botones [VER EJEMPLO]
La situación es esta; lo probé en chrome y hace un efecto diferente al presionar botón 1, desaparece div1 y no los dos div's (este esta mal); en firefox al presionar botón 1, desaparecen los dos y muestra div 1 (este esta bien)

¿Como puedo hacer que con cualquier navegador haga el mismo efecto para todos? (no me importa si lo hace o no en IE ya sabemos que es el navegador mas verreta)
y otra ¿como le hago para que aun no me aparezcan las capas sin haber presionado los botones correspondientes?



NOTA: Creo que aca le saque al duda a SirAse cuando m,enciono que adentro de los divs tiene un boton y que por la funcion de onBlur no puede cliquearla xq se le cierra, creo que con este script se lo soluciono
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #12 (permalink)  
Antiguo 29/12/2011, 04:31
Avatar de SirAse  
Fecha de Ingreso: octubre-2008
Mensajes: 38
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: mostrar y ocultar capa div con contenido

He estado probando vuestras sugerencias IsaBelM y alette666 y:

En referente a usar el objeto event de IsaBelM he estado investigando y haciendo pruebas y me doy por vencido, no se como emplearlo y aunque comprendo cual es su funcion por individual no se como se aplica aqui.

En cuanto al codigo de alette666 lo he hecho funcionar (me ha gustado mucho el efecto por cierto) y ha arreglado el enlace que no me funcionaba pero claro, como bien has dicho en firefox funciona y en chrome no desaparece el texto anterior al expandir otro.

Si puedes decirme IsaBelM como aplicar el event o alette666 como arreglar ese codigo os lo agradeceria aunque que sepais que me habeis ayudado mucho ya y os lo agradezco.
  #13 (permalink)  
Antiguo 29/12/2011, 10:53
Avatar de alette666  
Fecha de Ingreso: febrero-2010
Ubicación: En la luna
Mensajes: 277
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: mostrar y ocultar capa div con contenido

Cita:
Iniciado por SirAse Ver Mensaje
He estado probando vuestras sugerencias IsaBelM y alette666 y:

En referente a usar el objeto event de IsaBelM he estado investigando y haciendo pruebas y me doy por vencido, no se como emplearlo y aunque comprendo cual es su funcion por individual no se como se aplica aqui.
Mira yo ando googlendo por San Google y no encuentro como hacer eso aun, pero si IsaBelM nos tira un cable le agradeceremos. Ya tendria el 100% de las funciones que quiero que haga mi script.

Lo único que me falta es que sea en todos los navegadores por igual (el mismo efecto), y que el usuario no vea las capas sin haber hecho aun la llamada desde los input.
__________________
Y Sócrates dijo...Solo sé que no sé nada.
Entiende la filosofía como una búsqueda colectiva basada en el diálogo.
  #14 (permalink)  
Antiguo 29/12/2011, 16:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: mostrar y ocultar capa div con contenido

alette666, para ocultarlos de inicio, en el css display:none. volviendo a javascript, no te comento nada de jquery por que no lo uso, chrome no le da el foco al objeto sobre el que se clickea, de tal modo que hay que darselo. esto mejorará algo el efecto en chrome
Cita:
<input type="button" onclick="javascript:aparecer('#div1', '10%'); this.focus();return false;" onfocus="javascript:desaparecer('#div2', '10%'); return focus(); return false;" value="Boton 1">
SirAse, prueba y adapta esto a tus necesidades
Cita:
function fnc(e) {
evt = e.target;

document.getElementById('form_login').style.displa y = ((evt.id == 'login') && (evt.parentNode.id == 'opt')) || (evt.parentNode.id == 'form_login') ? 'block' : 'none';
document.getElementById('form_nuevo').style.displa y = ((evt.id == 'nuevo') && (evt.parentNode.id == 'opt')) || (evt.parentNode.id == 'form_nuevo') ? 'block' : 'none';
}

window.onload = function() {
document.addEventListener('click', function(event) {fnc(event)}, false);
}


<div id="opt">

<a href="#" id="login">login</a>
<a href="#" id="nuevo">nuevo usuario</a>

<form id="form_login" style="display: none">
<input type="text" value="login" />
</form>

<form id="form_nuevo" style="display: none">
<input type="text" value="nuevo" />
</form>

</div>
tal y como está no funciona en ie. busca información de e.target y addEventListener() para ese navegador
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #15 (permalink)  
Antiguo 30/12/2011, 08:08
Avatar de SirAse  
Fecha de Ingreso: octubre-2008
Mensajes: 38
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: mostrar y ocultar capa div con contenido

Gracias IsaBelM, despues de toda la mañana peleandome con el codigo he conseguido adaptarlo y va perfecto aunque me ha costado ver que no iba a causa de estar encerrado en una lista <li> y ahora me estoy peleando con el css para que se quede como estaba.
En cuanto a lo de IE ya no tengo mas tiempo, si puedo mañana me pongo otro rato y os comento como me va, un abrazo.

FELICES FIESTAS !!!
  #16 (permalink)  
Antiguo 02/01/2012, 07:27
Avatar de SirAse  
Fecha de Ingreso: octubre-2008
Mensajes: 38
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: mostrar y ocultar capa div con contenido

Hola amigos, Feliz Año !!!

Esta mañana por fin he tenido tiempo y he dejado mi página tal y como quería gracias a ti IsaBelM
Como decías con ie no funciona pero sigo buscando información sobre la compatibilidad y como solucionarlo, la verdad he encontrado algo bastante interesante [[URL="http://janzaldo.wordpress.com/tag/addeventlistener/"]link[/URL]] a mi parecer y me falta ponerme con ello y ver mas por san google, la verdad, hacia tiempo que no tocaba código y ahora estoy volviendo a interesarme, veamos de lo que soy capaz.

Gracias a ti tambien alette666, pude añadir tu efecto al codigo final y me gusta como quedó.

Saludos

Etiquetas: ajax;, barra_slider;, desplegar, jquery
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:29.