I recently switched a project from Prototype/Scriptaculous to jQuery, and overall I’m very pleased with the move. It’s sometimes a little weird using jQuery because I’ve been thinking JavaScript in DOM for so long, but I don’t feel an urge to go back. 
Everything was working great after the conversion, with one exception. Elements that I was absolutely positioning on the page in relation to other elements (get the position of element X and set element Y accordingly) were just a little bit off on the initial page load. Resizing the window would fix it, but it was a problem.
The problem and solution turned out to be rather simple.
The Problem
I was initially using the very cool $(document).ready() feature of jQuery to position and display these elements when the DOM was loaded, but without waiting for all of the images, etc. to load in. However, this doesn’t work very well because until all of the images load in, the browser isn’t sure if it needs to show scrollbars or not. The elements I was positioning were slightly left of their intended position because the elements underneath would shift to the right after the browser determined that no scrollbar was required.
The Solution
Use $(window).load() instead of $(document).ready(). Yes this means you have to wait longer to position your elements, but they go where they are supposed to - which is important.
The other option is to just nudge them a little by calling the position code again on $(window).load(), but in my situation that was pretty annoying.
Hopefully this will save some other jQuery newbies some debugging time.
Popularity: 12% [?]
Felix Geisendörfer adds this Comment:
Rock n’ Roll. jQuery is the way to go. Even so your solution is really the easiest way to solve the problem I’ve just taken on the challenge finding an alternative way of positioning your elements before window.onload.
The code is not tested and most likely going to have problems with cached images, but feel free to
take a look at it to see what alternative way one could take:
http://bin.cakephp.o[...]ew/327666860
– Felix
July 5th, 2007 at 8:30 pm
jQuery makes AJAX easy adds this Pingback:
[…] and AJAX, I can’t recommend the jQuery library enough. I originally heard about it from Alex King’s blog and was inspired to try it out. I love when new libraries and frameworks have nice tutorials and […]
July 31st, 2007 at 9:27 am
Jason adds this Comment:
omg, thank you so much for this. I ran into the exact same problem when trying to arrange images so that they line up horizontally on each other.
Some of them would work, and then it would just “stop”. Now I understand why this happens, and fixed it too! Woohoo!
Let me know if you want the plugin, its pretty neat for lining up horizontally anything you query for without tables or excessive positioning divs.
June 27th, 2008 at 7:57 am