MooTools

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.