CODEWITHSUNDEEP
javascriptjqueryhtml
Mehraban
Mehraban

Reputation: 3324

get element dimensions regardless of rotation

Suppose we have a 50x100 div, if we rotate it 45 degrees, jquery returns different values for width and height. If we rotate it again for 45 degrees, jquery returns 100 for width and 50 for height.

I'm looking for a way to get actual width and height regardless of rotation.

Note: actually the parent of my element has rotation, and I don't want to get involved with it's rotation. I'm not willing to use sin/cos with jquery width height to get original dimensions.

Upvotes: 1

Views: 860

Answers (2)

yckart
yckart

Reputation: 33398

Since jQuery is an old library, it used some different combinations (of getBoundingClientRect, getComputedStyle, clientWidth/clientHeight and offsetWidth/offsetHeight (and also node.style)) over the times.

So, without knowing your used version of jQuery, it's hard to say what it does internally.

At least getBoundingClientRect gives you the actual dimensions of transformed elements.

Here's a small test case: https://jsfiddle.net/bxe1ve9q

I would bet that using clientWidth/clientHeight or offsetWidth/offsetHeight give you the correct values.

Addendum: As you, probably, no longer use jQuery (which is very good at working around browser bugs), you should keep an eye on those hiccupillities™. Here are some resources to look at:

Upvotes: 2

Tommie
Tommie

Reputation: 783

A solution to your problem is to use the native offsetHeight and offsetWidth. This since jQuerys width() and height() functions is finicky at best.

JSFiddle
https://jsfiddle.net/4vxnmr4y/2/

The fiddle checks the box both on transitionEnd and each second. Tested in Chrome, FF, IE11, IE Edge. Try it out!

The gist of it is basically this:

var box = $('#box');
var w = box[0].offsetWidth;
var h = box[0].offsetHeight;

But in the fiddle i added a lot of code to make it a slighly more realistic real-world sample.

Upvotes: 1

Related Questions