Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A jQuery plugin for a sliding image divider
branch: master
Failed to load latest commit information.
demo Initial commit
make Initial commit
src Initial commit
.gitignore Initial commit
LICENSE Initial commit
Makefile Initial commit
README.md Change demo link
jquery.divider.js Initial commit
jquery.divider.min.js Initial commit

README.md

jquery.divider.js

A jQuery plugin for a sliding image divider.

View demo

Supported in IE6-9, Chrome, FF3.6,12, Safari

Dependencies

This plugin requires jQuery (obviously) and jQuery UI's draggable functionality

Options

  • panels: The selector used to find the panels inside the divider element (default: '.panels')
  • controller: The name of the class assigned to the controller objects (if string), or the element to use as the controller (if jQuery object) (default: 'controller')
  • direction: Accepts 'horizontal' or 'vertical'; denotes the direction of the dividers (default: 'vertical')
  • position: Accepts an array of numbers indicating the position of each controller. If no value is passed, the controllers are set up to be equidistant (default: [])
  • handle: The name of the class assigned to the handle object (if string), or the element to use as the controller (if jQuery object). If left unassigned, no handle is used (default: false)

Example

Sets #container1 to be a vertical divider, and #container3 to be a horizontal divider.

  $('#container1').divider({
    controller: 'v-divider', // class assigned to controller div
    direction:  'vertical',
    panels:     '.section',
    position:   [ 550 ], // Sets the only handle to be 550px from the left
    handle:     'handle'
  });

  $('#container3').divider({
    controller: $('<div />', { 'class' : 'h-divider' }), // jQuery element that will be used for controller
    direction:  'horizontal',
    panels:     '.section',
    position:   [ 0 ], // Start the controller at the very top (0px)
    handle:     $('<div />', { 'class' : 'handle' }); // jQuery element to be used for handle
  });

Contributing

This project uses smoosh for compiling, linting.

Something went wrong with that request. Please try again.