CODEWITHSUNDEEP
jquerycss
ran levi
ran levi

Reputation: 205

getting percent CSS position with jQuery

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 pixels.
How do I get the percent?

HTML:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<style type="text/css">
.parWrapper {
    position:absolute;
    top: 40%
}
</style>
</head>
<body>
<div> 
    <div id="crap" class="parWrapper" style="left:50%">
    Wrap1   
    </div>

    <div class="parWrapper">
    Wrap2
    </div>

    <div class="parWrapper">
    Wrap3   
    </div>

    <div class="parWrapper">
    Wrap4   
    </div>

    <div class="parWrapper">
    Wrap5   
    </div>

</div>

</body>

Upvotes: 13

Views: 28857

Answers (7)

AnushkaM
AnushkaM

Reputation: 63

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.

Upvotes: 0

Joel Box
Joel Box

Reputation: 439

This is also an option:

$(element)[0].style.top

Upvotes: 10

Jan Paepke
Jan Paepke

Reputation: 2027

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.

Upvotes: 1

Mauvis Ledford
Mauvis Ledford

Reputation: 42354

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.)

Upvotes: 17

cchamberlain
cchamberlain

Reputation: 17956

I had a need to calculate something similiar but in my case it was the left %, you can update the code below to use the window height if you are going for a vertical percentage value -

getLeftPercent = function() {
    var leftStr = $('#my-obj').css('left'),
        pxPos = leftStr.indexOf('px'),
        leftVal = leftStr.substr(0, pxPos),
        leftPercent = (leftVal / $(window).width() * 100).toString(),
        dotPos = leftPercent.indexOf('.'),
        leftPercentStr = dotPos == -1 ? leftPercent + '%' : leftPercent.substr(0, dotPos) + '%';
    return leftPercentStr;
};

Upvotes: 1

Thomas Menga
Thomas Menga

Reputation: 1858

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.

Upvotes: 15

Maxim Manco
Maxim Manco

Reputation: 1954

calculate it by your own:

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

Upvotes: 1

Related Questions