Dirty Drawers

Use these buttons to see the DirtyDrawers up close and personal. The blue bottom is also activated by hovering over the playground, or by clicking on mobile.

The Playground

This area should give a little idea of some of the ways that you can play around with the Dirty Drawers API. The current transitions are smooth transform translates. But they could just as easily be altered or improved.

A footer will open and close a little

A header will open and close.

This drawer will push white.

Get the code in the Github Repository

Instructions

Using Dirty Drawers is fairly simple, but there are quite a lot of options. DirtyDrawers does require jquery in order to handle advanced event delegation.

Drawers

var drawer = new DirtyDrawer( target, attachment, openStart (,[buttons]) );

Drawers expect a couple of values when instantiated

target (string): Target selector. Use this to set the selector for the parent of the drawer.
attachment (string): An attachment direction. Options are: top, right, bottom, or left.
openStart (boolean): Whether to close the drawer initially. Set the initial state of the drawer.
buttons (array) (optional): List of buttons to activate drawer. These can be added individually later, using the .delegateButton() method of a DirtyDrawer.

Buttons

drawer.delegateButton({ delegatee:delegatee, func:function, delegator:delegator, event:event, mod:modification })

Buttons can be created at instantiation of Drawers, or they can be added later or dynamically with the .delegateButton() method of a DirtyDrawer.

delegatee (string): A selector for the button object. This will be the object that activates a DirtyDrawer.
function (string): An option for which DirtyDrawer function to call. There are a number of preset functions to call. Toggle, Close, Open, Percentage, Offset, and Function
delegator (boolean) (optional): A selector for the parent object to delegate the button click to. Defaults to the body. This allows dynamic buttons to be added and removed without the need to constantly add event listeners.
event (array) (optional): The event listener to activate the DirtyDrawer. Defaults to click.
modification (various) (optional): Modification value for the Percentage, Offset, or Function methods.