Aparecer un Div y Desaparecer otros

[dagj]

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

[hackjose]

Todo eso se puede hacer con un solo div

por ejemplo tenemos esto

Código HTML:

<script>
function cargar_contenido(contenido)
{
document.getElmentById.innerText = contenido;
document.getElmentById.textContent = contenido;
}
</script>
<style>
#contenido
{
visibility:hidden;
}
</style>
<div id="contenido"></div>
<button id="uno" onclick="cargar_contenido('contenido primer div');">1</button>
<button id="dos" onclick="cargar_contenido('contenido segundo div');">2</button>
<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

[emprear]

Iniciado por hackjose

Todo eso se puede hacer con un solo div

por ejemplo tenemos esto

Código HTML:

<script>
function cargar_contenido(contenido)
{
document.getElmentById.innerText = contenido;
document.getElmentById.textContent = contenido;
}
</script>
<style>
#contenido
{
visibility:hidden;
}
</style>
<div id="contenido"></div>
<button id="uno" onclick="cargar_contenido('contenido primer div');">1</button>
<button id="dos" onclick="cargar_contenido('contenido segundo div');">2</button>
<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

[hackjose]

Iniciado por emprear

@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

[furoya]

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 ...

[dagj]

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.

[dagj]

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

[furoya]

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

[emprear]

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

[dagj]

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.

[emprear]

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

[furoya]

Iniciado por emprear

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.

Iniciado por dagj

... 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.

[dagj]

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