Panner 0.4

Content panning based on mouse movement, a cool way to replace scrolling for large images or full pages.
Requires Mootools Core 1.4.1 or later.



Details

Author
Lorenzo Stanco
Current version
0.4
GitHub
lorenzos/Panner
Downloads
10010
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.4.1: '*'

How to use

First of all, include in your page Mootools 1.4.1 or later, and Panner.js source.

<script type="text/javascript" src="Mootools.js"></script>
<script type="text/javascript" src="Panner.js"></script>

Place the content you want to pan inside a smaller container (can be the main body too), like this:

<!-- Small container -->
<div style="width: 600px; height: 200px;">

    <!-- Big content -->
    <div id="content" style="width: 1200px; height: 600px;">
        Lorem Ipsum dolor sit amet.
    </div>

</div>

Then, in your Javascript:

$('content').panner();

Docs

Syntax:

var myPanner = new Panner(content, options);
  • content: A DOM element or ID, the content you want to scroll.
  • options: (object) Options for the class. They are all listed below.

Options:

  • limit: If TRUE (default) limits content panning at its normal scroll bounds. Can be also an object with two x and y boolean values (for example { x: true, y: false } limits content padding only for x-axis).
  • center: If TRUE moves the content to the center initially.

Methods:

  • center(): Moves the content to the center immediatly.
  • topLeft(): Moves the content to the top-left corner immediatly.
  • select(): Select a value.
  • attach(): Enable panner, this method is called in costructor.
  • detach(): Disable panner, call it when you want to suspend panning.
  • refresh(): Refresh panner (detach + attach), call this when container or content size changes.

Element and Elements methods:

You can use some shortcut methods on Element and Elements for creating the Panner quickly.

$$('img').panner(options); // Attach Panner to all images
  • Element.panner(options): Creates a new instance of Panner on a single element.
  • Elements.panner(options): Creates a new instance of Panner on elements.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus