I have this piece of of code which is really working fine:

jQuery

$(document).ready(function(){

   $(".fadeinbg").click(function(){
      $("#content").fadeIn();
   });

   var height = $(window).height();
   var width = $(window).width();
   $('#content').css({"min-height": height + "px"});

   $('#content').css({"width": (width - 200) + "px"});
});

What I'm trying to achieve now is to update the jQuery after a browser window resize by adding this line at the bottom of my code: $(window).resize()

jQuery

$(document).ready(function(){

   $(".fadeinbg").click(function(){
      $("#content").fadeIn();
   });

   var height = $(window).height();
   var width = $(window).width();
   $('#content').css({"min-height": height + "px"});

   $('#content').css({"width": (width - 200) + "px"});

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

... but somehow this doesn't work at all. Any ideas what I'm doing wrong?

I have this piece of of code which is really working fine:

jQuery

$(document).ready(function(){

   $(".fadeinbg").click(function(){
      $("#content").fadeIn();
   });

   var height = $(window).height();
   var width = $(window).width();
   $('#content').css({"min-height": height + "px"});

   $('#content').css({"width": (width - 200) + "px"});
});

What I'm trying to achieve now is to update the jQuery after a browser window resize by adding this line at the bottom of my code: $(window).resize()

jQuery

$(document).ready(function(){

   $(".fadeinbg").click(function(){
      $("#content").fadeIn();
   });

   var height = $(window).height();
   var width = $(window).width();
   $('#content').css({"min-height": height + "px"});

   $('#content').css({"width": (width - 200) + "px"});

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

... but somehow this doesn't work at all. Any ideas what I'm doing wrong?

• javascript
• jquery

Share Improve this question Follow edited Nov 19, 2013 at 14:47 fassetar 62011 gold badge1010 silver badges3838 bronze badges asked Nov 19, 2013 at 14:36 TbysTbys 12711 gold badge44 silver badges1111 bronze badges 5

• 2 How does this not work? Does the rest of your working code stop working? Does the code inside the .resize() callback function not fire? You haven't posted any code inside said callback function, so... nothing would happen on resize the way you're showing it to us. – ajp15243 Commented Nov 19, 2013 at 14:40
• Put the code in a function, call the function. – epascarello Commented Nov 19, 2013 at 14:44
• Yes, the rest of the code is still working, but the window width and height doesn't update after resizing the browser. – Tbys Commented Nov 19, 2013 at 14:45
• @epascarello: Ok, thanks. And how do I do it? I'm really new to all this...Would be really great, if anyone could provide some working code. – Tbys Commented Nov 19, 2013 at 14:46
• can you able to post, what has to happen after resizing the window, that will be helpful to answer – Suganthan Madhavan Pillai Commented Nov 19, 2013 at 14:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You are overthinking it.

$(document).ready(function(){

   $(".fadeinbg").click(function(){
       $("#content").fadeIn();
   });

   var setSize = function () {  //define a function with the code you want to call    
       var height = $(window).height();
       var width = $(window).width();
       $('#content').css(
           { 
               "min-height": height + "px", 
               "width": (width - 200) + "px" 
           }
       );
   };

   $(window).resize(setSize);  //set the function to resize
   setSize();  //call the function now
});

Your function is very much working try resize you window and check the console. It is working fine. Test rest of your project

$(document).ready(function(){
    $(window).resize(function() {
        console.log("width------:"+$( window ).width() +" height------:"+$(window).height())
    });
});