Categorize, sort, and filter a responsive grid of items
MIT License
Published by Vestride over 8 years ago
test/runner.html
.window
) as window.shuffle
instead of extending the jQuery prototype.Shuffle.EventType.LAYOUT
and Shuffle.EventType.REMOVED
. The loading
and done
events have been removed because initialization is now synchronous.CustomEvent
(a polyfill is included for IE11). This means that the data associated with the event is in the detail
property and if you're still using jQuery, you'll need to access the event data from the originalEvent
property jQuery adds to its event.shuffle
method has been renamed to filter
.appended
method has been renamed to add
. It expects only one parameter: an array of elements.filtered
=> shuffle-item--visible
, concealed
=> shuffle-item--hidden
. You can access (or change) these class names from Shuffle.Classes.VISIBLE
and Shuffle.Classes.HIDDEN
.Staggered animations. The new staggerAmount
option allows you to define an incremental transition delay in milliseconds for the items.
You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden. For example, if you want to add a 50% red background to every element:
Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';
Or maybe you want to set the text color to teal
after the item has finished moving:
Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';
Or, instead of items shrinking when they are hidden, make them grow:
Shuffle.ShuffleItem.Scale.HIDDEN = 2;
Published by Vestride about 10 years ago
This release includes refactoring of the plugin as well as bug fixes. Unit tests have been added and more documentation has been added. Some of the triggered events have been removed as well.
This release fixes #23 #26 #33 and #43.
Published by Vestride over 10 years ago
This fixes #25.
Published by Vestride over 10 years ago
Published by Vestride over 10 years ago
Shuffle can now be installed via bower.
bower install shufflejs
It now also supports AMD. To accomplish this and to make it easier to include Shuffle with other components, Modernizr has been separated into a separate file. This allows you keep Modernizr in the <head>
to prevent FOUT. There is now jquery.shuffle.modernizr.js
inside the dist/
folder, which includes the custom version of Modernizr as before. The custom modernizr build is also in the dist/
folder if you'd like to use it.
This closes #15.
Published by Vestride about 11 years ago
Finally adding my first tag.