codeofaninja
website

jQuery: Get Dynamic Div Height

Photo of Mike Dalisay
Modified Tuesday, January 17, 2012
by - @ninjazhai
jQuery quick tip: I'm going to show you how to get the height of a dynamic div. I was in a situation when  I have to animate a div by maintaining/grabbing/pausing its current height first but it's height is not specified in the CSS and is dynamic, anyway, this tutorial will focus on how to get the dynamic div's height.

Here's a live demo and script:


<html>
    <head>
        <title>jquery get dynamic div height</title>
        <!-- just some styles -->
        <style type='text/css'>
        #div_1{
           width:150px;
            border:thin solid red;
            float:left;
        }

        .btn{
            padding:10px;
        }
        </style>
    </head>
<body>

<!-- the div with some contents in which we will get the height -->
<div id='div_1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
dapibus, mauris ac feugiat bibendum.
</div>

<!-- onClick of this button, some text will be added and display the div_1 height -->
<input type='button' class='btn' id='add_text' value='Add Text and Get New Height' />

<!-- This will display the current height -->
<div id='result'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function() {
    //load the current height
    get_div_height();

    $("#add_text").click(function(){
        //append the some text to change current height
        $("#div_1").append("The Code of a Ninja.");
       
        //load the new height
        get_div_height();
    });

    //function to get current div_1 height
    function get_div_height(){
        var div_height = $("#div_1").height();
        $("#result").html("div height is: " + div_height + " px");
    }
   
});
</script>

</body>
</html>
You can also get your browser's current window height by doing:

           $(window).height() 

 and your document's height (height of html document) by:

            $(document).height() 

 more info on this link. :)
For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
 
 
Fundamentals
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.