jQuery PageSlide Plugin

A jQuery JavaScript plugin which slides a webpage over to reveal an additional interaction pane.

paulshapiro pageslide fork features summary (Dec 5 2011)

• Supply html contents in settings
• Spawn page slides inside children DOM elements by supplying its parent element’s selector as “target” in settings
• Have multiple pageslides visible at once through the “kind” setting (Just supply a different string)
• Destroy pageslide on close instead of just hiding it by $.fn.pageSlideClose({destroy: true})
• onclose callback
• Anonymously call pageslide to open $.fn.pageSlide(params)
• Integrates “body”.contents.wrapInner fix

New Version 1.3! (July 6th, 2011)

• Numerous bug fixes
• added jQuery.pageSlideClose() method to close any currently open pageSlide, manually.
• close any pageSlide using your escape key! (except modals).

Features

• Choose slide direction (left or right)
• Custom width slides
• Modal slides
• unobtrusive
• Mutiple slide definitions on the same page
• Fully supported with IE7+, FireFox 2+, Safari 2+
• Minified version included!

Demo

See the demo/index.html file for a demo of all the options of PageSlide
or Click Here for a live demo.

Requirements

• jQuery 1.26, jQuery 1.3+ recommended (included)

Setup

First, include these lines in your html files HEAD tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.pageslide.min.js"></script>

I recommend you use Google to host your jQuery library, but you can use the included one, or download it yourself.

Next, at the bottom of your html file, add the following

<script type="text/javascript">
  $("#my_anchor").pageSlide({width:'350px'});
</script>

If the user has JavaScript enabled, the PageSlide plugin will use AJAX to fetch the href of your anchor tag and inject it into your new slide. If JavaScript is not enabled, your anchor tag will work just as expected, and send your request as usual.

Useful Information

Defining a custom close button in your slide

If you’d like to define a “close” button within your slide, simply add the class “pageslide-close” to any html element.

<a href="javascript:;" class="pageslide-close">Close me!</a>

Making your slide modal

It is possible to make your slide modal, meaning, no click will implicitly cause the slide to close, instead you must explicitly defined an element with a class “pageslide-close” to return to normal.

$("#my_anchor").pageSlide({width:'350px', modal:true});

Slide in from the right

If you would rather have your slide come in from the right, simply define a direction argument.

$("#my_anchor").pageSlide({width:'350px', direction:'right'});

Setup multiple PageSlides on the same page

If you want to have multiple slides on the same page, simply define more!

$("#my_anchor").pageSlide({width:'350px', modal:true});
$("#foobar").pageSlide({width:'150px', direction:'right'});

What are all the different options I can pass into PageSlide?

Here they are:

var settings = $.extend({
callback: function(){}, //Function to be called after the ajax request loaded
width:          "300px", // Accepts fixed widths
duration:       "normal", // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
direction:      "left", // default direction is left.
modal:          false, // if true, the only way to close the pageslide is to define an explicit close class. 
}, options);

I found a BUG! or I want it to do THIS!

Please file a ticket and attempt to contribute a patch!

Enjoy!
Scott Robbins and Derek Perez 2011