Thursday, January 8th, 2009
jQuery pageSlide: throwing content around
Category: Component, Examples
, jQuery
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
HTML:
For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.
Related Content:
This is cool, I can see how it can be useful in my projects.
I love it – already started messing about with it on my personal blog. Works well although not sure how well it will work on small screens, but still loving it!
I have to admit, it’s more jarring than anything, and it shoves content off the viewing window. I’d see it more applicable if it slid overtop of the content instead of shoving it screen left (IMHO).
@keif: Agreed: And could come in from either side, or top/bottom. Sounds like a good weekend addition, get to work!
Is there a (cross-browser)-way to scroll background-images too?
Repost of my comment currently awaiting moderation on that site:
It’s nice to have another UI convention for supplemental information available for use where appropriate. As for returning to the main content, it could be more intuitive if a thin expand/contract button was at the division between the page and the sidebar as an alternate means to close it. Something like the one seen in this screengrab:
http://cannonballinteractive.com/temp/expand_ui.gif
The plugin could potentially allow developers to specify whether the sidebar goes off screen completely when closed (as it does now) or leaves that thin strip visible.
I’m using this in a new project but I’m having a conflict with google custom search engine in firefox only…