Filter

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

Filter by category:
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]$/);
  }
});