jQuery $(this).position().top not working in Chrome

Question

I was wondering if there would be any reason this piece of code will not work...

top = $(this).find('ul').position().top;

It works in IE, Firefox, and Safari, however when I alert the output in Chrome it says DOM window object... I need an integer. Why would it alert out DOM window object?

Answer 1

Are you sure you're really alerting that top? Recall that top is a pre-existing global variable in browser-hosted JavaScript (it's window.top, the top-level window).

Update: Interesting, Chrome won't let you implicitly overwrite top (which is probably a good thing): Demo. Just declare your variable (always a good idea anyway) within whatever function that code is in (that code is in a function, right?), which will shadow it, and so that will work: Demo. E.g.:

var top = $(this).find('ul').position().top;

It's important to declare your variables, in order to avoid falling prey to the Horror of Implicit Globals. And as you've found in this case, avoiding globals is always best, as Chrome won't even let you use top as a global if you declare it (again to protect window.top).