Projects

SlidingPane: Slide Page to Reveal Content Underneath Using HTML5 (Updated)

 , , , , ,

SlidingPane is a super simple script that allows you to slide an entire page or a section of a page to reveal content underneath. It was built as a self-contained component using HTML5 with no dependency on any Javascript library.

Project Background

First off, check out the demo here!

UPDATE 04-12-2013: SlidingPane is now on GitHub! https://github.com/ronaldcs/sliding-pane

UPDATE 02-17-2013: Check out Building an iPhone/Android Web App Using the Sliding-Pane Component.

UPDATE 12-12-2012: Fixed bug with complex SlidingPanes embedded in table cells where the hidden div was not positioned correctly. Component wrapper needed to be set to relative positioning.

I thought it would be neat for a website to have functionality similar to OSX’s Notifications Center where after pressing a button, the entire page would slide to reveal some options underneath:

I had a project where I developed a quote system; there were some parameters for the quote system that allowed for certain quotes to be auto-approved (e.g. if the quote was at or above a specific gross margin percent AND if the quote was a certain amount, etc.). I came up with an idea of having the options show underneath the application when the entire page slides to the right, based on a button press. This should be no sweat to do with CSS3 transforms, particularly 3d transforms since in Chrome and Safari, these animations are hardware accelerated (testing on the iPhone 5 and iPad was smooth as silk!). I managed to hardcode this effect in the application above but I thought I could use this effect in later applications so I refactored it as a Javascript object; in addition, I wanted to share it with others. And thus SlidingPane was born!

Usage

Usage is fairly simple. You’ll essentially need two divs:

  1. One will be the div you want to hide (e.g. your “options” pane).
  2. The other will be the div that shows on top (e.g. your entire page).

As an example in its simplest form:

<html>
  <head>
    <script type="text/javascript" src="sliding-pane.js"></script>
  </head>
  <body>
    <div id='my-div-to-hide'>
      My "Options" Goes Here
    </div>
    <div id='my-div'>
      My Page Content Goes Here
    </div>
  </body>
</html>

You’ll then need to execute the following Javascript on DOM ready:

settingsPane = new SlidingPane({
  id: 'my-div-to-hide',
  targetId: 'my-div',
  side: 'left',
  width: 200,
  duration: 0.75,
  timingFunction: 'ease',
  shadowStyle: '0px 0px 30px #000' /* or 'none' or ... */
});

The code will take care of the rest by adding the necessary divs and CSS3 3d transforms to the appropriate elements. Now in order to invoke the sliding effect, you can use the following methods:

settingsPane.open();

settingsPane.close();

settingsPane.toggle();

Should be pretty self-explanatory :-). There’s a few options that you can set on the fly, specifically width (the size of the transform, in pixels), duration, timingFunction, and shadowStyle. You can set which side you want the component to animate from on the fly as well, but make sure you use the setSide() helper method.

The above is the typical implementation of SlidingPane. There’s also a more advanced implementation. It’s not necessary to specify the hidden div in your HTML. You can just have the div that will show on top in your HTML and SlidingPane will auto-generate the hidden div, if it’s not already in the DOM. In addition, you can always appendElements to the hidden div after it’s been generated (see the complex example of how this is done here).

That’s pretty much it. Remember to check out the demo here and check back often for updates!

Project Status

Currently, this project is in beta, version 0.8. It’ll probably stay that way while I receive feedback and suggestions on it (hopefully I’ll get some! :-)). This project is released under the MIT License.

Compatibility

  • Tested with Webkit (Chrome and Safari) and Gecko (Firefox) browsers.
  • Haven’t tested with Presto (Opera) browsers.
  • Not compatible with IE9 and less (should be compatible with IE10 and above, but not tested).
  • Tested on the iPhone 5 and iPad 2.

Limitations

  • It’s possible to set multiple SlidingPanes to the same target (visible div)!
  • Don’t set the side (using the setSide method or otherwise) when the content is in the “open” state.
  • The div you’re hiding must not be a child of the target div or vice-versa (they must at least be adjacent to each other).

Download

Code and demo files can be downloaded here. Source is also on https://github.com/ronaldcs/sliding-pane:

$ git clone git://github.com/ronaldcs/sliding-pane

Flattr this
Fork me on GitHub