CODEWITHSUNDEEP
jquerycss
Shadow Wizzard
Shadow Wizzard

Reputation: 66388

jQuery .css("left") returns "auto" instead of actual value in Chrome

I have div element with left and top defined, without absolute position, and I want to read the left and top values using jQuery.

Using $("#MyId").css("left") gave the expected result in IE browser (IE8) but in Chrome it returned "auto" instead, although the values are explicitly written in the element style.

Here is the test case: http://jsfiddle.net/qCDkb/2/

Note the difference between IE and Chrome.

Also, this is working well in jQuery 1.4.2 and "failing" in jQuery 1.4.3 and above.

Any insights are welcome. :-)

Upvotes: 15

Views: 26786

Answers (5)

Steven Benjamin
Steven Benjamin

Reputation: 199

Try $("your selector").position().top;

Upvotes: 15

g3logic
g3logic

Reputation: 11

I know this is an old post, but I ran into this same problem and thought I would suggest a couple of solutions. It seems that this problem is not specific to Chrome, as I was able to reproduce in Firefox as well.

I was able to solve this one of two ways. Either place you CSS styles in the same file as your HTML, instead of using a separate CSS file. OR, call the function inside of window.onload. Looks like the values are not available to the browser until everything has loaded, IF the styles are in an external style sheet.

Hope this is helpful.

Upvotes: 0

montrealmike
montrealmike

Reputation: 11641

add 

position: absolute;

or

position: relative;

to the element you use left on

Upvotes: 0

vtambourine
vtambourine

Reputation: 2149

It is strange behavior for jQuery. But you can use native javascript methods to get css values:

$("#Panel1")[0].style.left

This expression will return corresponding css property.

Upvotes: 13

Pekka
Pekka

Reputation: 449613

As discussed in the comments, setting left to auto for a position: static sounds somehow right, seeing as left has no meaning in the context.

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

As to why jQuery 1.4.2 and 1.4.3 do this differently, I do not know for sure, but there's this in 1.4.3's release notes:

Nearly the entire CSS module has been rewritten focusing entirely on extensibility. You can now write custom CSS plugins that extend the functionality provided by .css() and .animate().

Upvotes: 10

Related Questions