Question

I am trying to get the offsetTop in IE but this simply doesn’t work like I want to it.

                var miniMap = $('#miniMap'),
                    parnts = miniMap.parents(),
                    l = parnts.length,
                    i, setVpos,
                    setHPos = $('#showMap').position().left;

                for (i = 0; i < l; i += 1) {
                    if (parnts[i].className === 'smallBox') {
                        if (isIE) {
                            setVpos = parnts[i].offsetTop; // returns the wrong value
                        }
                        else {
                            setVpos = parnts[i].offsetTop; // works as it should
                        }
                    }
                }

As you can see I am using jQuery. I could of course use the jQuery offset/position().top && .each:

       parnts.each(function() {
            if ($(this).hasClass('smallBox')) {
                setVpos = $(this).position().top;
            } ....

.. BUT, I’ve heard “.each” is much slower than using a for loop. Also I am really curious and would love to know what you guys used before jQuery 🙂

My problem is when doing it with a for loop I can’t use the jQuery obj => position().left won’t work.

I’ve Googled and found the following:

document.getElementById("elementID").offsetLeft // all other
document.all.elementID.offsetLeft // IE only

I figured perhaps this could work:

if (isIE) {
   setVpos = document.all.parnts[i].offsetTop;
}

.. but it didn’t. So now I’m asking you guys for help instead.

Any suggestion? Thanks on beforehand!

Answer 1

You clearly have a reference to the jQuery library, so why aren’t you using it to get the offset? Using jQuery, you should have no need for any variables such as isIE. The biggest benefit of using a library is cross-browser compatibility. Here’s how you could do it…

var off = $(parnts[i]).offset();
alert(off.top); 

offset on jQuery API