a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane.

<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">

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

<script type="text/javascript">
    $('a').pageslide();
</script>

<script type="text/javascript">
    $.pageslide({ href: '#some-element' });
    $.pageslide({ href: 'some-page.html' });
</script>

<script type="text/javascript">
    $.pageslide.close();
</script>

- speed: the speed at which the page slides over. Accepts standard jQuery effects speeds (e.g. ‘fast’, ‘normal’ or milliseconds). (default=200);
- direction: which direction does the page slide? Accepts ‘left’ or ‘right’. (default=‘right’)
- modal: by default, when pageslide opens, you can click on the document to close it. If modal is set to ‘true’, then you must explicitly close PageSlide using $.pageslide.close(); (default=false)
- iframe: by default, linked pages are loaded into an iframe. Set this to false if you don’t want an iframe. (default=true)
- href: override the source of the content. Optional in most cases, but required when opening pageslide programmatically (e.g. $.pageslide({ href: '#some-element' }); ) (default=null)

<a href="_secondary.html" class="first">Link text</a>
<script>
    $("a.first").pageslide();
</script>

<a href="#modal" class="second">Link text</a>
<div id="modal" style="display:none">
    <h2>Modal</h2>
    <a href="javascript:$.pageslide.close()">Close</a>
</div>
<script>
    $(".second").pageslide({ direction: "left", modal: true });
</script>

<a href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>