vBulletin Javascript issue in IE

[Snakehill]

This is a piece of code I created as a cross-brower/cross-platform solution for fixing/locking a div on a custom vB page (so that it scrolls along with the page scrolling). However, when adding it, it works in all browsers but IE. Unlike the other ones, Internet Explorer cannot seem to get hold of any of the values requested by the code, and required for it to work well. Other functions still work, it is just not getting the offsetTop and window.pageYOffset values.

However, when trying this outside of a vB page, it works great, even on IE, so something from vB seems to be conflicting and I have no idea what it is or how to make it work along with this code.

<script type="text/javascript">
window.onscroll = function (e) {
var basediv = document.getElementById('basediv').offsetTop;
var setdiv = document.getElementById('setdiv');
 if (window.pageYOffset	< (basediv - 1)) {
 setdiv.style.top = "0px";
 } 
 else {
 setdiv.style.top = (1 + (window.pageYOffset - basediv) + "px");
 }
}
</script>

The offsetTop and window.pageYOffset for some reason always return 0 and undefined. I have tried adding the code anywhere on the page, in between the head tags, and in an external js file, but nothing worked.

The following I have used to test it:

<script type="text/javascript">
window.onscroll = function (e) {
var testdiv = document.getElementById('testdiv').offsetTop;
alert(window.pageYOffset + " " + testdiv);
}
</script>

<div id="testdiv"></div>

Again, it works fine on its own but as soon as it is placed on a custom vB page, something stops it from getting the requested values.

Help is very much appreciated! Thanks!

[kh99]

I'm really a js beginner so I don't know what's going on, but you only have to google "getElementById in ie" to find that it has issues. One suggestion I found was to get all elements of a given tag name and check the id yourself, something like

function myGetElementById(tag, id)
{
   var elements = document.getElementsByTagName( tag );
    for var i = 0; i < elements.length; ++i )
    {
        if( elements[i].id == id )
        {
            return elements[i];
        }
    }
    return null;
}
 ...

var basediv = myGetElementById('div', 'basediv').offsetTop;

(I haven't tried this code at all so it could have typos or other problems, but you get the idea).

[Snakehill]

Nah, the flaw definitely is not in the getElementById, unfortunately.

Let me show you an example. This is on vB:
Link has been removed

Scroll to get to see the bunch of alerts with the requested values. The first value is the window.pageYOffset (not ID-related, flexible value), the second is using the offsetTop (ID-related, fixed value). In every browser but IE you see two values of numbers above 0. In Internet Explorer either only one or none show up (undefined/0).

This is the exact same code but outside of vB, and you will see it all works fine:
Link has been removed

[kh99]

oh, ok. Then maybe this: http://stackoverflow.com/questions/1...imation-in-ie8

I know this doesn't really explain why it works outside of vb.

[Snakehill]

Originally Posted by kh99

oh, ok. Then maybe this: http://stackoverflow.com/questions/1...imation-in-ie8

I know this doesn't really explain why it works outside of vb.

No luck. Thanks a lot for trying to help though.

I ended up adding getBoundingClientRect for whichever browser and device supports that instead of the above code. Works like a charm and no conflicting with vB so we're all good.