article:
jQuery Plugin: Backstretch
article:
jQuery Plugin: Approach

jQuery Plugin: PageSlide

Advertisement

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



Implement


<HEAD>

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

and

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

Options

- 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>
<script>
    $("a.first").pageslide();
</script>



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">
    <h2>Modal</h2>
    <a href="javascript:$.pageslide.close()">Close</a>
</div>
<script>
    $(".second").pageslide({ direction: "left", modal: true });
</script>



Demo - Open the page programatically

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





source
github
demo - responsive
download

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

Leave a Comment

No Comment

© Creative3x Ltd.