CODEWITHSUNDEEP
jquerycss
Paolo Rossi
Paolo Rossi

Reputation: 2510

jquery get height of div dynamically

My website is divided in 2 columns.

<div id="wrapper">
    <div id="main">
        <div id="center">
           <div class="content">
           <?php
           $page = isset($_GET['page']) ? $_GET['page'] : '';

           switch ($page)
           {
              case "home":
                include("home.php");
              break;

              case "foo":
                include ("foo.php");
              break;

              case "bar":
                include ("bar.php");
              break;
           }
           ?>
           </div>
        </div>
        <div id="sidebar">
            <div class="content">
                 <?php include("block.php");?>
                 <?php include("block2.php");?>
                 <?php include("block3.php");?>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
width: 1000px;
margin: 0 auto;
}

#main {
display: table;
}

#center {
width: 720px;
display: table-cell;
background: #fff;
vertical-align: top;
}

#sidebar {
width: 280px;
display: table-cell;
background: #f1f1f1;
vertical-align: top;
}

I would take the size of the div #sidebar or #center whenever I change pages index.php?page=foo or index.php?page=bar, etc.. but the result is always the same

JS

$(function() {

var sidebar = $('#sidebar').css("height");
var center = $('#center').css("height");
console.log("center = " + center + " sidebar = " + sidebar);

/* not work 
$( window ).on("resize", function() {
   sidebar = $('#sidebar').css("height");
   center = $('#center').css("height");
   console.log("center = " + center + " sidebar = " + sidebar);
});*/

});

console.log --> center = 1414px sidebar = 0px

EDIT - If I try with .height()

var sidebar = $('#sidebar').height();
var center = $('#center').height();
console.log("center = " + center + " sidebar = " + sidebar);

console.log --> center = 1414 sidebar = -10

How could I properly get the height of my div? Thank you Grazie

Upvotes: 3

Views: 10018

Answers (3)

Abhinav
Abhinav

Reputation: 8168

Jquery provides you with a function height(). You can use

$('elem').height();

to find the height of an element

Visit here for more info jquery height function

jQuery also provides functions like outerHeight() and innerHeight(), you can use them according to your requirement.

Upvotes: 4

Lieutenant Dan
Lieutenant Dan

Reputation: 8264

height() - returns the height of element excludes padding, border and margin.

.innerHeight() - returns the height of element includes padding but excludes border and margin.

.outerHeight() - returns the height of the div including border but excludes margin.

.outerHeight(true) - returns the height of the div including margin.

Upvotes: 1

DevNebulae
DevNebulae

Reputation: 4906

If you want to constantly get the height of a div when the window resizes, I would recommend using the resize event in jQuery.

$(window).resize(function () {
    console.log($('#sidebar').height()); 
});

Also, the height function of an element gives you the height, which replaces the css property in your case.

$('#foo').height()

Upvotes: 0

Related Questions