Foros del Web » Programando para Internet » Javascript »

Aparecer un Div y Desaparecer otros

Estas en el tema de Aparecer un Div y Desaparecer otros en el foro de Javascript en Foros del Web. Buen dia, estoy haciendo una aplicación en la que existen 5 botones a un lado y div del mismo tamaño en la misma posición del ...
  #1 (permalink)  
Antiguo 28/10/2012, 10:25
 
Fecha de Ingreso: septiembre-2012
Mensajes: 14
Antigüedad: 6 años, 10 meses
Puntos: 0
Aparecer un Div y Desaparecer otros

Buen dia, estoy haciendo una aplicación en la que existen 5 botones a un lado y div del mismo tamaño en la misma posición del otro, por defecto todos los div estan desactivados, la idea es que al presionar un boton se cargue el div con la info en el, y al presionar otro boton desaparezca la información anterior (el div) y se reemplace por el div correspondiente a ese boton, alguna idea con la función javascrip para eso? o como funciona jquery alli?

He leido bastante sobre ambos temas, pero aun se me hace complicado visualizar la función cuando son mas de 2 div
  #2 (permalink)  
Antiguo 28/10/2012, 12:24
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 9 años, 4 meses
Puntos: 131
Respuesta: Aparecer un Div y Desaparecer otros

Todo eso se puede hacer con un solo div

por ejemplo tenemos esto
Código HTML:
Ver original
  1. function cargar_contenido(contenido)
  2. {
  3. document.getElmentById.innerText = contenido;
  4. document.getElmentById.textContent = contenido;
  5. }
  6. #contenido
  7. {
  8. visibility:hidden;
  9. }
  10. <div id="contenido"></div>
  11. <button id="uno" onclick="cargar_contenido('contenido primer div');">1</button>
  12. <button id="dos" onclick="cargar_contenido('contenido segundo div');">2</button>
  13. <button id="tres" onclick="cargar_contenido('contenido tercer div');">3</button>
Cada boton tiene el evento onclick y por medio de este pasa su contenido a la funcion(cargar_contenido), esta funcion recibe dicho contenido en su parametro llamado "contenido",
luego usamos las propiedades innerText y textContent
Estas propiedades hacen lo mismo solo que innertext no existe en firefox y textcontent si existe por eso usamos las 2 para que funcione el codigo en todos los navegadores

y bueno estas propiedades meramente ponen contenido en el div, borran el anterior y ponen el nuevo

Saludos
  #3 (permalink)  
Antiguo 28/10/2012, 13:15
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 1 mes
Puntos: 1567
Respuesta: Aparecer un Div y Desaparecer otros

Cita:
Iniciado por hackjose Ver Mensaje
Todo eso se puede hacer con un solo div

por ejemplo tenemos esto
Código HTML:
Ver original
  1. function cargar_contenido(contenido)
  2. {
  3. document.getElmentById.innerText = contenido;
  4. document.getElmentById.textContent = contenido;
  5. }
  6. #contenido
  7. {
  8. visibility:hidden;
  9. }
  10. <div id="contenido"></div>
  11. <button id="uno" onclick="cargar_contenido('contenido primer div');">1</button>
  12. <button id="dos" onclick="cargar_contenido('contenido segundo div');">2</button>
  13. <button id="tres" onclick="cargar_contenido('contenido tercer div');">3</button>
@hackjose
Eso que has puesto está mal
document.getElmentById.innerText no define al elemento al que le aplicás la propiedad, debe ser document.getElmentById('id del elemento')
con innerHTML va a conseguir lo que necesita en todos los navegadores

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 28/10/2012, 13:38
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 9 años, 4 meses
Puntos: 131
Respuesta: Aparecer un Div y Desaparecer otros

Cita:
Iniciado por emprear Ver Mensaje
@hackjose
Eso que has puesto está mal
document.getElmentById.innerText no define al elemento al que le aplicás la propiedad, debe ser document.getElmentById('id del elemento')
con innerHTML va a conseguir lo que necesita en todos los navegadores

Saludos
Es cierto se me paso

Lo bueno es que lo revisaste, si no en vez de ayudar tal vez pude haber confundido a nuestro amigo dagj

Saludos
  #5 (permalink)  
Antiguo 28/10/2012, 18:34
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 9 meses
Puntos: 317
Respuesta: Aparecer un Div y Desaparecer otros

El único problema que noto es que dagj quiere mostrar u ocultar cajas en la misma posición, no rellenar la misma.

No explica por qué, pero en principio debemos suponer que sabe lo que quiere. (Hasta que demuestre lo contrario).
Lo mejor hubiese sido pedirle lo que hizo hasta ahora, en vez de dejar el código armado.

Me sospecho que vamos a tener una segunda oportunidad ...
  #6 (permalink)  
Antiguo 29/10/2012, 08:46
 
Fecha de Ingreso: septiembre-2012
Mensajes: 14
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Aparecer un Div y Desaparecer otros

Gracias por sus respuestas, si, efectivamente amigo furoya, necesito cargar varios contenedores, pues algunos son simplemente para mostrar resultados que luego llamare mediante técnicas de ajax desde la BD, otros son para ingresar resultados a la BD, en otro se carga un mapa de google maps e incluso en ese mapa existen variables que pueden ser modificadas por el usuario y esa información iría a la BD tambien.

Básicamente lo que quiero es una aplicación web que recargue lo menos posible la pagina completa. aca les coloco un poco del codigo que llevo hasta ahora, he trabajado antes con php, pero estoy comenzando con javascript, ajax y jquery, lo he entendido bien en situaciones basicas (aparecer y desaparecer 1 contenedor) pero cuando es mas de uno se me complica un poco visualizar el codigo.

Código HTML:
 <form id="SimulacionDeZonas"  name="form1" method="post" action="" class="Botones" style="width:158px; height:81px; left: 40px; top: 280px;" >
        
            <label>
                <input type="button" name="SimulacionDeZonas" id="SimulacionDeZonas2" value="" style='width:158px; height:81px;background-image:url(imagenes/Simulacion_Zonas.jpg); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: #999 3px 3px 3px 3px; '   />
            </label>
        </form> <!--cierra Boton de Mapa--> 

Ese seria el código de uno de los botones, con el cual querria ocultar cualquier contenedor que estuviese antes y mostrar el contenedor del mapa (ya lo tengo diseñado con "style=display:none"

Código HTML:
 <div id="CuadroDialogo2" style="display:none" class="CuadroDialogo">
          
			<form id="form1" name="form1" method="post" action="">
  			<label for="select"></label>
 			 <select name="select" id="select">
    		<option>Verde</option>
    		<option>Rojsdf</option>
  			</select> 
  			dfgdhfd
		</form>
		</div> 
Acá un contenedor, diseñado solo para probar hasta dar con la funcion, asi como ese esta "CuadroDialogo1" y "CuadroDialogo3", solamente de prueba, pues si puedo trabajar con ellos puedo hacer que funcione los que necesito.

Este a continuación es el código que encontré para mostrar un contenedor




Código HTML:
<script>
function oculta(id){
var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
elDiv.style.display='none'; // atributo display:none que oculta el div	
}
</script> 


Ahora bien, podría hacer en esa misma función por pase de parámetros? 4 parámetros? (uno para cada contenedor), en el que los primeros 3 parámetros oculten y el ultimo muestre? si es así, como hacer para que en el caso de que el usuario presione el mismo botón cuyo contenedor ya esta abierto, no pase nada?

Gracias de antemano por su ayuda.
  #7 (permalink)  
Antiguo 29/10/2012, 09:17
 
Fecha de Ingreso: septiembre-2012
Mensajes: 14
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Aparecer un Div y Desaparecer otros

Código HTML:
function muestra(id, id2){
var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
var elDiv2 = document.getElementById(id2);
elDiv.style.display='block';//damos un atributo display:block que el div
elDiv2.style.display='block';	
}
Hahahaha que tonteria , al parecer con esto lo resulevo, mientras le explicaba el mensaje anterior se me vino a la mente esta oportunidad y al probarla funciono al pelo, ahora solo me queda vislumbrar la condición para que no pase nada si presiono un boton cuyo contenedor ya esta activo, pues en el contenedor donde hago cargas desde la BD me generaria muchas llamadas innecesarias
  #8 (permalink)  
Antiguo 29/10/2012, 10:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 9 meses
Puntos: 317
Respuesta: Aparecer un Div y Desaparecer otros

Bien. Supongo que si estás haciendo experimentos aún no tenés nada cerrado, y por eso no ponés una demo completa.

La idea de pasar dos o cuatro valores en cada función no está mal. porque cuatro capas son pocas y es una cantidad manejable. Pero haciendo un loop que recorra todos los div con capas que hay dentro de un div contenedor y metiendo el condicional que haga visible sólo la que pasaste como valor, debería alcanzar para cualquier cantidad de capas. Sí, por supuesto, a la que no le coincida el id que pasaste por función, la oculta.

Hay más formas de hacerlo, con una búsqueda en el Foro tenés para estudiar un buen rato.
site:www.forosdelweb.com ocultar mostrar capas javascript

Te dejo algunos elegidos para que también mirés las fechas.

Mostrar y Ocultar Varias Capas a la vez

mostrar ocultar capas

Mostar y ocultar capas con radio button

Ocultar/mostrar capas

mostrar/ocultar capas???

mostrar ocultar capas con menu de lista

Mostrar/ocultar capas
  #9 (permalink)  
Antiguo 29/10/2012, 13:43
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 1 mes
Puntos: 1567
Respuesta: Aparecer un Div y Desaparecer otros

Esto me sigue resultando poco claro, alternar visibilidad entre capas (muestro una mientras oculto el resto) no es lo mismo que cambiar el contenido de una capa, y pierde más sentido aún si el posicionamiento de las capas es el mismo y encima estamos usando ajax.

La solución, utilizar ajax modificando la url a cargar y utilizar un solo div

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 30/10/2012, 09:35
 
Fecha de Ingreso: septiembre-2012
Mensajes: 14
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Aparecer un Div y Desaparecer otros

Gracias a todos, Amigo @furoya, estaba revisando los enlaces que me colocaste, y si, tienes razón con el tema de arreglos se da un código mas optimizado, tomare eso en cuenta, aun comienzo con esto de programar usando javaScript, Jquery y trato de usar también técnicas de ajax.

Amigo @emprear, me gusta esa idea de programar los contenidos que necesito en diferentes URLs y llamarlos a un solo contenedor, he tratado de visualizar el código para eso pero se me hace complicado verlo con Ajax (quizás es sencillo, pero aun no entiendo bien las técnicas de ajax para llamados), si logro eso seria genial pq ahorro aun mas lineas de código, si puedes ayudarme con ellos te lo agradezco. Pues la idea final es un contenedor para ingresar datos a la BD, otro para manipular los datos de la bd (a traves de google maps, esos ya lo tengo programado), otro para traer datos ya procesados de la BD (reportes) y un ultimo para registro, control y consulta de usuarios para acceso al sistema. Si logro cargar esos contenidos en un solo contenedor seria genial.
  #11 (permalink)  
Antiguo 30/10/2012, 09:45
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 1 mes
Puntos: 1567
Respuesta: Aparecer un Div y Desaparecer otros

Aqui te dejo 2 ejemplos funcionales para que analices

http://foros.emprear.com/ajax/demo/
http://foros.emprear.com/ajax/html-css-js-ajax/

El primero es más simple, el segundo incluye manejo de bases de datos

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 01/11/2012, 11:56
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 9 meses
Puntos: 317
Respuesta: Aparecer un Div y Desaparecer otros

Cita:
Iniciado por emprear Ver Mensaje
Esto me sigue resultando poco claro, alternar visibilidad entre capas (muestro una mientras oculto el resto) no es lo mismo que cambiar el contenido de una capa, y pierde más sentido aún si el posicionamiento de las capas es el mismo y encima estamos usando ajax.
En el mensaje original usó "cargar" por "mostrar". Porque normalmente los contenidos se cargan, y siempre debería parecer así. Pero cuando empezó a hablar de mismas posiciones y desapariciones de div's a mí me quedó más claro. Ni hablar cuando puso lo de elDiv.style.display='none';.
Después medio se divagó de nuevo con las llamadas a la BD, porque es evidente que no maneja bien la diferencia entre "mostrar" y "cargar". (De hecho, lo confirmó después).

La ventaja (en algunos casos muy puntuales) de 'mostrar u ocultar' sobre recargar, es la misma que hay en un rollover apareciendo o desplazando la nueva capa, sobre recargar la imagen con el nuevo src=''. Es cierto que se tienen que hacer todos los pedidos al principio, y que si alguien ve sólo dos capas de cuatro, las que no miró se cargaron inutilmente; pero si esas cajas van a contener información traída de sitios ajenos o que tomen un tiempo de procesado, al tenerlas precargadas se hace más rápido el manejo.


Cita:
Iniciado por dagj Ver Mensaje
... estaba revisando los enlaces que me colocaste, y si, tienes razón con el tema de arreglos se da un código mas optimizado, tomare eso en cuenta, aun comienzo con esto de programar usando javaScript, Jquery y trato de usar también técnicas de ajax.
Allí hay códigos para entretenerte un rato estudiando y probando. No sé cuáles te servirán para tu sitio, pero la idea es que conozcás todos y después elegís cuando empezás un proyecto.
  #13 (permalink)  
Antiguo 10/11/2012, 10:58
 
Fecha de Ingreso: septiembre-2012
Mensajes: 14
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Aparecer un Div y Desaparecer otros

Buenas, con una nueva duda, como seria un código para cargar un contenedor (div) con información alojada en otro html?

Etiquetas: jquery, php+ajax
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:05.