jQuery Plugin: Backstretch
jQuery Plugin: Approach

jQuery Plugin: PageSlide


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.

jQuery Plugin: PageSlide



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


<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.pageslide.min.js"></script>

To use, call pageslide on an <a> tag that either links to a page or an anchor of a hidden element.

<script type="text/javascript">

Or, open pageslide programatically:

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

To close pageslide programatically:

<script type="text/javascript">


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

Demo - Slide to the right, and load content from a secondary page

<a href="_secondary.html" class="first">Link text</a>

Demo - Slide to the left, and display hidden content from this page in a modal pane

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

Demo - Open the page programatically

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

demo - responsive

Tags: pageslide, jquery, page, slide, plugin, css, web, html, design, develop

Leave a Comment

No Comment

© Creative3x Ltd.