CODEWITHSUNDEEP
jqueryhtmlbrowserappendbrowser-width
egr103
egr103

Reputation: 4008

Get width and height of screen window and height of div jquery

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>

Upvotes: 0

Views: 5667

Answers (3)

Mouloud
Mouloud

Reputation: 3795

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

Upvotes: 0

Marc
Marc

Reputation: 571

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
}

Upvotes: 2

Jay
Jay

Reputation: 3305

Use these functions:

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

etc

Upvotes: 0

Related Questions