webDevBlog: Technology and Web News - Ajax

Sliding Panels for Maximum Content in Fixed Space

Thu, 15 Jan 2009 21:30:00 -0500

On the law library's website, we have what's called the Feedback Blog. This is a place where we post questions from students and any of our visitors, together with answers to those questions. It's an informal dialogue of sorts, styled in a Jeopardy type fashion, where every post has to be in the form of a question.

On our library homepage, we present the one question and the first 100 characters of the answer to give a fragment of our response. One problem with this approach is that we only have enough room for a single question. As soon as a new question is posted, the most recent one disappears. Instead of just listing more questions, we chose a sliding panel widget so people can page through recent questions and answers without leaving the page or forcing the page size any bigger.

Implementing this was pretty easy with Adobe's Spry Sliding Panel Widget. We went right to the Sliding Panels Sample page and reverse-engineered the code for a horizontal panel. A few checks in the documentation and some testing, and it's ready to go. Of course, it might have been better to read Adobe's entire explanation on Building a Spry Sliding Panels widget, but the code is pretty easy to figure out.

Now there's just one problem: IE6 works with the code, but it displays the widget box strangely. The problem is that IE6 doesn't render the CSS rule max-height properly. In fact, it flat-out ignores it.

Take a look at how it shows up in IE6:

We could have fixed this problem with a proprietary Internet Explorer trick such as this or this. The only problem is that it just seemed wrong to add bloat and hacks to the homepage, just so IE6 would look pretty. A quick check of Google Analytics shows that just over half our our users browse with Internet Explorer. Of those, less than a third use IE6. Given these numbers, we figured it was fine the way it is.

Web design site Smashing Magazine lists this technique, which they call Carousels (slideshows) as one of the Web Design Trends for 2009. It's nice to be trendy now and again. Oh, and it's even nicer to add functionality with little code and no loss of screen real estate.

AJAX Design Enhancements to Georgetown Research Guides

Mon, 28 Jul 2008 12:33:00 -0500

On the Georgetown Law Library website, we have a pretty big collection of research guides, which we've recently expanded to include treatise finder resources, as well as an expanding list of tutorials. In order to make it easier to cross-reference the guides, we've added a new expandable box showing related resources. Here are two images showing related resources for our Accounting Research Guide.

To create the expandable boxes, we used elements of the Adobe Spry JavaScript library. Specifically, it uses the accordion widget. In our implementation, we use a folder icon with an arror to indicate that there's more information under that heading. At it's heart, this is just a fancy stylized list, so it should display fine with JavaScript turned off, and there should be no reason screen readers can't interact with this added feature.

This summer, we're enhancing our research guides and treatise finder resources in other ways, so stay tuned for other enhancements.

Testing the Waters with Ajax

Thu, 17 Apr 2008 22:21:00 -0500

In a very limited fashion, we've started testing some new Ajax technology for the law library website. For now, we're using Adobe's Spry Framework for Ajax. The nice thing about this is that it's integrated with Adobe Dreamweaver 8, and it's pretty easy to implement simple controls.

The first place we used this was with a page of Photo Memories of Bob Oakley, which is a simplified version of one of the example photo galleries on the Adobe demo site. The other place is with the index pages for our library services and library policies. With this second example, the distinction between services and policies isn't always clear, so we present the two on the same page with tabs to toggle between the two. We may revise how we present the two online, but for now, this is a simple fix.

[More]