Using two jQuery event methods to perform the same set of functions

Question

In this example, I'm trying to get my if statement using .css to work both on .ready AND .resize but I don't understand how to combine them.

var windowsize = $(window).width();

$(window).ready(function() {

  windowsize = $(window).width();

  if (windowsize > 440) {

    $('body').css("background-color", "blue");

  }
  else { 

$('body').css("background-color", "red");  

  }

});

Any help?

Nik Terentyev · Accepted Answer · 2014-09-08 21:47:50Z

2

function resizeMe(){
  var windowsize = $(window).width();

  if (windowsize > 440) {
    $('body').css("background-color", "blue");
  } else { 
    $('body').css("background-color", "red");  
  }
}


$(window).ready(resizeMe)
         .resize(resizeMe);

or, thanks to @Palpatim, this way:

$(window).on("ready resize", resizeMe);

and can simplify the function to ( thanks to @bfontaine ):

function resizeMe(){
    $('body').css("background-color", $(window).width() > 440 ? "blue" : "red");
}

edited Sep 8, 2014 at 21:47

answered Sep 7, 2014 at 2:56

Nik Terentyev

2,3203 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Palpatim Over a year ago

Slightly better than "guest271314"'s answer since you're factoring the handler into a standalone function. Now marry that with a single assignment $(window).on("ready resize", resizeMe); and you'll really be cooking with gas. :)

bfontaine Over a year ago

Why not inlining the condition ? $('body').css("background-color", windowsize > 440 ? "blue" : "red");

Nik Terentyev Over a year ago

i didnt dig too deep into the function logic, @bfontaine =) but it may be done this way of course. or even without variable declaration $('body').css("background-color", $(window).width() > 440 ? "blue" : "red");

guest271314 · Accepted Answer · 2014-09-08 14:08:03Z

0

Try

$(window).on("load resize", function() {    
  var windowsize = $(window).width();    
  if (windowsize > 440) {    
    $('body').css("background-color", "blue");    
  }
  else {     
    $('body').css("background-color", "red");      
  };    
}).resize();

jsfiddle http://jsfiddle.net/guest271314/mnk7ovmg/

edited Sep 8, 2014 at 14:08

answered Sep 7, 2014 at 5:37

guest271314

1

Collectives™ on Stack Overflow

Using two jQuery event methods to perform the same set of functions

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related