Apply the following formatting unless the viewport is smaller than the container div - Jquery

Question

I am trying to create the following in Jquery, what I am trying to do is apply formatting to a div ONLY if the viewport is BIGGER than the .container div. I have written the following but I am not sure if I have done it correctly as my Jquery isn't that great.

    $(document).ready(function(){
    $(window).width();   // returns width of browser viewport
    $(document).width(); // returns width of HTML document

    $(window).height();   // returns heightof browser viewport
    $(document).height(); // returns height of HTML document

    var width = $(window).width(); // the window width
    var height = $(window).height();  // the window height
    var containerwidth = $('.container').outerWidth(); // the container div width
    var containerheight = $('.container').outerHeight(); // the container div height

    if ((width >= containerwidth) && (height>=containerheight)){ //if the width and height of the window is bigger than the container run this function
    $(document).ready(function(){                  
     $(window).resize(function(){
      $('.container').css({
       position:'absolute',
       left: ($(window).width() 
         - $('.container').outerWidth())/2,
       top: ($(window).height() 
         - $('.container').outerHeight())/2
      });   
     });
     // To initially run the function:
     $(window).resize();
    });
    }
    });


    EDIT >>

....................................................

I have created a js fiddle here, which appears to be working now.

http://jsfiddle.net/QgyPN/

Answer 1

The way you test for the window dimensions and the container dimensions is fine.

There is however a problem with the say you treat your events. You have the

$(document).ready(function() {
    //...
});

twice which doesn't make sense (you fixed that in your fiddle by the way, which is probably why it works).

From what I understand, you are trying to : 1. When the page loads, apply certain css if the window is big enough. 2. On subsequent page resizes, do the same thing

So I suggest that you isolate your code that applies the CSS. That way you will be able to use it multiple times :

var positionContent = function () {
     var width = $(window).width(); // the window width
     var height = $(window).height();  // the window height
     var containerwidth = $('.container').outerWidth(); // the container div width
     var containerheight = $('.container').outerHeight(); // the container div height

     if ((width >= containerwidth) && (height>=containerheight)){
         $('.container').css({position:'absolute',
                             left: ($(window).width() - $('.container').outerWidth())/2,
                             top: ($(window).height() - $('.container').outerHeight())/2 });   
    } 
};

Then Use that function when you need to :

//Call it when the window first loads
$(document).ready(positionContent);

//Call it whenever the window resizes.
$(window).bind('resize', positionContent);