CODEWITHSUNDEEP
jqueryresize
Tony Scialo
Tony Scialo

Reputation: 5957

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:

mapTableContainer.resizable({
    handles: 'n',
    resize: function(event, ui){
        console.log(ui.originalElement.clientHeight);
    }
});

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

Upvotes: 0

Views: 1639

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

You can use:

  • this.clientHeight

or

  • 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="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


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

Upvotes: 1

Related Questions