Skip to a section of this page:

« Valid updates
Silent gratitude isn’t much use to anyone »

Cram it in

Update (14/09/2008): The Latest development version uses Ariel Flesler’s scrollTo plugin to achieve some nice transitions. The interaction is coming along, also now supports more than one instance per page. Having problems with browser jumping when URL hash is updated, Chrome copes with this fine, all other browsers fail… hmmm…

Always on the lookout for new ways to cram more information into less space and maintain a good user experience. :)

Here’s a new take on a common (steam-inspired) approach, still under development under development.

I say a new take because I’m putting it together, but I’m sure there are other solutions like it around.

This solution will feature: Semantic markup and content unobtrusively transformed into a compact display with navigation to access each panel.

Obviously, there’s still work to be done, improvements to accessibility and a pausable automatic slideshow function. But the basic functionality is there

Didn’t take very long to put together so far, thank you jQuery.

The idea is to eventually combine this functionality with the existing compact sections script so that any of three display modes can be easily chosen (even switched between) for the compact presentation of sections of content.

This entry was posted on Saturday, September 13th, 2008 at 2:23 pm and is filed under DHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Cram it in”

Comment feeds for this post:

  1. Ben Says:
    September 14th, 2008 at 8:24 pm Looking good :) I have a challenge for you… I’d like to see the sliding animation simulate “wrap around” and sliding from one item to another should take the “shortest” route. There are 5 items in the demo. If you are viewing #4 and pick #1, it slides “back” (left to right) skipping over #3 and #2 quickly. If it slid forwards (right to left) it would skip #5 only… that’s “shortest” ;) Alternatively you could reserve sliding for transitions between adjacent items (it’s still implement a slide between the last and first items), and just do an instant toggle for a direct click. I see direct urls (using #id) work, very nice. Although they don’t select the right number… but I’m sure that’s under development. Will it automatically transition if left idle?
  2. Andrew Says:
    September 15th, 2008 at 6:14 pm

    That is a challenge! It may require re-arranging or duplicating the content. Give me some time to think about that.

    I see direct urls (using #id) work, very nice. Although they don’t select the right number…

    I have removed the updated URLs (for now), it causes a distracting skip in most browsers tested (only Chrome handled it cleanly). If only there was a way to prevent the browser from re-drawing the window while a couple of lines of JavaScript are executed!

    Will it automatically transition if left idle?

    That’s certainly on the road-map, with a pause button for accessibility. :)

    Thanks for the feedback, and the challenge!

Leave a Reply