Думаю, парень спрашивает, как сделать такой блок, а не просто рисовку. То есть, например, чтобы контент блока увеличивал его по высоте и вёрстка не ехала.
Находите все строки, в каждой строке для нужных ячеек проверяете контент, если контент - число, то прибавляете это число к сумме, а также добавляете единицу к счетчику ячеек. После пробега по ячейкам добавляете в ячейку со средним значением отношение суммы и числа, сохраненного в счетчике.
Shakhrom Mukumov: ну если вы считаете, что это сложно, то на самом деле нет же, мы просто 1) кешируем элементы, 2) вешаем обработчики, 3) устанавливаем дефолтное значение для muted
Обработчики разделены - по клику на кнопку меняется muted, а по смене muted меняются стили для кнопки.
К слову, я сразу же увидел одну большую ошибку в этом коде, она здесь: $video.on('volumechange', changeButtonStyle);. Volumechange будет срабатывать в том числе просто по изменению громкости, стили кнопки будут меняться без всякого смысла.
...с точки зрения построения грида на inline-block элементах неверна, т.к. здесь много лишних пробельных символов, целых три группы: вокруг колонок, как между, так и по краям, рядом с тегами родительского контейнера. Крайние конечно не имеют значения, но выглядит это всё так.
Можно попросить CSS игнорировать текстовые переносы, тогда станет так. Текстовые ноды всё равно видны.
Как я уже говорил, достаточно в исходном коде убрать группы пробельных символов между тегами, тогда всё встанет на свои места: вот так.
Я не утверждаю, но мне кажется, что jade для этого не подходит, т.к. он whitespace-sensitive, но всё же, думаю, если вы хотите кроссбраузерно (IE8+) использовать простые и понятные гриды, есть смысл запариться с адаптацией этого подхода к используемому вами инструменту верстки. И сам тоже к сожалению не знаю, как можно уломать janejade на такое.
Никита Кит: я понял о чем вы. Вы просто сдвигаете колонки вместо того, чтоб избавляться от промежуточных текстовых нод с пробелами; font-size: 0 не канает уже для первого уровня вложенности. Такое происходит ввиду режима inline-block: т.к. блоки строчные, все символы имеют значение, в том числе пробельные (\n\t\r в исходном коде) - они группируются в ноды, имеющие ненулевую ширину. Вот.
Для создания гридов с помощью inline-block просто убирают лишние \n\t\r. Обычно такое используют при верстке с использованием шаблонизаторов, сборщиков и прочего софта, осуществляющего генерацию кода; руками конечно это не очень приятно делать. В самом простом варианте это выглядит так.
