Nowadays, it might be accurate to say that screen real estate is worth more than actual real estate.

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user's focus on the task at hand. There are many techniques to use — Lightbox, Carousel and Tabs to name a few — and today I hope to offer up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or "throwing") content aside to reveal a secondary content 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.

<script type="text/javascript">
    $(document).ready(function() {
        $('a.pageslide').pageSlide({
            width: "300px"
        });
    });
</script>

Similar to Lightbox, pageSlide has two major advantages:

1. The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
2. Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

Can I See It In Action?

Of course, you can! Click for a pageSlide demo.

Where Do I Get It?

I've setup a GitHub project for jquery-pageslide. Note: It's just a rough outline of how the plugin should function and in not production-ready yet. I've intentionally left it as a simple skeleton so that others may participate in the design and implementation process. Comments and suggestions, either here or on the project page, are welcome and appreciated.