CODEWITHSUNDEEP
javascriptjquery
VK Gonzaga
VK Gonzaga

Reputation: 33

How to re-execute jQuery when screen sizes change

Im trying to do some minor edits when a particular screen size has been met. This works but only when the browser first loads. My code so far:

   if(vwo_$(window).width() >= 979){
    vwo_$('.move_cart_here').removeClass('span4');
    vwo_$('#sns_topheader .span12.topheader-left').removeClass('span8');
  };
  if(vwo_$(window).width() <= 978){
    vwo_$("#sns_header .container .row-fluid .header-right").append(vwo_$("#header_icons"));
  };

If anyone knows how this would "reload" every time the screen size changes in a controlled matter it would greatly help.

Upvotes: 1

Views: 224

Answers (3)

tetri
tetri

Reputation: 3584

Just bind resize event on window:

$(window).on('resize', function(){ ... });

EDIT: Assuming that the jQuery var is vwo_$, you might use:

vwo_$(window).on('resize', function() { (your logic here...) });

Upvotes: 2

tantalum
tantalum

Reputation: 2452

You can use the .resize() event handler to catch and event when ever the window is resized http://api.jquery.com/resize/ for exmaple:

$(window).resize(function (){
  if(vwo_$(window).width() >= 979){
    vwo_$('.move_cart_here').removeClass('span4');
    vwo_$('#sns_topheader .span12.topheader-left').removeClass('span8');
  };
  if(vwo_$(window).width() <= 978){
   vwo_$("#sns_header .container .row-fluid .header-right").append(vwo_$("#header_icons"));
  };
});

Upvotes: 1

Apul Gupta
Apul Gupta

Reputation: 3034

$(function(){
$(window).on('resize', function(){

if(vwo_$(window).width() >= 979){
    vwo_$('.move_cart_here').removeClass('span4');
    vwo_$('#sns_topheader .span12.topheader-left').removeClass('span8');
  };
  if(vwo_$(window).width() <= 978){
    vwo_$("#sns_header .container .row-fluid .header-right").append(vwo_$("#header_icons"));
  };

});
$(window).resize(); // for first time
});

Upvotes: 0

Related Questions