Get width and height of screen window and height o

Question

In plain English this is the jQuery functionality i'm after:

I need to get the width and the height of the browser window and then get the height of .banner div (height is automatic). If the height of .banner div is higher than that of the height of the browser window append .title div and .social div to the body otherwise display .title div and .social div within .banner div.

How do I then style the two divs accordingly (.title and .social)?

EDIT: This is my on page load code in HTML:

<div class="banner">
   <div class="title">
      <!--to be positioned 40px from the left-->
   </div>
   <div class="social">
      <!--to be positioned 40px from the right-->
   </div>

   <img src="URL"/> <!-- Image determines height of DIV uses max-width -->

</div>

Answer 1

Use these functions:

$(window).height();
$(window).width();
$('.banner').width();
$('.banner').height();
$("#tostyle").addClass('someclass');

etc

Answer 2

update dynamicly the elements :

$(function(){
    var divheight = $('.banner').height(); // div current height

    // handle the resize event
    $(window).resize(function(){
        if($(this).height() < divheight) {
            $('.title').appendTo($('body'));
            $('.social').appendTo($('body'));
            $('.banner').hide();
        } else {
            $('.title').appendTo($('.banner'));
            $('.social').appendTo($('.banner'));
            $('.banner').show();
        }
    });
});

the code is deliberately not simplify for better readability

Answer 3

You can do something like below:

var windowHeight = $(window).height(); //Gives you the browser viewport height
var bannerHeight = $(".banner").height();

if (bannerHeight > windowHeight) {
    $("body").append($('.title'));
    $("body").append($('.social'));

    //Then you can style them using jQuery .css
    //Example
    $('.title').css('color', 'red');
}
else {
    //Display .title and .social in your .banner div
}

• jQuery .height info: http://api.jquery.com/height/
• jQuery .css info: http://api.jquery.com/css/