Skip to content

aino/pan.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

pan.js adds native-like panning functionality using JavaScript for any element that is bigger than it’s container.
Optimized for iPad, iPhone and desktop browsers.

pan.js measures the element and it’s parent, so make sure you have a width/height for the elements and overflow:hidden for the parent.
See the demo included for a simple implementation.

Browser support: IE7+, FF3+, Opera 10+, Chrome, Safari, iPad and iPhone (and probably more devices as well).

--

New since 0.2: Options

Now you can pass options to the Pan using an object as second argument, example:

Pan(document.getElementById('pan'), {
    mousemove: true,
    smoothness: 4
});

Available options:

name        type     default   description
--------------------------------------------------------------------------------------------------------------------
mousemove   Boolean  false     pan when moving the mouse instead of click/drag (only affects desktop browsers)
fps         Number   80        Framerate per seconds, tune this to maximize performance on target devices
smoothness  Number   3.2       Decceleration multiplier. Adjust to suit your application.

--

Usage:
Pan( HTMLElement, Options ); // adds panning for the element

Destroy the pan:
var pan = new Pan( HTMLElement ); // adds panning
pan.destroy(); // removes all events

About

Panning for ipad, iphone and desktop.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published