Tuesday, June 29, 2010

jQuery: Description: Get the current computed height for the first element in the set of matched elements.

Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
<!DOCTYPE html>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>

<div> </div>
Sample paragraph to test height
function showHeight(ele, h) {
$("div").text("The height for the " + ele + 
" is " + h + "px.");
$("#getp").click(function () { 
showHeight("paragraph", $("p").height()); 
$("#getd").click(function () { 
showHeight("document", $(document).height()); 
$("#getw").click(function () { 
showHeight("window", $(window).height()); 

Source: http://api.jquery.com/height/

No comments:

Post a Comment