PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane.
There are a couple of examples included with this package. Or, if you can’t wait to download it, see it live on the responsive demo or original project page.
The speed at which the page slides over. Accepts standard jQuery effects speeds (e.g. ‘fast’, ‘normal’ or milliseconds). (default=200)
Which direction does the page slide? Accepts ‘left’ or ‘right’. (default=‘right’)
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)
By default, linked pages are loaded into an iframe. Set this to false if you don’t want an iframe. (default=true)
Override the source of the content. Optional in most cases, but required when opening pageslide programmatically (e.g. $.pageslide({ href: '#some-element' }); ) (default=null)
In the HEAD tag:
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">Ideally, near the bottom of the page.
<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>
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">
$('a').pageslide();
</script>
Or, open pageslide programatically:
<script type="text/javascript">
$.pageslide({ href: '#some-element' });
$.pageslide({ href: 'some-page.html' });
</script>
To close pageslide programatically:
<script type="text/javascript">
$.pageslide.close();
</script>
- Completely rewritten
- Externalized CSS
- Content loaded into an iframe
- Older versions of PageSlide are located in this repository, however if you would like to contribute to the original plugin’s development, please use contributor Derek Perez’s repository.