getting percent CSS position with jQuery

Question

I\'m trying to get an element\'s CSS (top and left) with jQuery:

$(element).css(\'top\');

but instead of \"12%\" like it should be, I get the p

Answer 1

You can do this:

$(element).position().top / $(element).parent().height() * 100

Regarding your precedent comment, if you want to work with css('top'), don't forget to parseInt it.

Answer 2

calculate it by your own:

($(element).css('top') / parentHeight) * 100;

Answer 3

You can try this. You can change the "element" and "parent" to be compatible with your project.

var parent_height = $(element).parent().height(); // Height of parent. If you do something related to "width", get parent's width.

var top_val_px   = $(element).css('top');
var top_val_only = top_val_px.slice(0,-2); // Remove "px" part
var top_Percentage = (top_val_only/parent_height) * 100; // Percentage will be a close value.

I used a similar code and it worked.

Answer 4

There is a (very easy) way to do this!
Even when using stylesheets.
The key is to prevent jquery from calculating the value by temporarily hiding the parent.

$(element).parent().hide();
var top = $(element).css("top");
$(element).parent().show();
console.log(top);

voila!

If you want just the number without the "%" use

top = parseFloat(top);

BTW: Don't worry, the hiding and reshowing is so quick, it won't be visible for your users.

Answer 5

I just encountered this myself and thought it weird, too.

Instead of:

 $(element).css('top');

I just did:

 element.style.top

No jQuery and gives you the actual value in the type you made it (percent, ems, etc.)

Answer 6

This is also an option:

$(element)[0].style.top