Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Problema con javascript y display

 Estas en el tema de Problema con javascript y display en el foro de Javascript en Foros del Web. Hola a todos, solo tengo que mostrar unos simples divs con una funcion de javascript mediante unos botones pero es que no me hace caso, ...
  #1 (permalink)  
Antiguo 08/02/2013, 14:28
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Problema con javascript y display
Hola a todos,
solo tengo que mostrar unos simples divs con una funcion de javascript mediante unos botones pero es que no me hace caso, supongo que algo tendre mal, pero no se el que. Os dejo el codigo a ver si vosotros me decis el problema, es que me lleva de cabeza.
Funcion
Código Javascript: 
Ver original
  1. function menus_desplegable(k) {
  2.     
  3.     var d=document.getElementById("descripcion");
  4.     var i=document.getElementById("info");
  5.     var r=document.getElementById("requisitos");
  6.     var m=document.getElementById("multimedia");
  7.     
  8.     switch(k) {
  9.     case 1:
  10.         d.sytle.display="none";
  11.         i.style.display="";
  12.         r.style.display="hidden";
  13.         m.style.display="hidden";
  14.         break;
  15.         
  16.     case 2:
  17.         d.sytle.display="hidden";
  18.         i.style.display="visible";
  19.         r.style.display="hidden";
  20.         m.style.display="hidden";
  21.         break;
  22.         
  23.     case 3:
  24.         d.sytle.display="hidden";
  25.         i.style.display="hidden";
  26.         r.style.display="visible";
  27.         m.style.display="hidden";
  28.         break;
  29.         
  30.     case 4:
  31.         d.sytle.display="hidden";
  32.         i.style.display="hidden";
  33.         r.style.display="hidden";
  34.         m.style.display="visible";
  35.         break;
  36.             
  37.     default:
  38.         d.sytle.display="visible";
  39.         i.style.display="hidden";
  40.         r.style.display="hidden";
  41.         m.style.display="hidden";
  42.         break;
  43.  
  44.     }
  45. }
  46.  
  47. </script>
Controles que manejan los distintos divs a ocultar/mostrar
Código HTML: 
Ver original
  1. <div class="game_buttons">
  2.                         <a href="javascript:menus_desplegable(1);" ><img title="Ver descripcion" alt="Ver descripcion" src="ima/iconos/iconodescripcion.png" onmouseover="this.src='ima/iconos/iconodescripcion2.png'" onmouseout="this.src='ima/iconos/iconodescripcion.png'" /></a>
  3.                         <a href="javascript:menus_desplegable(2);" ><img title="Ver informacion" alt="Ver informacion" src="ima/iconos/iconoinfo.png" onmouseover="this.src='ima/iconos/iconoinfo2.png'" onmouseout="this.src='ima/iconos/iconoinfo.png'" /></a>
  4.                         <a href="javascript:menus_desplegable(3);" ><img title="Ver requisitos minimos" alt="Ver requisitos minimos" src="ima/iconos/iconorequisitos.png" onmouseover="this.src='ima/iconos/iconorequisitos2.png'" onmouseout="this.src='ima/iconos/iconorequisitos.png'" /></a>
  5.                         <a href="javascript:menus_desplegable(4);" ><img title="Ver multimedia" alt="Ver multimedia" src="ima/iconos/iconomultimedia.png" onmouseover="this.src='ima/iconos/iconomultimedia2.png'" onmouseout="this.src='ima/iconos/iconomultimedia.png'" /></a>
  6.                     </div>
Código HTML: 
Ver original
  1. <div class="menus_desplegable" id="descripcion">
  2.                     Descripción.
  3.                     </div><div class="menus_desplegable" id="info">
  4.                     Info
  5.                     </div><div class="menus_desplegable" id="requisitos">
  6.                     Requisitos.
  7.                     </div><div class="menus_desplegable" id="multimedia">
  8.                     Multimedia.
  9.                     </div>

Gracias por vuestra atención
  #2 (permalink)  
Antiguo 08/02/2013, 14:34
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Problema con javascript y display
Por lo pronto los valores para la propiedad display para mostrar u ocultar un elemento son:
"block" y "none"

"visible" y "hidden" se aplican a la propiedad visibility

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 08/02/2013, 18:35
Colaborador
  
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 16 años, 6 meses
Puntos: 528
Respuesta: Problema con javascript y display
También se puede aplicar "table" al display, para casos donde se requiera que el div pueda crecer.
  #4 (permalink)  
Antiguo 09/02/2013, 05:44
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con javascript y display
Hola, he cambiado donde ponía "visible" por "block" y donde "hidden" por "none" pero sigue sin funcionar y no se porque. Me lleva loco. A ver si a alguien se le ocurre algo.
Gracias

PD :Por cierto, he pensado que igual no valia ponerlo en href y en vez de ahí, he puesto onClick="menus_desplegable(1);" a ver si asi funcionaba pero tampoco.
  #5 (permalink)  
Antiguo 09/02/2013, 07:21
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Problema con javascript y display
El problema es que con
elemento.style.display, solo podés recuperar el valor se la propiedad css es declarada en el atributo style, en el caso de querer saber un valor definido dentro de
<style>
#capa{
display: none;
}
</style>

debés usar el método window.getComputedStyle

Ejemplo
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10.  
  11. #hola{
  12. color: #000000;
  13. }
  14.  
  15. /*]]>*/
  16. </style>
  17. <script type="text/javascript">
  18. //<![CDATA[
  19. /* script */
  20. function menus_desplegable() {
  21. var d=document.getElementById("hola");
  22. alert(d.style.display);
  23. alert(d.style.color);
  24. }
  25.  
  26.  
  27.  
  28. function menus_desplegable2(elemento,propiedad){
  29. var d = document.getElementById(elemento);
  30. if (d.currentStyle){// ie<9
  31. var valorPropiedad = d.currentStyle[propiedad];
  32. }else if (window.getComputedStyle){
  33. var valorPropiedad = document.defaultView.getComputedStyle(d,null).getPropertyValue(propiedad);
  34. }
  35. alert(d.style.display);
  36. alert(valorPropiedad);
  37. }
  38.  
  39.  
  40. //]]>
  41. </script>   
  42. </head>
  43. <body>
  44. <button onclick="menus_desplegable();">ver display y color div hola</button>
  45. <button onclick="menus_desplegable2('hola','color');">ver display y color div hola, método 2</button>
  46. <div class="menus_desplegable" id="hola" style="display:none;">Descripción</div>
  47. </body>
  48. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 09/02/2013, 07:52
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con javascript y display
la cosa es que los tengo ordenados dentro de una css.
Ademas yo esto ya lo hice anteriormente y me funciono perfectamente.
Esa es la unica solucion? O se puede hacer de otro modo pero que valga para lo mismo, es Decir, mostrar y ocultar una info?
Gracias
  #7 (permalink)  
Antiguo 09/02/2013, 11:30
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Problema con javascript y display
si, me olvidé otro detalle, yo lo corregi cuando lo probé pero no te lo mencione


que error observás en esto

d.sytle.display="block";
i.style.display="none";
r.style.display="none";
m.style.display="none";

y que se repite en el resto para d

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 09/02/2013, 12:24
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con javascript y display
Style
Mierda
De todas formas sigue sin ir. Me voy a pegar un tiro. Con la funcion que dijiste vale para estilos en una css?
Gracias
  #9 (permalink)  
Antiguo 09/02/2013, 12:35
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: Problema con javascript y display
Hola:

¿A qué te refieres con:
Cita:
Iniciado por legomolina Ver Mensaje
...vale para estilos en una css?...
Los estilos en una sección style pueden ser por clases... pero supongo que te refieres a algo distinto.

Hay más estilos para display como inline, pero para elementos de bloque "div" deben ser block y none...

Si no te va, seguro que tienes algún error que provoca que no se ejecute tu función. Revisa la consola de errores de tu navegador.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Última edición por caricatos; 09/02/2013 a las 12:36 Razón: ortografía
  #10 (permalink)  
Antiguo 09/02/2013, 12:41
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Problema con javascript y display
Cita:
Iniciado por legomolina Ver Mensaje
Style
Mierda
De todas formas sigue sin ir. Me voy a pegar un tiro. Con la funcion que dijiste vale para estilos en una css?
Gracias
haceme un favor, pasa el código completo tal cual lo tenes ahora, html, css, javascript, pero en un html único

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 09/02/2013, 15:26
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con javascript y display
Aqui te dejo el codigo de la pag. Aun falta por añadir varias cosillas.

Codigo de la pag:
Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="estilo/clasicosprueba.css" rel="Stylesheet" type="text/css" />
  6.  
  7. <script language="javascript" type="text/javascript">
  8. function menus_desplegable(k) {
  9.     
  10.     var d=document.getElementById("descripcion");
  11.     var i=document.getElementById("info");
  12.     var r=document.getElementById("requisitos");
  13.     var m=document.getElementById("multimedia");
  14.     
  15.     switch(k) {
  16.     case 1:
  17.         d.style.display="block";
  18.         i.style.display="none";
  19.         r.style.display="none";
  20.         m.style.display="none";
  21.         break;
  22.         
  23.     case 2:
  24.         d.style.display="none";
  25.         i.style.display="block";
  26.         r.style.display="none";
  27.         m.style.display="none";
  28.         break;
  29.         
  30.     case 3:
  31.         d.style.display="none";
  32.         i.style.display="none";
  33.         r.style.display="block";
  34.         m.style.display="none";
  35.         break;
  36.         
  37.     case 4:
  38.         d.style.display="none";
  39.         i.style.display="none";
  40.         r.style.display="none";
  41.         m.style.display="block";
  42.         break;
  43.             
  44.     default:
  45.         d.style.display="block";
  46.         i.style.display="none";
  47.         r.style.display="none";
  48.         m.style.display="none";
  49.         break;
  50.  
  51.     }
  52. }
  53.  
  54. </script>
  55. </head>
  56.  
  57. <body>
  58.     <!-- Tabla contenedora  100%-width -->
  59.     <table class="table_container">
  60.         <tr>
  61.             <td>
  62.                 <!-- Contenedor de los botones del menu 60px-heigth; fixed-position -->
  63.                 <div class="menu_button_container">
  64.                     <table>
  65.                         <!-- cada boton 20%-width -->
  66.                         <tr>
  67.                             <td class="menu_button">
  68.                                 <img src="ima/boton/accion1.png" onmouseout="this.src='ima/boton/accion1.png'" onmouseover="this.src='ima/boton/accion2.png'" />
  69.                             </td>
  70.                             <td class="menu_button">
  71.                                 Aventura
  72.                             </td>
  73.                             <td class="menu_button">
  74.                                 <img src="ima/boton/conduccion1.png" onmouseout="this.src='ima/boton/conduccion1.png'" onmouseover="this.src='ima/boton/conduccion2.png'" />
  75.                             </td>
  76.                             <td class="menu_button">
  77.                                 <img src="ima/boton/plataformas1.png" onmouseout="this.src='ima/boton/plataformas1.png'" onmouseover="this.src='ima/boton/plataformas2.png'" />
  78.                             </td>
  79.                             <td class="menu_button">
  80.                                 Varios
  81.                             </td>
  82.                         </tr>
  83.                     </table>
  84.                 </div>
  85.                 <!-- Contenedor principal alojado justo abajo de los botones -->
  86.                 <div class="main_frame_container">
  87.                     
  88.                     <!-- Botones descripcion, info, requisitos, multimedia -->
  89.                     <div class="game_buttons">
  90.                         <a href="#" onClick="menus_desplegable(1);" ><img title="Ver descripcion" alt="Ver descripcion" src="ima/iconos/iconodescripcion.png" onmouseover="this.src='ima/iconos/iconodescripcion2.png'" onmouseout="this.src='ima/iconos/iconodescripcion.png'" /></a>
  91.                         <a href="#" onClick="menus_desplegable(2);" ><img title="Ver informacion" alt="Ver informacion" src="ima/iconos/iconoinfo.png" onmouseover="this.src='ima/iconos/iconoinfo2.png'" onmouseout="this.src='ima/iconos/iconoinfo.png'" /></a>
  92.                         <a href="#" onClick="menus_desplegable(3);" ><img title="Ver requisitos minimos" alt="Ver requisitos minimos" src="ima/iconos/iconorequisitos.png" onmouseover="this.src='ima/iconos/iconorequisitos2.png'" onmouseout="this.src='ima/iconos/iconorequisitos.png'" /></a>
  93.                         <a href="#" onClick="menus_desplegable(4);" ><img title="Ver multimedia" alt="Ver multimedia" src="ima/iconos/iconomultimedia.png" onmouseover="this.src='ima/iconos/iconomultimedia2.png'" onmouseout="this.src='ima/iconos/iconomultimedia.png'" /></a>
  94.                     </div>
  95.                     
  96.                     <div class="menus_desplegable" id="descripcion">
  97.                     Descripción.
  98.                     </div>
  99.                     
  100.                     <div class="menus_desplegable" id="info">
  101.                     <table width="100%">
  102.                                 <tr>
  103.                                     <td style="width:30%">
  104.                                         Desarrollador:
  105.                                     </td>
  106.                                     <td>
  107.                                         Desarrollador respuesta
  108.                                     </td>
  109.                                     
  110.                                 </tr>
  111.                                 <tr>
  112.                                     <td>
  113.                                         Distribuidor:
  114.                                     </td>
  115.                                     <td>
  116.                                         Distribuidor respuesta
  117.                                     </td>
  118.                                     
  119.                                 </tr>
  120.                                 <tr>
  121.                                     <td>
  122.                                         Plataformas:
  123.                                     </td>
  124.                                     <td>
  125.                                         Plataformas respuesta
  126.                                     </td>
  127.                                 </tr>
  128.                             </table>
  129.                 </div>
  130.                 <div class="menus_desplegable"  id="requisitos">
  131.                     <table width="100%">
  132.                                 <tr>
  133.                                     <td>
  134.                                         Sistema operativo:
  135.                                     </td>
  136.                                     <td>
  137.                                         Sistema operativo respuesta
  138.                                     </td>
  139.                                     <td>
  140.                                         Memoria RAM:
  141.                                     </td>
  142.                                     <td>
  143.                                         Memoria RAM respuesta
  144.                                     </td>
  145.                                     <td>
  146.                                         Procesador:
  147.                                     </td>
  148.                                     <td>
  149.                                         Procesador respuesta
  150.                                     </td>
  151.             
  152.                                 </tr>
  153.                                 <tr>
  154.                                     <td>
  155.                                         Disco Duro:
  156.                                     </td>
  157.                                     <td>
  158.                                         Disco Duro respuesta
  159.                                     </td>
  160.                                     <td>
  161.                                         Tarjeta de sonido:
  162.                                     </td>
  163.                                     <td>
  164.                                         Tarjeta de sonido respuesta
  165.                                     </td>
  166.                                     <td>
  167.                                         CD/DVD:
  168.                                     </td>
  169.                                     <td>
  170.                                         CD/DVD respuesta
  171.                                     </td>
  172.             
  173.                                 </tr>
  174.                                 <tr>
  175.                                     <td>
  176.                                         Periféricos:
  177.                                     </td>
  178.                                     <td>
  179.                                         Periféricos respuesta
  180.                                     </td>
  181.                                     <td>
  182.                                         DirectX:
  183.                                     </td>
  184.                                     <td>
  185.                                         DirectX respuesta
  186.                                     </td>
  187.                                     <td>
  188.                                         Tarjeta gráfica:
  189.                                     </td>
  190.                                     <td>
  191.                                         Tarjeta gráfica respuesta
  192.                                     </td>
  193.             
  194.                                 </tr>
  195.                             </table>
  196.                 </div>
  197.                 <div class="menus_desplegable" id="multimedia">
  198.                     <table width="100%">
  199.                         <tr>
  200.                             <td>
  201.                                 Imagenes
  202.                             </td>
  203.                         </tr>
  204.                         <tr>
  205.                             <td>
  206.                                 Videos
  207.                             </td>
  208.                         </tr>
  209.                     </table>
  210.                 </div>
  211.                 </div>
  212.             </td>
  213.         </tr>
  214.     </table>
  215. </body>
  216. </html>


Codigo del archivo clasicosprueba.css
Código CSS: 
Ver original
  1. /* CSS Document */
  2. .table_container {
  3.     width:100%;
  4. }
  5. .menu_button {
  6.     width: 20%;
  7. }
  8. .menu_button_container {
  9.     position: fixed;
  10.     height: 60px;
  11.     background-color: #36F;
  12.     top: 0px;
  13.     left: 0px;
  14.     width: 100%;
  15. }
  16. .main_frame_container {
  17.     left: 0px;
  18.     top: 60px;
  19.     position: absolute;
  20.     width: 100%;
  21. }
  22. .game_buttons {
  23.     background-color: #39C;
  24. }
  25. .menus_desplegable{
  26.     position: relative;
  27.     margin:15px;
  28.     visibility: hidden;
  29. }
  #12 (permalink)  
Antiguo 09/02/2013, 16:43
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: Problema con javascript y display
Hola:

No sé porqué usas enlaces si no tienes intención de enlazar... si te interesa que haya una mano, puedes usar estilos... <a href="#"...> es un enlace interno al tope de la página

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 09/02/2013, 17:33
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con javascript y display
Hola.
Como lo hago? Porque yo quiero que para abrir esos divs halla que pulsar una imagen como la que hay. Pense en <button> pero eso pone la imagen dentro del boton
Gracias
  #14 (permalink)  
Antiguo 09/02/2013, 17:41
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Problema con javascript y display
Cita:
Iniciado por legomolina Ver Mensaje
Hola.
Como lo hago? Porque yo quiero que para abrir esos divs halla que pulsar una imagen como la que hay. Pense en <button> pero eso pone la imagen dentro del boton
Gracias
una cosa a la vez
no te funciona por lo siguiente, en el menu etás trabajando con style.display, y en el css usas

.menus_desplegable{
position: relative;
margin:15px;
visibility: hidden;
}
Entonces no te la cambia, debería ser

.menus_desplegable{
position: relative;
margin:15px;
display: none;
}

lo que te señala @caricatos es lo correcto.
en lugar de
<a href="#" onclick="..."><img src=...></a>
hacés sencillamente

<img onclick="menu_desplegable(1);" src="".... onmouseover... onmouseout... style="cursor: pointer" />.....

con eso llamas la función y tenés la "manito" sobre el menu

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 10/02/2013, 06:06
Avatar de legomolina  
Fecha de Ingreso: junio-2011
Ubicación: Valencia
Mensajes: 165
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con javascript y display
Muchas gracias a todos, al final era lo que decía emprear. He cambiado el estilo del .css y funciona perfectamente. De todas formas, muchisimas gracias a todos.

Etiquetas: display, funcion
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:06.