Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

getting percent CSS position with jQuery

Tags:

jquery

css

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>
like image 774
ran levi Avatar asked Mar 08 '11 09:03

ran levi


People also ask

How to get the position of an element jQuery?

The . position() method allows us to retrieve the current position of an element (specifically its margin box) relative to the offset parent (specifically its padding box, which excludes margins and borders). Contrast this with . offset() , which retrieves the current position relative to the document.

What does position() method do in jQuery?

jQuery position() Method The position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.

How to get top offset in jQuery?

jQuery offset() Method The offset() method set or returns the offset coordinates for the selected elements, relative to the document. When used to return the offset: This method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.

What is the difference between position and offset in jQuery?

Difference between offset() and position() Method: The jQuery UI offset() is relative to the document. The jQuery UI position() is relative to the parent element. When you want to position a new element on top of another one which is already existing, its better to use the jQuery offset() method.


6 Answers

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

like image 103
Mauvis Ledford Avatar answered Oct 12 '22 22:10

Mauvis Ledford


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.

like image 39
Thomas Menga Avatar answered Oct 12 '22 22:10

Thomas Menga


This is also an option:

$(element)[0].style.top
like image 44
Joel Box Avatar answered Oct 12 '22 22:10

Joel Box


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.

like image 35
Jan Paepke Avatar answered Oct 12 '22 22:10

Jan Paepke


calculate it by your own:

($(element).css('top') / parentHeight) * 100;
like image 36
Maxim Manco Avatar answered Oct 13 '22 00:10

Maxim Manco


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;
};
like image 36
cchamberlain Avatar answered Oct 12 '22 23:10

cchamberlain