Been playing with some of the AJAX web development libraries that have appeared to simplify the creation of AJAX enabled web sites. I have a few sites I am working for Devicescape where I’d like to use some AJAX, and a new site that I am working on that will be using it a lot.

I started doing all the work myself, but while looking for a web content management system for one of the new Devicescape sites I discovered script.aculo.us and I am impressed so far. I am starting on my own site, and have replaced all my manually generated requests with script.aculo.us calls as well as adding some new things like drag and drop and fade effects on transitions.

All sounds good, and indeed script.aculo.us does abstract many of the browser differences that I’d had to be cogniscent of when writing all the Javascript myself, but I still had issues getting it working on Internet Explorer (versions 6 and 7 still seem to have issues with CSS rendering), Safari (which was actually the hardest to solve) and Opera (which I’ve heard has very compliant CSS rendering).

What I would say is that Firefox is very forgiving when it comes to syntax errors or mistakes in HTML. That might be good for end users, but it does make it a less useful platform for development. Much like I prefer my C compiler to run with -Werror -Wall options so I learn about potential problems as soon as possible, I would prefer Firefox to be strict when it comes to Javascript and HTML errors.

Internet Explorer, even version 7 beta 2, still seems to be just difficult. I managed to work around all of the things that were not rendering correctly, but in all but one case IE was the only browser that got it wrong (the one other case was my mistake that both Safari and Firefox were happy to ignore).

The Safari problem was much more annoying, and my solution is very specific to the page I was working on which means I might encounter the same issue on other pages in the future and need to come up with different workarounds. The problem concerned a known bug in the handling of opacity and floating divs (see the Effect.Appear documentation for more information). The recommended solution is to put the fading div inside a floating div. My problem was that the floating divs were nested inside the one I wanted to make appear. Switching the div on using the display style element worked, but fading it in caused the images to jump to the wrong place once they reached full visibility.

My workaround was to add a 1px right margin to the div I was fading, run the fade and make use of Script.aculo.us’ afterFinish callback to then reset the right margin to 0px. That causes it to re-render at the end, and the images end up in the correct place.