Jquery slide for default

if ($(window).width() >= 320 && $(window).width() <= 480) {
         $(".projects").slice(0, 8).css("margin", "10px");
     } else if ($(window).width() > 480){
         $(".projects").slice(3, 6).css("margin", "10px");
     };

How can I reset from a slice of 0.8 to the default when windows are larger than 480? Because when you resize, the rules for 0.8 slice are still active? I want the default if more than 480, how can this be done?

+3
source share
2 answers

Try using classes. It is much more flexible than .css. You need to delete the previous class / styles before you cut and assign a new one:

if ($(window).width() >= 320 && $(window).width() <= 480) {
    $projects.removeClass('md').slice(0, 8).addClass('sm');
} else if ($(window).width() > 480) {
    $projects.removeClass('sm').slice(3, 6).addClass('md');
};

Demo: http://jsfiddle.net/96Rxg/

Also consider caching $('.projects'); you do not want to select it with each of the lights of the resize event.

+2
source
var $projects = $(".projects");    
if ($(window).width() >= 320 && $(window).width() <= 480) {
     $projects.slice(0, 8).css("margin", "10px");
 } else if ($(window).width() > 480){
     $projects.slice(3, 6).css("margin", "10px");
 };
0
source

All Articles