jQuery calculate padding-top as integer in px

Question

The only solution i have found is ($(this).innerHeight() - $(this).height()) / 2

But / 2 is not right option, because user can have padding-top:0px and padding-bottom:20px.

Is there a way to make more accurate padding values?

I was thinking about css('padding-top') and then parse it, by taking only int part, but value can be in "em" for example and not in "px"

Then make switch statement for each value type? For em one, for px another?

It's all a bit complicated and takes more space in code...

score 11 · Accepted Answer · answered Jul 19 '10 at 07:14

11

One of the main strengths of jQuery is that it is so pluggable, so if you have a need that is not immediately satisfied by the library, there's a vast landscape of plugins to search. And if there is none that does what you want, it's really easy to roll your own.
I think the right way to go here, if you can't find a plugin that does what you want, is the last one: to write your own.

However, make sure that you are clear with yourself on the specs of your plugin. What should it return if the element has no css setting for padding? Should it return the styling on this element, or the computed style? What happens for invalid css (say 'padding-top: 10 unitsThatDontExist;' or 'padding-left: two;')?

To get you started - this is what using your own plugin could look like in your code:

var topPadding = $('#anElement').padding('top');

To make that available, just write a plugin like this:

$.fn.padding(direction) {
    // calculate the values you need, using a switch statement
    // or some other clever solution you figure out

    // this now contains a wrapped set with the element you apply the 
    // function on, and direction should be one of the four strings 'top', 
    // 'right', 'left' or 'bottom'

    // That means you could probably do something like (pseudo code):
    var intPart = this.css('padding-' + direction).getIntegerPart();
    var unit = this.css('padding-' + direction).getUnit();

    switch (unit)
    {
        case 'px':
            return intPart;
        case 'em':
            return ConvertEmToPx(intPart)
        default:
            // Do whatever you feel good about as default action
            // Just make sure you return a value on each code path
    }
};

answered Jul 19 '10 at 07:14

Tomas Aschan

58,548
56
243
402

2

ParseInt(this.css("padding-"+direction)) will convert it to integer. – Psytronic Jul 19 '10 at 07:19
No it does not. And "this" should be wrapped btw. – Somebody Jul 19 '10 at 07:35
@Psytronic, OK - nice to know! =) However, I deliberately did not write all the code in this plugin, so as to make the OP have to actually laborate some with it and not just copy-paste. It's a much better way to learn ;) – Tomas Aschan Jul 19 '10 at 07:36
Tomas thanks I was thinking the same way, I'll write additional function in my plugin to calculate the proper padding. I need to know exact top padding because I'm about to put buttons at the top with absolute positioning, I need to know should i add additional padding or not. – Somebody Jul 19 '10 at 07:37
3

@Beck, `this` doesn't need to be wrapped, since the function context in the plugin method is the wrapped set with matched elements. – Tomas Aschan Jul 19 '10 at 07:37
Strange, but it says that .css method doesn't exists then. Whatever :) Anyway thanks for putting on the right path. ;) – Somebody Jul 19 '10 at 07:38
@Beck, Does for me, always has. And not when you're creating a plugin it doesn't. @Tomas, Of course :) – Psytronic Jul 19 '10 at 07:40
2

parseInt() will convert to integer, ParseInt() is an incorrect invocation – dinie Mar 25 '13 at 06:16

score 4 · Answer 2 · answered Nov 14 '12 at 21:00

As far as I know, getComputedSyle and cross browser equivalents are used in jQuery when requesting .css("padding-top") so they should have already been converted to pixels.

Another way to calculate the padding is as follows

$.fn.padding = function () {
    // clone the interesting element
    // append it to body so that CSS can take effect
    var clonedElement = this.
        clone().
        appendTo(document.body);

    // get its height
    var innerHeight = clonedElement.
        innerHeight();

    // set its padding top to 0
    clonedElement.css("padding-top","0");

    // get its new height
    var innerHeightWithoutTopPadding = clonedElement.
        innerHeight();

    // remove the clone from the body
    clonedElement.remove();

    // return the difference between the height with its padding and without its padding
    return innerHeight - innerHeightWithoutTopPadding;

};

// Test it

console.log($("div").padding()); // prints 19 in Chrome 23
console.log($("div").css("padding-top")); // prints 19.733333587646484px

Located at: http://jsfiddle.net/oatkiller/9t9RJ/1/

jQuery calculate padding-top as integer in px

2 Answers2

Linked