jquery if declaración basada en el tamaño de pantalla

Tengo una barra de navegación deslizable que me gustaría abrir de forma predeterminada en el ancho de pantalla de> = 1024 y cerrada de manera predeterminada < 1024. Tengo un botón que lo abre y lo cierra. Estoy empezando a aprender js. Me imagino que hay una manera de establecer un estado de alternancia predeterminado en una instrucción if si el ancho de la ventana es> = 1024. Cualquier ayuda sería muy apreciada. Esto es lo que tengo hasta ahora para alternar.jquery if declaración basada en el tamaño de pantalla

$('a.expand').toggle(function() { 
     $(this).addClass("open"); 
     $('#nav').animate({width: 50},{queue:false, duration:300}); 
     $('.wrapify').animate({marginLeft: 50},{queue:false, duration:300}); 
     $('.primarynav ul').hide(); 
     $('.navlogo').hide(); 

    }, function() { 
     $(this).removeClass("open"); 
     $('#nav').animate({width: 200},{queue:false, duration:300}); 
     $('.wrapify').animate({marginLeft: 200},{queue:false, duration:300}); 
     $('.primarynav ul').show(); 
     $('.navlogo').show(); 

    });

Fuente

2011-09-13 Drhodes

Esto suena como un trabajo para [CSS3 Consultas de medios] (http://www.css3.info/preview/media -queries /) en lugar de jQuery. – bzlm

Originalmente había usado las consultas de medios de CSS3, pero todavía necesito que alternar para animar abierto y cerrado. Parece que no puedo averiguar cómo establecer el estado de conmutación predeterminado en cerrado, lo que espero hacer con jquery. El problema que tengo es que cuando la consulta de medios se activa, el panel está todavía técnicamente abierto, así que cuando lo presiono la primera vez, simplemente intenta cerrarlo nuevamente, y luego funciona bien. – Drhodes

$(document).ready(function() { 
    // This will fire when document is ready: 
    $(window).resize(function() { 
     // This will fire each time the window is resized: 
     if($(window).width() >= 1024) { 
      // if larger or equal 
      $('.element').show(); 
     } else { 
      // if smaller 
      $('.element').hide(); 
     } 
    }).resize(); // This will simulate a resize to trigger the initial run. 
});

Editar:

O tal vez esto es lo que está buscando:

$(document).ready(function() { 
    if($(window).width() >= 1024) { 
     $('a.expand').click(); 
    } 
});

Esto cambiará el elemento cuando el documento está listo si el ancho es correcto.

Fuente

2011-09-13 17:22:07 demux

Amar, ¿Podría explicarme un poco más, o mostrarme un ejemplo utilizando el código que proporcioné? Aprecio tu ayuda. – Drhodes

Se agregaron algunos comentarios y ejemplos para mostrar y ocultar un elemento con el nombre de clase "elemento". En su código actual, en realidad parece que desea que se muestre algo cuando se hace clic en algo. ¿Es así o quieres que cambie en el cambio de tamaño de la ventana real? ¿Quizás desee que el elemento actúe de forma diferente cuando se hace clic en él, dependiendo del tamaño de la ventana? – demux

Simplemente haga una prueba para screen.width > 1024.

https://developer.mozilla.org/en/DOM/window.screen.width

Fuente

2011-09-13 16:43:04 Blazemonger

Lo he usado para probar el ancho de la pantalla, pero parece que no puedo averiguar a dónde ir desde aquí para obtener los estados predeterminados de alternar para cambiar en función de dicho ancho. $ (document) ready (function() { \t if ((screen.width> = 1024)) \t { \t \t \t} \t demás \t { \t \t \t}} ); – Drhodes

¿Desea que cambie cuando el usuario cambie el tamaño de la ventana? Si es así, use esto: '$ (ventana) .resize (function() {if (screen.width> = 1024) ...});' – Blazemonger

Supongo que necesito que cambie cuando el tamaño de la pantalla es 1024, o si cambian el tamaño a menos de 1024. Mi problema principal es conseguir que el estado predeterminado de la palanca se cierre cuando <1024, abrir cuando> 1024. Podría hacer el resto con las consultas de medios css3, pero busqué jquery para hacer la animación y el alternar. – Drhodes

que estaba haciendo un proyecto similar y este código funcionó para mí ..

if($(window).width() >= 540) { 
    //code to execute 
}

Fuente

2018-02-11 17:36:35 ArafPlays

jquery if declaración basada en el tamaño de pantalla

Respuesta

Cuestiones relacionadas