jQuery in Action
66
CHAPTER 3
Bringing pages to life with jQuery
<html>
<head>
<title>width() and height() Test</title>
<link rel="stylesheet" type="text/css" href="../common.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
report();
});
function report() {
$('#display').html(
$('#testSubject').width()+'x'+$('#testSubject').height()
);
}
</script>
<style>
#testSubject {
background-color: plum;
border: 1px solid darkmagenta;
padding: 8px;
font-size: .85em;
}
</style>
</head>
<body onresize="report();">
<div id="testSubject">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam eget enim id neque aliquet porttitor. Suspendisse
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
Integer at metus. Suspendisse potenti. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Proin quis eros at metus pretium elementum.
</div>
<div id="display"></div>
</body>
</html>
You may have picked up on the fact the we embedded behavior in the
HTML
markup of this example in violation of the rules of Unobtrusive JavaScript. That's
OK
for now, but in the next chapter we'll learn a better way to bind event handlers.
Listing 3.1 Dynamically tracking the dimensions of an element
Invokes reporting
function at page ready
function at page ready
Displays width and
height of test subject
height of test subject
Applies styling
to test subject
to test subject
Reports
dimensions
on window
resize
dimensions
on window
resize
Declares test subject
with dummy text
with dummy text
Displays dimensions
in this area
in this area