Sat, 26 Jan 2008

New Geek Fun…

I decided I needed to play with AJAX a bit after seeing all the fun other folks are having with that on their web sites. Generally speaking, I’m not a big fan of eye-candy for the sake of eye-candy.

But this seems like a good use of AJAX to me: having the comments and comment form for each entry in this page seems redundant and wasteful of page real estate (and perhaps of bandwidth, though that’s less of an issue as all the regular visitors are now on broadband connections). However, loading a page just to see the comments and form seems less than ideal.

So, now the comments will (should) reveal in-line on this page. I’m not completely sold on this, so let me know if you find it difficult or confusing; it’s easy to change back.

And for anyone interested, it was also pretty easy to set up: I’m using Scriptaculous (and Prototype) as the AJAX libraries. Actually, Scriptaculous is providing the reveal effect, Prototype is the real AJAX library doing the work. So I put those files in place and referenced them from the main blog page template. Then I Wrote a couple javascript functions to use the libraries to get and display my contents. Then I just needed to create a new “flavour” (that’s what Blosxom calls styles of content or sets of templates) to display the comments and form as a snippet of HTML.

The couple of “tricks” I tracked down to make it work reasonably well: set display to none for the container (not the CSS for the container) that holds the AJAX content (the comments in my case) and let Scriptaculous’s effect make it visible. And tell the web server (Apache, of course in my case) to send some no cache headers on the pages and page snippets involved in the AJAX content — otherwise they will be cached and not reflect updates as they should.

Of course, when I hear from folks that this really isn’t working, I’ll try to get it working better and update the tricks here. Perhaps for extra credit I’ll replace the comment submission button with an AJAX post to keep everything in this page…

The only downside I see to this approach is that I don’t expect it plays well for screen readers or for search engines. We’ll see if I have any time to make the comments more accessible for those two specialized types of visitors.


edit this blog...
HTML hints

Title:
Body:
If you use these in order for jpg files, the links below each upload should work; if the files are jpgs, change the extension on the link; if you go out of order, you're on your own... you will likely need to monkey with the sizes...
File 1:
link to as:
<div class="Embed-container Ratio-4-3">
ALT=" " BORDER="0"></A>
</div>
File 2:
link to as:
<div class="Embed-container Ratio-4-3">
ALT=" " BORDER="0"></A>
</div>
File 3:
link to as:
<div class="Embed-container Ratio-4-3">
ALT=" " BORDER="0"></A>
</div>
Password:
Back to the Blog