Exploiting CSS and Javascript
I’ve been thinking more about using CSS and Javascript to create more elegant UI’s for bibliographic metadata. In short, the problem is how to have a simple GUI that quickly provides a good overview of lots of records, while also allowing the user to focus in on more detailed information such as annotations without needing to load new pages. Zeldman has a link to this really nice use of JS and CSS. The problem is different (images), but there are similar underling issues.
A couple of months back, I modified this example, and came up with this.
One problem with the approach is that it takes a fair bit of horizontal real estate, particularly if there are multiple author names or very long titles. Does anyone out there with better CSS skills than I know of any clever CSS solutions to this problem? Maybe somehow shorten long fields?
Another issue is that I wonder if it’d be better to constrain the main table, and only display the notes in a panel below (probably in a single record at a time). That could have the advantage of better transferring to smaller GUI’s, such as … Dashboard Widgets.
I’d like to start by modifying this demo included with the eXist XML DB.
Update: After ages spent cleaning up some ugly html and converting to xhtml, I got the above example working with overflow:hidden. I’d really like to get some advice from some CSS and design gurus though.
Update 2: Johan Kool did what I in turn had done: borrowed code and turned it into something else. I quite like the result.
