Thursday, January 8th, 2009

jQuery pageSlide: throwing content around

Category: Component, Examples, jQuery

<p>

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.

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         $('a.pageslide').pageSlide({
  4.             width: "300px"
  5.         });
  6.     });
  7. </script>

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:

Posted by Dion Almaer at 9:10 am
7 Comments

+++--
3.7 rating from 70 votes

7 Comments »

Comments feed TrackBack URI

This is cool, I can see how it can be useful in my projects.

Comment by konspiredesign — January 8, 2009

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!

Comment by Phunky — January 8, 2009

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).

Comment by keif — January 9, 2009

@keif: Agreed: And could come in from either side, or top/bottom. Sounds like a good weekend addition, get to work!

Comment by mrclay — January 9, 2009

Is there a (cross-browser)-way to scroll background-images too?

Comment by drflow — January 11, 2009

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.

Comment by drinkspiller — January 12, 2009

I’m using this in a new project but I’m having a conflict with google custom search engine in firefox only…

Comment by salarrue — June 30, 2010

Leave a comment

You must be logged in to post a comment.