Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A dynamic mess organizer plugin
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dependency
example
src
.gitignore
LICENSE
README.md

README.md

jQuery Chaos

A dynamic mess organizer plugin

Live Example: http://tulios.github.com/jquery.chaos/

Dependencies

Usage

$("#container").chaos();
<div id="container">
  <div class="atom small" style="left: 10px; top: 30px;">Text 1</div>
  <div class="atom big" style="left: 20px; top: 20px;">Text 2</div>
</div>
#container {
  position: relative;
}

.atom {
  position: absolute;
}

.atom.effect {
  -webkit-transition-property: -webkit-transform, opacity, height;
  -moz-transition-property: -moz-transform, opacity, height;
  -o-transition-property: -o-transform, opacity, height;
  -ms-transition-property: -ms-transform, opacity, height;
  transition-property: transform, opacity, height;

  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

How to organize the container?

$("#container").chaos().organize();

How to invert the order of organization?

$("#container").chaos().organize({order: "reverse"});

How to get back to the original format?

$("#container").chaos().original();

How to filter by css classes?

.atom.hide {
  opacity: 0;
}
$("#container").chaos().organize({
  selector: ".small",
  beforeAnimation: function() {
    $(".atom").addClass("hide");
    $(".small").removeClass("hide");
  }
});

Plugin initialization

Options

  • elementSelector (default: ".atom"): The basic element selector
  • effectClass (default: "effect"): The effect class
  • padding (default: 10): The amount of padding added during an element organization
  • columnWidth (default: null): The column width is calculated based on the small element. Use this option to fix the width

Callbacks

  • beforeInitialization(element): Called before the element setup
  • beforeElementAnimation(element, {top: X, left: Y}): Called before the element animation
  • beforeAnimation: Called before starting the animation
  • afterAnimation: Called after the animation
  • animateFunction(element, {top: X, left: Y}): Overrides the css animation function
  • animateFallbackFunction(element, {top: X, left: Y}): Overrides the fallback animation function
$("#container").chaos({
  elementSelector: ".atom",
  effectClass: "effect",
  padding: 10,
  columnWidth: null,
  beforeInitialization: function(element) {},
  beforeElementAnimation: function(element, opts) {},
  beforeAnimation: function() {},
  afterAnimation: function() {},
  animateFunction: null,
  animateFallbackFunction: null
});

Methods

chaos

Retrieves the current chaos instance of the container.

$("#container").chaos();

original

Animates the elements to the original position. Accepts a selector to restrict the manipulated elements. Accepts before and after callbacks.

$("#container").chaos().original({
  selector: "",
  beforeAnimation: function() {},
  afterAnimation: function() {},
  afterElementAnimation: function(element){}
});

organize

Animates the elements to fit the space of container and avoids collisions. Organize will invert the elements if order: "reverse" is used. Accepts a selector to restrict the manipulated elements. Accepts before and after callbacks.

$("#container").chaos().organize({
  order: ""
  selector: "",
  beforeAnimation: function() {},
  afterAnimation: function() {},
  afterElementAnimation: function(element){}
});

updateOptions

Updates the options/callbacks configured in initialization.

$("#container").chaos().updateOptions({
  padding: 15
});

setup

Setup new elements.

$("#container").chaos().setup($(".atom.new"));

Maintainers

Túlio Ornelas

License

Copyright 2012 Túlio Ornelas. See LICENSE for more details.

Something went wrong with that request. Please try again.