Relative Offsets Are Handled Differently Between Versions of jQuery
March 10, 2009
This post highlights a difference between jQuery 1.2 and later in how relative values are handled, which I recently discovered when upgrading a site from jQuery 1.2 to the new 1.3. If you’re about to do the same, or have recently broken your site after upgrading and don’t know why, this post is for you. It will be easier to explain with an example, so here’s how the problem manifested for us:
On our main website we use jQuery to slide the pages into view when a user clicks on a navigation link. This is a variation of the “Coda Slider”, named because it mimics the website for Panic software’s Coda editor. In a nutshell, we have a div which acts as a viewport (we’ll call it #viewport), with another div inside which contains the pages (which we’ll call #slideContainer). #viewport has its position property set to relative, and its child, #slideContainer, has its position set to absolute. So when we increase or decrease the value of #slideContainer’s left property, it will slide right or left respectively to reveal new pages. Here’s an example: