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

    $(".projects").slice(3, 6).css("margin", "10px");

};

How can I make this work when window size is changed, not only when loading the page?

user13500
  • 3,817
  • 2
  • 26
  • 33
user3327101
  • 171
  • 1
  • 3
  • 8

1 Answers1

1

Use .resize function to catch the event:

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

$(window).resize(function() {
   var w = $(window).width();
   if (w >= 320 && w <= 480) {
      $(".projects").slice(1, 8).css("margin", "10px");
   } else {
      $(".projects").slice(3, 6).css("margin", "10px");
   };
});
aksu
  • 5,221
  • 5
  • 24
  • 39
  • You need to set `w` inside the function. – Barmar Feb 22 '14 at 13:27
  • With this copy paste not display slice 3,6 why? that the default? – user3327101 Feb 22 '14 at 13:29
  • Probably your window size is more than 320 wide and lower 480 height. – aksu Feb 22 '14 at 13:31
  • 1009px this not display $(".projects").slice(3, 6).css("margin", "10px"); – user3327101 Feb 22 '14 at 13:32
  • I believe the above code will run only when the window is resized. If you want it to also run when the page first loads you could add `$(window).trigger('resize')` afterwards, or declare the function as a variable and just call it directly after binding it to `$(window).resize()` – Matt Browne Feb 22 '14 at 13:33
  • Yes, that's true Matt. @user3327101 Try with my updated code. – aksu Feb 22 '14 at 13:34
  • :( not working not understand because windows resize function there...? – user3327101 Feb 22 '14 at 13:36
  • I don't know what is the problem with this code but maybe these fiddles can help you, http://jsfiddle.net/5gsLS/3/ (code) and http://jsfiddle.net/5gsLS/3/embedded/result/ (result) – aksu Feb 22 '14 at 14:00