jquery, agregar/eliminar clase cuando el ancho de la ventana cambia

Question

He escrito una secuencia de comandos muy básica para agregar/eliminar una clase en la carga o cuando se cambia el tamaño de una ventana.

Me preguntaba si había una forma mejor de hacerlo o si es posible reducir las líneas de código.

Básicamente, quiero poder modificar los estilos cuando el sitio se ve en una pantalla más pequeña. Pensé que sería mejor agregar una nueva clase a la etiqueta html cuando estaba debajo de un cierto ancho ...

De todos modos aquí está mi código.

<script type="text/javascript"> 
$(document).ready(function() { 
    /* Check width on page load*/ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {} 
}); 

$(window).resize(function() { 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
}); 

Gracias

Gillian

clases

Answer 1

function resize() { 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
} 

$(document).ready(function() { 
    $(window).resize(resize); 
    resize(); 
}); 

Answer 2

uso de los medios

@media screen and (max-width: 900px) { 
    .class { 
    width:800px; 

    } 
} 

@media screen and (max-width: 500px) { 
     .class { 
     width:450px; 

    } 
} 

Answer 3

En primer lugar, DRY (No te repitas) su código mediante el uso de una función:

function checkWidth(init) 
{ 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
     $('html').addClass('mobile'); 
    } 
    else { 
     if (!init) { 
      $('html').removeClass('mobile'); 
     } 
    } 
} 

$(document).ready(function() { 
    checkWidth(true); 

    $(window).resize(function() { 
     checkWidth(false); 
    }); 
}); 

Answer 4

Bueno, sé que llego tarde a la fiesta, pero vi algunas cosas como $(document).ready() que no eran realmente necesarias.

Trate de almacenar en caché sus selectores si los llama una y otra vez, a la var $window = $(window); Esto ayudará con el rendimiento. Uso una expresión de función para encapsular a Me quedo fuera del alcance global, pero aún tengo acceso a mis elementos seleccionados de jQuery en caché $window y $html.

(function($) { 
    var $window = $(window), 
     $html = $('html'); 

    $window.resize(function resize(){ 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    }).trigger('resize'); 
})(jQuery); 

http://jsfiddle.net/userdude/rzdGJ/1

Probablemente un poco más limpio, más fácil de seguir:

(function($) { 
    var $window = $(window), 
     $html = $('html'); 

    function resize() { 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    } 

    $window 
     .resize(resize) 
     .trigger('resize'); 
})(jQuery); 

http://jsfiddle.net/userdude/rzdGJ/2

Answer 5

Este tema me molestaba durante un tiempo, en realidad. Por lo general, tengo varios tamaños para las transiciones. Escribí este un pensamiento que me gustaría compartir:

$(function() { 
    var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low 
    function resize() { 
    var target = 0, 
     w = $(window).width(), 
     h = $('html'); 
    $.each(pageTransitions, function(index, pageTransition) { 
     if(w > pageTransition[1]) { 
      target = index; 
      return false; 
     } 
    }); 
    $.each(pageTransitions, function(index, pageTransition) { 
     h.removeClass(pageTransition[0]); 
    }); 
    h.addClass(pageTransitions[target][0]); 
    } 
    resize(); 
    jQuery(window).on('resize', function() { 
    resize(); 
    }); 
}); 

http://jsfiddle.net/mckinleymedia/ERZ3q/7/

Answer 6

También puede utilizar este método, creo que es muy claro a seguir:

$(window).on('resize', function(){ 
     var win = $(this); 
     if (win.width() < 514) { 

     $('html').addClass('mobile'); 

     } 
    else 
    { 
     $('html').removeClass('mobile'); 
    } 

}); 

Simple Method