CODEWITHSUNDEEP
jqueryfirefoxpositionoffset
Walrus
Walrus

Reputation: 20484

JQuery find element by position - Firefox .position() .offest() error

I have a scrolling DIV that via JQuery determines the element in the middle. I have tried using both the position() and offset() parameters and in both cases Firefox does not get the right answer whilst Chrome and Safari do.

The position().top or offset().top determine the position of the middle element from the container. Yet firefox is determining it from the scrolling container and thus giving the third element down always rather than the middle element during scroll.

Here are 2 fiddles, one using .position() and the other .offset().

OFFSET() -- http://jsfiddle.net/pxfunc/XHPYF/7/
POSITION () -- http://jsfiddle.net/U4qyp/133/

Anyone have any idea why this is happening or how to fix it?

EDIT --

Part of the problem is the plugin iScroll but this is required to make the element work, so I wonder is there a way to determine which element is 100px; below the top of the container.

Upvotes: 1

Views: 911

Answers (1)

cburyta
cburyta

Reputation: 56

It looks like iScroll uses CSS transformations instead of traditional top/left positions. That's fine and probably more optimal, but it seems for some reason the CSS transition properties don't get reflected in the Firefox DOM. (At least not in the Firebug list of properties.) I couldn't find a good article to point to if it's a bug or intentional.

You can use the iScrollers properties to get the current offset though, which is what drives the CSS transform settings.

I forked your example on jsFiddle, check it out. http://jsfiddle.net/cburyta/GvPPM/9/

It seems iScroll is not working in IE for me (at least the example I linked to doesn't actually scroll, though it DOES seem to find the middle element like it was scrolling... odd.)

Upvotes: 1

Related Questions