Таблица Менделеева

Не так давно изменилась привычная форма таблицы Менделеева. Новая принятая форма выглядит так:

Интерактивная таблица Менделеева

Искомые элементы подсвечиваются при вводе. Можно искать по названию (или его части), обозначению, атомной массе — короче говоря, по любому параметру из таблицы.

Посмотреть сервис в работе: Таблица Менделеева на xumuk.ru.

Фишка нашей таблицы в том, что она видоизменяется под экран устройства или под монитор, скрывая лишнюю информацию. На самом маленьком экране видны только обозначения элементов:

Таблица Менделеева на мобильном телефоне (320х240)

Таблица на HTC (480х800)

Вот так изменяются ячейки в зависимости от ширины экрана пользователя:

Ячейки таблицы Менделеева при различных разрешениях экрана

(На последней ячейке показано, как она изменяется при наведении.)

Подстраивать таблицу под нужную ширину помогает CSS-правило @media screen. Хотите разобраться — откройте CSS-файл таблицы, там всё просто. Эксплорер не поддерживает эти правила, поэтому для него пришлось написать скриптик, который присваивает нужный «глобальный» класс каждый раз при изменении ширины окна браузера. Чтобы ИЕ не подвис, скрипт работает с периодичностью в 300 мс.

Сначала мы пытались вписать эту версию таблицы в шаблон сайта, но в итоге отказались от этой идеи. Современная версия стала шире устаревшей (в ширину 18 ячеек против 10), и поэтому логично открывать таблицу сразу на полный экран. А чтобы не потерять связи с сайтом, была свёрстана сокращённая версия меню сайта: