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:<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>
$(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! :)
website