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

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

• 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!

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

• jQuery 1.26, jQuery 1.3 recommended (included)

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.

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>

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});

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

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

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'});

Here they are:

var settings = $.extend({
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);

Please file a ticket on our github issues tracker, and we will will address them all.

Enjoy!
Scott Robbins and Derek Perez 2009