Dynamically tracking the dimensions of an element

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(function(){
                report();
            });
            function report() {
                $('#display').html(
                $('#testSubject').width()+'x'+$('#testSubject').height()
            );
            }
        });
    </script>
<style>

  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
<div id="testSubject">

</div>
<div id="display"></div>
    </body>
</html>

Related examples in the same category

1.	Cancel only the default action by using the preventDefault method
2.	Get click event coordinates
3.	Get event target
4.	Cancel a default action and prevent it from bubbling up
5.	Get tag name from event target
6.	Prevent default event
7.	Removes a bound live event
8.	Event instance properties
9.	Define custom event
10.	Stop only an event from bubbling by using the stopPropagation method.
11.	Pass some extra data before the event handler:
12.	To cancel only the default action by using the preventDefault method.
13.	Establishing event handlers with the DOM Level 2 Model
14.	Tracking event propagation with bubble and capture handlers

Dynamically tracking the dimensions of an element : Event « jQuery « JavaScript DHTML

Related examples in the same category