Menú dinamico

ayosefj92 · 10 Jul 2011, 19:51 · Solicitar retirada

Hola, estoy intentando trabajar un menú dentro de la misma página. La idea es poner dos palabras, película y trailer y al hacer click en película muestre la película y al hacer click en trailer muestre el trailer:

El código que tengo hecho hasta ahora es este:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>

<script>
function pelicula()
document.getElementById("pelicula").innerHTML="pelicula";

//************************************************************************

function trailer()
document.getElementById("pelicula").innerHTML="trailer";

</script>

</head>
<body>

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="32" align="center"><a href="#" onClick="pelicula()">pelicula</a></td>
    <td align="center"><p><a href="#" onClick="trailer()">trailer</a></p>
    </td>
  </tr>
  <tr>
    <td height="222" colspan="2" align="center">
	
	<div id="pelicula">
	
	</div>
	
	</td>
  </tr>
</table>

</body>
</html>

Me funciona perfectamente, el unico problema es cuando introdusco por ejemplo el código de youtube del trailer... que hay problema con las comillas.

La idea es com trabajar un menú para la misma página , que al hacer click me muestre un div y cuando hago click en la otra palabra me muestre el otro div.

pd:si se podría hacer sin javascript sería mejor (por si acaso que el visitante tenga el javascript desactivado y no le de problemas).

JorGens · 10 Jul 2011, 19:57 · Solicitar retirada

Sin javascript? Usa CSS. Pon una capa con display:hidden para la que quieras ocultar y listo, no? Puro y simple CSS. O no es esa la idea? El navegador carga todo, pero solo muestra el div que deseas.

ayosefj92 · 10 Jul 2011, 19:59 · Solicitar retirada

si y como le digo que muestre el otro div cuando el visitador quiera?

JorGens · 10 Jul 2011, 20:00 · Solicitar retirada

A ver si te ayuda esto:

http://www.w3schools.com/css/css_display_visibility.asp

ayosefj92 · 10 Jul 2011, 20:08 · Solicitar retirada

Está bueno Jorgens gracias, y en Javascript como lo podría hacer? porque más halla me intentaron ayudar pero no me sirvió.

JorGens · 10 Jul 2011, 20:39 · Solicitar retirada

En javascript debe ser también sencillo, pero aún no lo domino tanto, je je je. Lo siento. Pero si aprendes espero que nos cuentes, oki?

ayosefj92 · 10 Jul 2011, 20:47 · Solicitar retirada

jaja haber, porque con el que tu me pasastes es para ocultar y mostrar, y lo que yo quiero hacer es que o muestre un div o muestre el otro.

JorGens · 10 Jul 2011, 21:00 · Solicitar retirada

Algo como esto?

Ocultar:
document.getElementById('nombre_div').style.visibility = "hidden";
Mostrar una capa oculta:
document.getElementById('nombre_div').style.visibility = "visible";

JorGens · 10 Jul 2011, 21:02 · Solicitar retirada

-en un ejemplo sería así:

<html>
<head>
<script languaje="javascript">
function ocultar()
{
document.getElementById('capa1').style.visibility = "hidden";
}
function mostrar()
{
document.getElementById('capa1').style.visibility = "visible";
}
</script>
</head>
<body>
<div id="capa1" style='position:relative;'>
Esta es la capa 1
</div>
<a href="#" onclick="ocultar()">Oculta la capa 1</a>
<a href="#" onclick="mostrar()">Muestra la capa 1</a>
</body>
</html>

ayosefj92 · 10 Jul 2011, 21:11 · Solicitar retirada

esa es la idea mas o menos, lo unico que en vez de mostrar el boton ocultar, ponga mostrar capa 2 y mostrar una capa 2 y que se quite la capa 1 (lo hice pero me muestra las dos capas)

JorGens · 10 Jul 2011, 21:19 · Solicitar retirada

Ya te digo que el javascript no es lo mio aún, pero se me ocurre esto:

<head>
<script languaje="javascript">
function uno()
{
document.getElementById('capa1').style.visibility = "hidden";
document.getElementById('capa2').style.visibility = "visible";
}
function otro()
{
document.getElementById('capa1').style.visibility = "visible";
document.getElementById('capa2').style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="capa1" style='position:relative;'>
Esta es la uno
</div>
<div id="capa2" style='position:relative;'>
Esta es la otro
</div>
<a href="#" onclick="uno()">Mostrar uno</a>
<a href="#" onclick="otro()">Mostrar otro</a>
</body>
</html>

JorGens · 10 Jul 2011, 21:20 · Solicitar retirada

Si te vale, se podria rehacer y dejar solo una función, pasándole entre los paréntesis la capa que quieras mostrar y dejando entonces solo una función.

ayosefj92 · 10 Jul 2011, 21:27 · Solicitar retirada

Si jorgens esa es la idea, lo arregle lo tenías al rrevez:

<html>
<head>
 
 <script languaje="javascript">
 function capa1()
 {
 document.getElementById('capa1').style.visibility = "visible";
 document.getElementById('capa2').style.visibility = "hidden";
 }
 function capa2()
 {
 document.getElementById('capa1').style.visibility = "hidden";
 document.getElementById('capa2').style.visibility = "visible";
 }
 </script>
 
 </head>
 <body>
 
 <a href="#" onclick="capa1()">Mostrar uno</a>
 <a href="#" onclick="capa2()">Mostrar otro</a>
 
 
 <div id="capa1" style='position:relative;'>
 Esta es la capa 1
 </div>
 <div id="capa2" style='position:relative;'>
 Esta es la capa 2
 </div>



 </body>
 </html>

El único problema es que desde el incio me muestra los dos divs y lo idea sería conseguir que muestre 1 div solo, y al cargar el otro div me lo cargue donde está el primero y no de bajo como hace ahora, entiendes a lo que me refiero?

JorGens · 10 Jul 2011, 21:42 · Solicitar retirada

mmm, ya veo. Igual es una tonteria, pero se puede poner un onload en el body para que cargue una de las funciones? De ese modo no se espera al clic y se queda ya oculta una de ellas. Pero realmente no se si es la manera correcta ni si funcionaría. En este tema estoy algo pez, je je je

JorGens · 10 Jul 2011, 21:44 · Solicitar retirada

Ah! y si defines la misma posición con las mismas coordenadas a ambas capas, seguro que te aparecen en el mismo lugar. Con top:50px; left:50px por ejemplo en la hoja de estilos.

ayosefj92 · 10 Jul 2011, 21:46 · Solicitar retirada

jajaajajaja pues no creo que sea ninguna tontería jajaajajaj porque funciona!, El único problema es que el div 2 lo carga por debajo del div uno, pero me estoy viendo un video que me va a terminar de resolver las dudas.

Cunado termine, vengo y te cuento, muchas gracias Jorgens.

ayosefj92 · 10 Jul 2011, 21:49 · Solicitar retirada

Bueno le di css las capas pero sigue el mismo problema, me muestra el div una linea más abajo.

JorGens · 10 Jul 2011, 22:11 · Solicitar retirada

veamos. Ponle a body esto en la hoja de estilos, y a las capas lo que indico abajo:

body { ... lo que ya tengas.... ; position:absolute}
#capa1 { ... lo que ya tenga... ; left:100px ; top:100px}
#capa2 { ... lo que ya tenga... ; left:100px ; top:100px}

y me dices. Si no funciona, cambia absolute por relative, que ahora mismo no recuerdo de cabeza cuál quiero poner, je je je

ayosefj92 · 10 Jul 2011, 22:16 · Solicitar retirada

<html>
<head>
 
 <style type="text/css">
 body { position:relative}
 
 #capa1{ width:500px; left:100px ; top:100px;  }
 #capa2{ width:500px; left:100px ; top:100px ;}
 
 
 </style>
 
 
 <script languaje="javascript">
 function capa1()
 {
 document.getElementById('capa1').style.visibility = "visible";
 document.getElementById('capa2').style.visibility = "hidden";
 }
 function capa2()
 {
 document.getElementById('capa1').style.visibility = "hidden";
 document.getElementById('capa2').style.visibility = "visible";
 }
 </script>
 
 </head>
 <body onLoad="capa1()">
 
 <a href="#" onclick="capa1()">Mostrar uno</a>
 <a href="#" onclick="capa2()">Mostrar otro</a>
 
 
 <div id="capa1" style='position:relative;'>
 Esta es la capa 1 
 <br> 
 esta es la capa numero 1
 </div>
 <div id="capa2" style='position:relative;'>
 Esta es la capa 2
  <br> 
 esta es la capa numero 2
 </div>



 </body>
 </html>

probé absolute y relative jeje y nada.

JorGens · 10 Jul 2011, 22:22 · Solicitar retirada

mmmm, pónselo a capa1 y capa2 en lugar de al body. Jo, ahora mismo no recuedo cómo era exactamente, pero te clava los divs exáctamente donde lo necesitas.

Ah, quita antes los styles rojos estos,

<div id="capa2" style='position:relative;'>

y ve probando pero en los estilos del head, oki?

ayosefj92 · 10 Jul 2011, 22:25 · Solicitar retirada

bueno... me da a mí que voy a tener que cambiar todo el código e hacerlo de otra manera porque en explore no funciona todo esto.. jaaj me acavo de dar cuenta xD

Doodleo · 10 Jul 2011, 22:26 · Solicitar retirada

Ayose, en el código que has puesto no enlazas la hoja de estilos con el html, entonces poco te va a leer del CSS jejeje
Prueba a ver como te dijo Jorgens y nos cuentas :D

JorGens · 10 Jul 2011, 22:27 · Solicitar retirada

pff, vaya. marditos navegaores.... je je je

Sorry

Doodleo · 10 Jul 2011, 22:27 · Solicitar retirada

Primero intenta que funcione en algún navegador, a IE siempre le pasa lo mismo, ya buscaremos algún "hack" para solucionarlo jejeje

JorGens · 10 Jul 2011, 22:32 · Solicitar retirada

mmmm, a mí si me funciona ahora en firefox e internet explorer, con este código:

<html>
<head>

<style type="text/css">
#capa1{ width:500px; left:100px ; top:100px; background-color:red; position:absolute }
#capa2{ width:500px; left:100px ; top:100px; background-color:green; position:absolute }
</style>

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

</head>
<body onLoad="capa1()">

<a href="#" onclick="capa1()">Mostrar uno</a>
<a href="#" onclick="capa2()">Mostrar otro</a>

<div id="capa1"> Esta es la capa 1 <br> esta es la capa numero 1 </div>
<div id="capa2"> Esta es la capa 2 <br> esta es la capa numero 2 </div>

</body>
</html>