Docs - Magnet

Filter

Magnet uses filtering to show or hide items with the filter option. Items matching a filter will be shown, otherwise will be hidden.

Hydrogenium 1 H 1.008

Helium 2 He 4.002

Lithium 3 Li 6.94

Beryllium 4 Be 9.012

Borium 5 B 10.81

Carbonium 6 C 12.011

Nitrogenium 7 N 14.007

Oxygenium 8 O 15.999

Fluorum 9 F 18.998

Neon 10 Ne 20.179

Natrium 11 Na 22.989

Magnesium 12 Mg 24.305

Aluminium 13 Al 26.981

Silicium 14 Si 28.085

Phosphorus 15 P 30.973

Sulphur 16 S 32.06

Chlorum 17 Cl 35.45

Argon 18 Ar 39.948

Kalium 19 K 39.098

Calcium 20 Ca 40.078

Scandium 21 Sc 44.955

Titanium 22 Ti 47.867

Vanadium 23 V 50.941

Chromium 24 Cr 51.996

Manganum 25 Mn 54.938

Ferrum 26 Fe 55.845

Cobaltum 27 Co 58.933

Niccolum 28 Ni 58.693

Cuprum 29 Cu 63.546

Zincum 30 Zn 65.38

Gallium 31 Ga 69.723

Germanium 32 Ge 72.63

Arsenicum 33 As 74.921

Selenium 34 Se 78.971

Bromum 35 Br 79.904

Krypton 36 Kr 83.798

Rubidium 37 Rb 85.467

Strontium 38 Sr 87.62

Yttrium 39 Y 88.905

Zirconium 40 Zr 91.224

Niobium 41 Nb 92.906

Molybdenum 42 Mo 95.95

Technetium 43 Tc (98)

Ruthenium 44 Ru 101.07

Rhodium 45 Rh 102.905

Palladium 46 Pd 106.42

Argentum 47 Ag 107.868

Cadmium 48 Cd 112.414

Indium 49 In 114.818

Stannum 50 Sn 118.710

Stibium 51 Sb 121.760

Tellurium 52 Te 127.60

Iodum 53 I 126.904

Xenon 54 Xe 131.293

Caesium 55 Cs 132.905

Barium 56 Ba 137.327

Hafnium 72 Hf 178.49

Tantalum 73 Ta 180.947

Wolframium 74 W 183.84

Rhenium 75 Re 186.207

Osmium 76 Os 190.23

Iridium 77 Ir 192.217

Platinum 78 Pt 195.084

Aurum 79 Au 196.966

Hydrargyrum 80 Hg 200.59

Thallium 81 Tl 204.38

Plumbum 82 Pb 207.2

Bisemutum 83 Bi 208.980

Polonium 84 Po (209)

Astatum 85 At (210)

Radon 86 Rn (222)

Francium 87 Fr (223)

Radium 88 Ra (226)

Rutherfordium 104 Rf (267)

Dubnium 105 Db (268)

Seaborgium 106 Sg (271)

Bohrium 107 Bh (272)

Hassium 108 Hs (270)

Meitnerium 109 Mt (276)

Darmstadtium 110 Ds (281)

Roentgenium 111 Rg (280)

Copernicium 112 Cn (285)

Nihonium 113 Nh (284)

Flerovium 114 Fl (289)

Moscovium 115 Mc (288)

Livermorium 116 Lv (293)

Tennessine 117 Ts (294)

Oganesson 118 Og (294)

Lanthanum 57 La 138.905

Cerium 58 Ce 140.116

Praseodymium 59 Pr 140.907

Neodymium 60 Nd 144.242

Promethium 61 Pm (145)

Samarium 62 Sm 150.36

Europium 63 Eu 151.964

Gadolinium 64 Gd 157.25

Terbium 65 Tb 158.925

Dysprosium 66 Dy 162.500

Holmium 67 Ho 164.930

Erbium 68 Er 167.259

Thulium 69 Tm 168.934

Ytterbium 70 Yb 173.054

Lutetium 71 Lu 174.966

Actinium 89 Ac (227)

Thorium 90 Th 232.037

Protactinium 91 Pa 231.035

Uranium 92 U 238.028

Neptunium 93 Np (237)

Plutonium 94 Pu (244)

Americium 95 Am (243)

Curium 96 Cm (247)

Berkelium 97 Bk (247)

Californium 98 Cf (251)

Einsteinium 99 Es (252)

Fermium 100 Fm (257)

Mendelevium 101 Md (258)

Nobelium 102 No (259)

Lawrencium 103 Lr (262)

HTML

Items are filtered using selectors or functions. Using selectors, like classes, is the easiest way to filter items. Each item can have several classes to be identified:

<div class="grid">
  <div class="grid-item nonmetal">
  <div class="grid-item noble-gas">
  <div class="grid-item alkali metal">
  <div class="grid-item alkaline-earth metal">
  <div class="grid-item metalloid">
  ...
  <div class="grid-item transition metal">
</div>

Additionally, you can use any element to filter items with the data attribute. In this case, <button> and data-filter:

<div class="button-group filter-group">
  <button data-filter="*">All</button>
  <button data-filter=".nonmetal">Nonmetals</button>
  <button data-filter=".noble-gas">Noble Gases</button>
  <button data-filter=".metal">Metals</button>
  <button data-filter=".alkali.metal">Alkali Metals</button>
  <button data-filter=".metalloid">Metalloids</button>
</div>

jQuery

Set a selector with the filter option. Items matching a filter will be shown, otherwise will be hidden.

//Filter metal items
$('.grid').magnet({filter: '.metal'});

//Filter nonmetal or noble gas items
$('.grid').magnet({filter: '.nonmetal, .noble-gas'});

//Filter alkali and metal items
$('.grid').magnet({filter: '.alkali.metal'});

//Show all items
$('.grid').magnet({filter: '*'});

To filter items when a button is clicked, use the value in data-filter attribute for the filter option.

//Filter items on button click
$('.filter-group').click(function() {
  var filter = $(this).data('filter');
  $('.grid').magnet({filter: filter});
});

Items can be filtered using a function. The function requires a parameter elem, which is the item element selector, and must return the data.

$('.grid').magnet({
  filter: function(elem) {
    //Get text from .symbol element
    var symbol = $(elem).find('.symbol').text();
    //Return elements with one character symbol
    return symbol.match(/^[A-Z]$/);
  }
});