Magnet – JavaScript Library and jQuery Plugin to Create Filterable and Sortable Layouts



Magnet is a vanilla JavaScript library and a jQuery plugin to create gapless, filterable and sortable layouts.

Magnet - JavaScript Library and jQuery Plugin to Create Filterable and Sortable Layouts - 1

New in Magnet 2

  • Removed jQuery dependency. Magnet has been rewritten in Vanilla JavaScript.
  • A bin- packing algorithm to create gapless layouts for ‘grid’ layout mode.
  • A new layout mode ‘grid’ that replaces ‘masonry’ and ‘tiles’, creating gapless layouts that can be filled from left to right or top to bottom.
  • Sorting.
  • Magnet now emits custom events.
  • New methods that extend Magnet’s functionality.
  • More options for a deeper customization.

Version Control

Version 2.0.3.
- Fixed: An error that caused the plugin to be unable to get items' sort data, therefore sorting was bugged in some cases.

Version 2.0.2.
- Fixed: A bug that was causing an error when initializing the plugin with JavaScript under certain circumstances, This has been fixed so that the error no longer exists, allowing to initialize with JavaScript normally.
- Fixed: A bug when getting the exact size of an element if it was set in percent. These values were rounded instead of staying as a floating point number, causing layouts to break if elements were rendered in sub-pixels. This has been corrected so that tthe size obtained stays as a floating point number.

Version 2.0.1.
- Fixed: A bug related to Event constructor that was causing the plugin not to work in IE11.
- Fixed: A bug that caused remove method not to remove items for certain arguments types passed.
- Updated: Documentation to 2.0.1.

Version 2.0.0.
- Added: 'grid' layout mode.
- Added: Sorting.
- Added: Events.
- Added: New methods.
- Added: New options.
- Removed: 'masonry', 'tiled' and 'static' layout modes.
- Updated: Documentation to 2.0.0.

Version 1.3.0.
- Updated: Documentation to 1.3.0.
- Added: Static layout mode.
- Added: Methods.
- Fixed: A bug that caused items not to hide when a filter was set via plugin options.

Version 1.2.1.
- Fixed: Issue with masonry layout mode. When first item of the row was higher than the rest of the items in that row, there were white spaces below this items, next row wasn't placed at the correct height.

Version 1.2.0.
- Updated: Documentation to 1.2.0 version.
- Added: New animation types. There are 5 different animations that trigger when filtering occurs. This can be set in options.
- Added: animationType option.
- Changed: Animation on plugin initialitation is removed.
- Changed: Way of getting the width value introduced in 1.1.1 version. Due to changes made to get items' size every time the window resizes, this method was causing a conflict when a filter was clicked.
- Fixed: Issue on masonry layout mode on window resize. This mode and tiled mode have been improved.
- Fixed: Issue when items resized on window resize. This size was expected to be the same as on initialization. Now this values are get every time window resizes.

Version 1.1.2.
- Updated: Documentation with new layout mode.
- Fixed: Small issue when getting exact container width on initialization.
- Added: New layout mode (tiled).

Version 1.1.1.
- Fixed: Issue when getting the value of the width set in percent of an element. jQuery got this value but it rounded to an integer causing layout breaks in some cases. Now, this value is returned as a float.

Version 1.1.0.
- Updated: Documentation with new option and a live demo in the footer
- Fixed: Wrong path on linked js in example
- Fixed: Minor bug setting a clicked filter as active
- Fixed: Minor bug when getting a filter on click event
- Added: New option gutter

Version 1.0.0.
- Released

Vendor Information

  • Store Name: HaundoDesign
  • Vendor: HaundoDesign
  • No ratings found yet!