Tony Scialo Tony Scialo -3 years ago 255
jQuery Question

Get clientHeight jQuery resizable

I am attempting to get the clientHeight of originalElement that is a property of the ui paramater that is passed in to the resize event (see documentation on the resize event).

My code is as follows:

handles: 'n',
resize: function(event, ui){

The problem is I keep getting "undefined" for the clientHeight. I can see the clientHeight if I just log ui.originalElement, so I'm sure I'm just accessing it wrong, just not sure the correct way to access it.

(Picture of console loggin ui.originalElement; see clientHeight)

enter image description here

Answer Source

You can use:

  • this.clientHeight


  • ui.element[0].clientHeight

element: The jQuery object representing the element to be resized

originalElement: The jQuery object representing the original element before it is wrapped

The snippet:

$( "#resizable" ).resizable({
  handles: 'n',
  resize: function(event, ui){
      console.log('Original Height: ' + ui.originalSize.height + 
      ' Current height: ' + ui.size.height + 
            '  this clientheight: ' + this.clientHeight);
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
<link href="" rel="stylesheet"/>
<script src=""></script>
<script src=""></script>

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download