READ ME

jquery-shuffleboard Rehan Dalal http://www.varchr.com/projects/jquery-shuffleboard/

This a jQuery plugin that allows you to create a Shuffleboard UI component.

LIMITATIONS

• Rotation will only work if you include 'jquery.transform.js' or 'jquery.transform.light.js'. You can get the latest version of this file from: https://github.com/louisremi/jquery.transform.js
• When shuffling images make sure to specify their height and width to ensure that there are no positioning bugs.

USING THE PLUGIN

Simply select the element(s) you wish to turn into a shuffleboard and run the .shuffleboard() function on it. You may optionally pass it settings as in the following examples: $('#myShuffleboard').shuffleboard(); $('#myOtherShuffleboard').shuffleboard({ rotate: true });

See below for a full list of settings available.

Alternatively to run specific methods on the plugin use the following: $('#myShuffleboard').shuffleboard(method, arguments); eg: $('#myShuffleboard').shuffleboard('stop');

See below for a full list of methods available.

SETTINGS

The following settings are available for the plugin:

• autoStart (boolean) [Default: true] Set to true to make the shuffleboard begin shuffling automatically.

• animateRotation (boolean) [Default: true] If 'rotate' is set to true, this will animate the rotation on each shuffle.

• corner (string) [Default: 'nearest'] This determines which corner of the container the items will be shuffled over. (Values: 'nearest', 'topleft', 'topright', 'bottomright', 'bottomleft')

• direction (string) [Default: 'back'] This sets the direction in which to shuffle (ie. shuffle to the back or front) (Values: 'back', 'front')

• easing (string) [Default: 'swing'] This sets the jQuery easing function to use on animations. See here: http://api.jquery.com/animate/#easing

• interval (int) [Default: 1000] This sets the interval, in milliseconds, between shuffles.

• maxRotation (int) [Default: 30] This is the maxmimum angle of rotation when 'rotate' is set to true.

• rotate (boolean) [Default: false] Set this to true to use a CSS3 transform to rotate the items.

• scatter (boolean) [Default: true] This will scatter the items on creation and shuffle each item to a random location within the bounds of the container.

• speed (int) [Default: 1000] This is the time it take for one shuffle to be completed.

• tag (string) [Default 'img'] This sets the type of child-tag that is shuffled within the container.

CALLBACKS

The following are the callbacks available for the plugin:

• afterCreate(shuffleboard) This is called after the shuffleboard is created.

• beforeCreate(shuffleboard) This is called before the shuffleboard is created.

• beforeDestroy(shuffleboard) This is called before the shuffleboard is destroyed.

• afterScatter(shuffleboard) This is called after the items are scattered on the shuffleboard.

• beforeScatter(shuffleboard) This is called before the items are scattered on the shuffleboard.

• afterShuffle(shuffleboard, item) This is called after an item is shuffled.

• beforeShuffle(shuffleboard, item) This is called before an item is shuffled.

METHODS

The following are the methods available for the plugin:

• create(options) This is the function used to create a new Shuffleboard from an element. It accepts an optional 'options' parameter which is an object containing the settings as listed above. In addition to the settings, several callback functions can also be set from within the options.

• destroy() This function destroys an existing Shuffleboard.

• option(optionName) This function gets the value of a option.

• option(optionName, optionValue) This functions sets the value of a option.

• option(options) This function accepts a map of option name and value pairs and sets each one.

• reindex() This function assigns the correct z-index to all the items in the the shuffleboard.

• scatter() This function scatters the items around within the bounds of the shuffleboard. It will respect CSS padding values and make sure items do not get placed within the padding area (unless rotated).

• shuffle() This function shuffles the next item.

• start() This function starts the intervallic shuffling on the items.

• stop() This function stops the intervallic shuffling of the items.

• toggle() This function toggles the intervallic shuffling of the items.

CHANGE LOG

2011.08.25 - Added callbacks and the 'option' method.

2011.08.24 - Added code for CSS3 rotations and selecting the corner to shuffle over. Fixed a bug with non-randomized shuffling. Added the 'toggle' method.

2011.08.23 - Added to GitHub.