CODEWITHSUNDEEP
jquery
Amy Neville
Amy Neville

Reputation: 10581

Jquery width and height of body

I have the following jquery code to check for the window dimensions. Unfortunately it seems to only pick up the width - the height is returning as zero. Where am I going wrong?

$(document).ready(function() {
    var $window = $('body');
    function checkSize() {
        var windowWidth = $window.width();
        var windowHeight = $window.height();

        if (windowWidth < 765) {
            $('#index_right').hide();
            $('.btn').removeClass("btn-large");
        }
        else if (windowWidth < 880) {
            $('#index_right').hide();

            $('.btn').addClass("btn-large");
        }
        else
        {
            $('#index_right').fadeIn(1000);
            $('.btn').addClass("btn-large");
        }

        if (windowHeight < 3000) {
            //alert(windowHeight);
            $('#index_base').hide();
        }
        else
        {
            $('#index_base').fadeIn(1000);
        }
    }
    checkSize();
    $(window).resize(checkSize);
});

Upvotes: 0

Views: 107

Answers (3)

PhilTrep
PhilTrep

Reputation: 1641

var $window = $('body');

Should be 

var $window = $('window');

Upvotes: 0

Fahrenheit451
Fahrenheit451

Reputation: 26

Try using jquery's built in height method instead:

$(window).height();

Upvotes: 1

Muhan Alim
Muhan Alim

Reputation: 489

It seems that you're trying to show and hide different content depending on the screen-size of visitor, why not use media queries instead?

(More info http://www.w3.org/TR/css3-mediaqueries/)

Upvotes: 1

Related Questions