What is jQuery.screen?

A jQuery plugin that manages page layers: what goes first, what goes next and the transition between one and other.

The goal of this plugin is to provide a way to make fluid web applications that do not require loading new pages.

Want to know more? press →, slide your finger to the left or jump to:

features
how to use
support

Press ↑ or ↓ to come back to this layer, anytime.

Features

✓ Expands layers to fullscreen and hides the scrollbar.
✓ You can jump between any two slides using a transition.
✓ Each layer can has its own event space, there are also global listeners for mousewheel, arrow keys and touch events.
✓ Nice transitions are included.
✓ It plays well with the iPhone (try to slide to the left).
✓ Nothing else, just keeping it simple.

How to use?

Include jQuery, jQuery.transit, and before loading .

If you are using you can forget about dependencies and just pull it like this:

Base structure

Here is an example the basic HTML structure of a layer, you can use as many layers as you need.


  
    Optional layer title
    
      This is the basic skeleton of a layer.

Basic $.screen usage

Use this code as starting point, you can also try to see the source code of this page.

$(document).ready(
  function() {
    // This must be enough for a simple slideshow.
    $('section').screen();

    // Custom actions, for advanced scripting needs.
    $('#first-layer').screen('bind', {
      'click': {
        '.next a': $('#second-layer')
      }
    });
  }
);

Need support?

I'm currently unable to offer free & quick support for jQuery.screen, however, you can always reach me in for any quick question :-).

Thanks for passing by, if you like my work feel free to buy me a beer anytime!

- .

(press ↑ or ↓ to start again)