We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
Shape
Types
Shape
A shape is a three dimensional object including any flat content as a side.
Steve Jobes
Steve Jobes is a fictional character designed to resemble someone familiar to readers.
Joined in 2014
151 Friends
Stevie Feliciano
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
Getting Started
Required Markup
Shapes can have any arbitrary content, just wrap each side in side
<div class="ui shape">
<div class="sides">
<div class="active side">This side starts visible.</div>
<div class="side">This is yet another side</div>
<div class="side">This is the last side</div>
</div>
</div>Animating with Javascript
Animations use CSS3 transitions and Javascript to set-up the correct conditions.
Initializing a shape
$('.shape').shape();Transitions automatically assume next side is the next sibling (or first if last element)
$('.shape').shape('flip up');To manually set the next side to appear use a selector or jQuery object
$('.shape')
.shape('set next side', '.second.side')
.shape('flip up')
;Any internal method can be invoked programmatically
$('.shape').shape('repaint');Behavior
All the following behaviors can be called using the syntax:
$('.your.element')
.shape('behavior name', argumentOne, argumentTwo)
;| Behavior | Description |
|---|---|
| flip up | Flips the shape upward |
| flip down | Flips the shape downward |
| flip right | Flips the shape right |
| flip left | Flips the shape left |
| flip over | Flips the shape over clock-wise |
| flip back | Flips the shape over counter-clockwise |
| set next side(selector) | Set the next side to a specific selector |
| is animating | Returns whether shape is currently animating |
| reset | Removes all inline styles |
| queue(animation) | Queues an animationtill after current animation |
| repaint | Forces a reflow on element |
| set default side | Set the next side to next sibling to active element |
| set stage size | Sets shape to the content size of the next side |
| refresh | Refreshes the selector cache for element sides |
| get transform down | Returns translation for next side staged below |
| get transform left | Returns translation for next side staged left |
| get transform right | Returns translation for next side staged right |
| get transform up | Returns translation for next side staged up |
| get transform down | Returns translation for next side staged down |
Shape Settings
Shape settings modify the shape's behavior
| Setting | Default | Description |
|---|---|---|
| duration | 700ms | Duration of side change animation |
| width 2.2 |
initial |
When set to
next will use the width of the next side during the shape's animation.When set to
initial it will use the width of the shape at initialization.When set to a specifix pixel height, will force the width to that height.
|
| height 2.2 |
initial |
When set to
next will use the height of the next side during the shape's animation.When set to
initial it will use the height of the shape at initialization.When set to a specifix pixel height, will force the height to that height.
|
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| beforeChange | Next Side | Is called before side change |
| onChange | Active Side | Is called after visible side change |
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | shape | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
|
|
| className |
|
|
Debug Settings
Debug settings controls debug output to the console
| Setting | Default | Description |
|---|---|---|
| name | Shape | Name used in debug logs |
| silent | False | Silences all console output including error messages, regardless of other debug settings. |
| debug | False | Provides standard debug output to console |
| performance | True | Provides standard debug output to console |
| verbose | True | Provides ancillary debug output to console |
| error |
|
|