Skip to content

Latest commit

 

History

History
144 lines (87 loc) · 3.65 KB

README.md

File metadata and controls

144 lines (87 loc) · 3.65 KB
Raw

diamonds.js

Tired of straight grids where everything is vertically and horizontally aligned? Why not tilt everything by 45 degrees? This jQuery plugin lets you easily do just that!

Features

  • Auto resizes
  • No images, all css
  • AMD aware plugin
  • Test coverage!

Demo

See the demo page or checkout /demo/demo.html in this repo.

Usage

Add this to your <head>

<link rel="stylesheet" type="text/css" href="diamonds.css" />

Add this right before your closing </body>

<script type="text/javascript" src="jquery.diamonds.js"></script>

Note: The path may change depending on where you put the css file.

html

<div class="diamondswrap">
    <a href="#" class="item">Hello world</a>
    <a href="#" class="item">Hello</a>
    <a href="#" class="item">Hello</a>
    ... many more items!
</div>

js

$(".diamondswrap").diamonds({
    size: 250, // Size of the squares
    gap: 1 // Pixels between squares
});

Options

size

Size of diamonds in pixels. Both width and height. Only squares allowed.

gap

Pixels between each square. The size of the squares will be reduced by this gap.

itemSelector

The css selector to use to select diamonds-items.
Default: .item

hideIncompleteRow

Hide last row if there are not enough items to fill it completely.
Default: false

autoRedraw

Auto redraw diamonds when it detects resizing.
Default: true

Methods

Intialize

$(".diamondswrap").diamonds({
    size: 250, // Size of the squares
    gap: 1 // Pixels between squares
});

Note: Calling any other method before diamonds has been initialized will cause an error to be thrown.

draw

Manually trigger a redraw.

$(".diamondswrap").diamonds("draw");

setOptions

Change options after initialize

$(".diamondswrap").diamonds("setOptions", {
    hideIncompleteRow: true
});

Note: Changing options will trigger a redraw since size, gap, or hideIncompleteRow might have changed..

destroy

Destroy diamonds and return everything to how it was.

$(".diamondswrap").diamonds("destroy");

Events

All events are prefixed with diamonds:. Which means that this is how you listen to a diamonds event:

$(...).on("diamonds:beforeDraw", function() { ... })

Some events are also called with arguments. One such event is beforeSetOptions. This is how you catch the arguments.

$(...).on("diamonds:beforeSetOptions", function(event, newOptions) {
	newOptions.gap = 10; // Always set the gap to 10
});

Some events can also abort the method by calling .preventDefault, for example if you want to prevent all drawing.

$(...).on("diamonds:beforeDraw", function(event) {
	event.preventDefault(); // Stops the draw method
});

As a rule of thumb, all events starting with before or on can abort the method.

Events Arguments Can abort method
beforeInit yes
afterInit no
beforeStopAutoRedraw yes
afterStopAutoRedraw no
beforeStartAutoRedraw yes
onAutoResize { before: ... , current: ... } yes
afterStartAutoRedraw no
beforeSetOptions new options yes
afterSetOptions new options no
beforeDraw yes
afterDraw no
beforeDestroy yes
afterDestroy no