I created a jQuery site a few years ago for a local psychologist. It’s a tabbed jQuery design I put together to replace an old Wordpress install. While the updated jQuery design looks more modern than the Wordpress-as-a-CMS design it replaced, that was not the primary reason for the overhaul.
What prompted me to switch to jQuery? I was moving from Site5 to Media Temple, and as you may know, importing/exporting Wordpress databases is not fun. Not difficult, but time-consuming and a tad dangerous. I thought it would be easier to simply redesign the site from scratch in jQuery. And I was right. The new jQuery site is essentially one file that contains the content of all six tabs. One file is easy to manage and easy to move to a new host. Much easier than a Wordpress install that needs regular security updates, a new database password, etc. OK, one file not including the jQuery library files, but you get the idea. I used jQuery’s ThemeRoller to pick the colors I wanted. No laborious tweaking of RGB hex values.
The move to Media Temple went fine. Years passed. Then yesterday a friend told me his uncle might need a website. I decided to check on that old jQuery site. Started playing with the tabs. What’s this? The third tab shifts the entire page a pixel or two to the right or left, coming and going. The 4th tab doesn’t, the 5th does, something like that. Hover the mouse over each tab in sequence and you get the undesired “shake” effect. It’s even more noticeable because I’m using a jQuery mouseover event to activate the tabs without requiring a click.
Why does it shake now, when it didn’t shake before? Browsers change. New Firefox. New Google Chrome. But the page uses jquery-1.3.1, that hasn’t changed. Maybe a new version solves this problem?
Upgrading to jQuery 1.4 was easy. I simply changed this (index.html) line:
<script type=”text/javascript” src=”http://pjbrunet.com/jquery-1.3.1.min.js”></script>
to this:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js”></script>
Same problem. (In case you’re wondering, I reverted back to 1.3.1.) Turns out this is a UI bug, but “no date set” for a fix.
It appears the source of the problem is the “auto” margin. This was the problem for me:
<body style=”background-image:url(body_bg.gif);width:713px;margin:0 auto;padding:20px;”>
Maybe I could drop in the ancient “center” tag and that would solve everything. Well, I’m not sure if this solution is any more valid with its negative margin, but it works:
<body style=”background-image:url(body_bg.gif);width:713px;position:fixed;margin-left:-356px;left:50%;padding:20px;”>
Notice the negative margin is (approximately) half of the width of the body.