Giter VIP home page Giter VIP logo

jquery-pageslide's Introduction

jQuery PageSlide

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

Demo

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.

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)

Setup

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>

Changelog

Version 2.0

  • Completely rewritten
  • Externalized CSS
  • Content loaded into an iframe

Version 1.3

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

Support

Basic support is offered through Github’s issues tracker. Many requests are resolved through the help of fellow PageSlide users and myself, however assistance is not guaranteed or timely.

If you are in need of immediate support, or would like customizations to the script, Premium Support is available for $17. Premium Support provides you with direct email access to me, and allows me to set time aside to help solve your problem quickly.

jquery-pageslide's People

Contributors

srobbin avatar lfac-pt avatar perezd avatar lardissone avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.