Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the jQuery outerHeight() equivalent in YUI

In jQuery, I can very easily get the current computed height for an element that includes padding, border, and optionally margin by using outerHeight()...

// returns height of element + border + padding + margin
$('.my-element').outerHeight(true);

How would I do this in YUI? I'm currently using version 2.8.1.

Similar to this question, I can always do getComputedStyle() for height, border, padding, and margin, but that is a lot of manual labor which includes parsing the return values and grabbing the correct values that are needed and doing the math myself.

Isn't there some equivalent function to jQuery's outerHeight() in YUI that does all of this for me?

Solution

I ended up writing my own solution since I couldn't find a jQuery outerheight() equivalent. I've posted the solution as an answer here.

like image 353
Hristo Avatar asked Oct 01 '12 20:10

Hristo


People also ask

What is jQuery outerHeight?

jQuery outerHeight() Method The outerHeight() method returns the outer height of the FIRST matched element. As the image below illustrates, this method includes padding and border. Tip: To include the margin, use outerHeight(true). Related methods: width() - Sets or returns the width of an element.


1 Answers

There is no built-in way of getting the outer width of an element with its margin in YUI. Like @jshirley mentions, there is offsetWidth, but it doesn't take margins into account. You can however create a function that adds the margin very easily:

Y.Node.ATTRS.outerHeight = {
  getter: function () {
    return this.get('offsetHeight') + 
           parseFloat(this.getComputedStyle('marginTop')) + 
           parseFloat(this.getComputedStyle('marginBottom'));
  }
};

Y.Node.ATTRS.outerWidth = {
  getter: function () {
    return this.get('offsetWidth') +
           parseFloat(this.getComputedStyle('marginLeft')) +
           parseFloat(this.getComputedStyle('marginRight'));
  }
};

Then you can get the outer width by doing Y.one(selector).get('outerWidth'). Here's an example based on @jshirley's code: http://jsbin.com/aretab/4/.

Just keep in mind that dimensions are usually a source of bugs in browsers and this doesn't take into account some stuff (ie: dimensions of the document) jQuery tries to catch (see https://github.com/jquery/jquery/blob/master/src/dimensions.js).

like image 111
juandopazo Avatar answered Nov 07 '22 21:11

juandopazo