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.
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
[…] 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 […]
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. 🙂
I think it’s better to enforce vertical scrollbars by using css: “body { height: 100.1% }” and continue using the ready method. (Or rather “jQuery(function($) { … })”, witch is best practice)
I know this is an old post, but I stumbled upon it, so I’m going to recommend another fix.
Rather than wait for the window to load, just put a style=”width: x; height: y” on your images where x and y are the exact image width and height.
That way even though the images haven’t loaded yet, the browser knows exactly how much space to reserve for the images, and jQuery document layout adjustments will work fine.
I know, I know, it’s a pain keeping track of dimensions sometimes, but I believe it’s generally good practice. 🙂