Blue Investments

Filter

Sort

Mercury

Hg

80

200.59

Tellurium

Te

52

127.6

Bismuth

Bi

83

208.980

Lead

Pb

82

207.2

Gold

Au

79

196.967

Potassium

K

19

39.0983

Sodium

Na

11

22.99

Cadmium

Cd

48

112.411

Calcium

Ca

20

40.078

Rhenium

Re

75

186.207

Thallium

Tl

81

204.383

Antimony

Sb

51

121.76

Cobalt

Co

27

58.933

Ytterbium

Yb

70

173.054

Argon

Ar

18

39.948

Nitrogen

N

7

14.007

Uranium

U

92

238.029

Plutonium

Pu

94

(244)

* { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- button ---- */ .button { display: inline-block; padding: 0.5em 1.0em; background: #EEE; border: none; border-radius: 7px; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); color: #222; font-family: sans-serif; font-size: 16px; text-shadow: 0 1px white; cursor: pointer; } .button:hover { background-color: #8CF; text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); color: #222; } .button:active, .button.is-checked { background-color: #28F; } .button.is-checked { color: white; text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); } .button:active { box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8); } /* ---- button-group ---- */ .button-group { margin-bottom: 20px; } .button-group:after { content: ''; display: block; clear: both; } .button-group .button { float: left; border-radius: 0; margin-left: 0; margin-right: 1px; } .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; } .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; } /* ---- isotope ---- */ .grid { border: 1px solid #333; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .element-item ---- */ .element-item { position: relative; float: left; width: 100px; height: 100px; margin: 5px; padding: 10px; background: #888; color: #262524; } .element-item > * { margin: 0; padding: 0; } .element-item .name { position: absolute; left: 10px; top: 60px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: normal; } .element-item .symbol { position: absolute; left: 10px; top: 0px; font-size: 42px; font-weight: bold; color: white; } .element-item .number { position: absolute; right: 8px; top: 5px; } .element-item .weight { position: absolute; left: 10px; top: 76px; font-size: 12px; } .element-item.alkali { background: #F00; background: hsl( 0, 100%, 50%); } .element-item.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } .element-item.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } .element-item.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } .element-item.transition { background: #0F8; background: hsl( 144, 100%, 50%); } .element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } .element-item.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } .element-item.diatomic { background: #00F; background: hsl( 252, 100%, 50%); } .element-item.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } .element-item.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } // external js: isotope.pkgd.js // init Isotope var $grid = $('.grid').isotope({ itemSelector: '.element-item', layoutMode: 'fitRows', getSortData: { name: '.name', symbol: '.symbol', number: '.number parseInt', category: '[data-category]', weight: function( itemElem ) { var weight = $( itemElem ).find('.weight').text(); return parseFloat( weight.replace( /[\(\)]/g, '') ); } } }); // filter functions var filterFns = { // show if number is greater than 50 numberGreaterThan50: function() { var number = $(this).find('.number').text(); return parseInt( number, 10 ) > 50; }, // show if name ends with -ium ium: function() { var name = $(this).find('.name').text(); return name.match( /ium$/ ); } }; // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[ filterValue ] || filterValue; $grid.isotope({ filter: filterValue }); }); // bind sort button click $('#sorts').on( 'click', 'button', function() { var sortByValue = $(this).attr('data-sort-by'); $grid.isotope({ sortBy: sortByValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); });