Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Conflicto entre javascript y css

Estas en el tema de Conflicto entre javascript y css en el foro de CSS en Foros del Web. Buenas, Por medio de media-query visualizo un botón. Dicho botón, al hacer clic visualiza un menú. Todo esto pasa a los 700 píxeles, es decir, ...
  #1 (permalink)  
Antiguo 26/06/2015, 03:56
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 564
Antigüedad: 19 años
Puntos: 4
Conflicto entre javascript y css

Buenas,
Por medio de media-query visualizo un botón. Dicho botón, al hacer clic visualiza un menú.
Todo esto pasa a los 700 píxeles, es decir, cuando el navegador mide menos de 700 píxeles, aparece el botón. Al hacer clic, aparece el menú. Si ensancho el navegador a más de 700píxeles, desaparece el botón del menú, pero no el menú.

El código es el siguiente:

Código CSS:
Ver original
  1. #menuR {
  2.     display:none;
  3.     clear:both;
  4.     width:60%;
  5.     min-width:300px;
  6.     margin-left:-36px;
  7.     background:#99B59F;
  8. }
  9. #menuR nav ul{
  10.     list-style:none;
  11. }
  12. #menuR nav ul li {
  13.     height:30px;
  14.     border:1px solid #FFFCD8;
  15.     padding-top:6px;
  16.     padding-left:5px;
  17.     background:url('../imatges/fletxeta.png') no-repeat;
  18.     background-position:right center;
  19. }
  20. #menuR nav ul li a {
  21.     text-decoration:none;
  22.     color:#FFFCD8;
  23.     font:bold 1em Helvetica, Arial;
  24. }
  25.  
  26. @media screen and (min-width:700px){
  27.     #menuR {display:none;}
  28. }

Y al pulsar clic sobre el botón:
Código Javascript:
Ver original
  1. function MenuVisible() {
  2.     if (document.getElementById("menuR").style.display == "block")
  3.         document.getElementById("menuR").style.display = "none";
  4.     else
  5.         document.getElementById("menuR").style.display = "block";
  6. }


Qué tengo que hacer para que al pasar de 700píxeles, desaparezca el menú?

Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #2 (permalink)  
Antiguo 26/06/2015, 06:41
Avatar de mbm150  
Fecha de Ingreso: enero-2013
Ubicación: Muskiz
Mensajes: 79
Antigüedad: 8 años
Puntos: 21
Respuesta: Conflicto entre javascript y css

Hola,

una solución es en la función comprobar el ancho de la ventana y actuar según lo que sea, aunque yo suelo hacer estas cosas añadiendo clases en lugar de editar las propiedades:

Código CSS:
Ver original
  1. /*Añado una clase para cuando este abierto*/
  2. #menuR.open{
  3.     display:block;
  4. }
  5. /*Y las hago desaparecer cuando me interesa*/
  6. @media screen and (min-width:700px) {
  7.     #menuR, #menuR.open {
  8.         display:none;
  9.     }
  10. }
Código Javascript:
Ver original
  1. /*Esta funcion añade o quita la clase al clickar*/
  2. function MenuVisible() {
  3.     document.getElementById("menuR").classList.toggle('open');
  4. }

La ventaja de esto es que puede añadir transiciones y otras cosas en la clase añadida. Aquí esta en funcionamiento: http://jsfiddle.net/mbm150/51znynr4/

De todas formas, como te he dicho antes puedes averiguar el ancho con js y desde javascript modificarlo también.

Saludos.
__________________
Juego del Ahorcado
  #3 (permalink)  
Antiguo 26/06/2015, 11:25
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 6 años, 1 mes
Puntos: 208
Respuesta: Conflicto entre javascript y css

La solución más simple que a mi se me ocurre es meter el botón y el menú dentro de un contenedor, y aplicar el display none o display block con media queries a ese contenedor y no solo al botón de menú.

Algo así:

Código HTML:
Ver original
  1. <div class="menuR">
  2.     <button class="boton">MENU</button>
  3.     <nav class="lista-menu">
  4.         <ul>
  5.             <li><a href="#">Home</a></li>
  6.             <li><a href="#">About</a></li>
  7.             <li><a href="#">Clients</a></li>
  8.             <li><a href="#">Contact Us</a></li>
  9.         </ul>
  10.     </nav> 
  11. </div>

Código CSS:
Ver original
  1. @media screen and (min-width:700px){
  2.     .menuR{
  3.         display:none;
  4.     }
  5. }

Agrego también el Jquery de aparición de menú clickeando el botón..

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    
  3.     $(".boton").click(function(){
  4.        
  5.         $(".lista-menu").slideToggle();
  6.        
  7.     });
  8.    
  9. });

Y de paso dejo un codepen funcionando:

http://codepen.io/fede5426/pen/vOpLQj

Saludos
  #4 (permalink)  
Antiguo 26/06/2015, 15:56
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 564
Antigüedad: 19 años
Puntos: 4
Respuesta: Conflicto entre javascript y css

Gracias por tu respuesta, me ha gustado, nunca lo había hecho así.
De todas formas me gustaría saber porqué cuando cuando se asigna la propiedad display:block en javascript, luego en css, se hace caso omiso cuando asignas display:none?

De nuevo, gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #5 (permalink)  
Antiguo 27/06/2015, 01:13
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 564
Antigüedad: 19 años
Puntos: 4
Respuesta: Conflicto entre javascript y css

Gracias fede 5426, pero creo que no me sirve, pues el botón es siempre visible cuando el navegador tiene un ancho inferior a los 700 píxeles. Y el menú se visualiza cuando haces clic a dicho botón.
De todas maneras, no acabo de entender el motivo por el que css no puede cambiar una propiedad asignada por javascript.

Gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 27/06/2015 a las 01:27
  #6 (permalink)  
Antiguo 27/06/2015, 03:55
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 564
Antigüedad: 19 años
Puntos: 4
Respuesta: Conflicto entre javascript y css

Sigo peleándome con el tema.
Veo que lo que se asigna en javascript pasa por encima de lo que se pretenda hacer con media queries, motivo por lo que, siguiendo los consejos, definiré los mediaqueries en javascript.

Lo que quiero es ocultar la capa menuR cuando el navegador supere los 700 píxeles, en el caso que esté visible. Si está visible, es porqué mediante javascript se ha asignado document.getElementById("menuR").style.display = "block";

He puesto este código pero no hace nada:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     if (window.matchMedia("(min-width:700px)").matches) {
  3.         if ($("#menuR").css("display") == "block")
  4.             $("#menuR").css("display", "none");
  5.     }
  6. }
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 27/06/2015 a las 05:07
  #7 (permalink)  
Antiguo 27/06/2015, 05:51
Avatar de mbm150  
Fecha de Ingreso: enero-2013
Ubicación: Muskiz
Mensajes: 79
Antigüedad: 8 años
Puntos: 21
Respuesta: Conflicto entre javascript y css

Hola,

el problema del CSS es la prioridad, creo que si pones !important ya funciona...

Código Javascript:
Ver original
  1. @media screen and (min-width:700px){
  2.     #menuR {display:none !important;}
  3. }

Este es tu ejemplo inicial funcionando correctamente: http://jsfiddle.net/mbm150/51znynr4/1/

Saludos.
__________________
Juego del Ahorcado
  #8 (permalink)  
Antiguo 27/06/2015, 05:58
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 564
Antigüedad: 19 años
Puntos: 4
Respuesta: Conflicto entre javascript y css

Fenomenal. Muchas gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: background, color, conflicto, javascript, todo, width
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 19:21.