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. Обычно такое используют при верстке с использованием шаблонизаторов, сборщиков и прочего софта, осуществляющего генерацию кода; руками конечно это не очень приятно делать. В самом простом варианте это выглядит так.
Никита Кит: во-первых, почему лажа? inline-block это вроде бы норм. Расскажите какие у вас с ним проблемы, очень интересно.
Во-вторых, по поводу float мне тоже кажется, что вы просто не учли какой-то мелочи, потому что я ни разу не видел, чтобы с ним были нерешаемые проблемы такого рода.
Если покажете пример и того и другого - было бы очень круто.
Объясню свой интерес: я использую оба варианта и никогда с ними не было никаких проблем.
Во-первых, мне кажется проще изначально верстать по-другому, чем скриптами исправлять недочёты выбранного вами варианта верстки. Во-вторых, я понимаю конечно что это ваша вёрстка, вы в ней знаете какие элементы за что отвечают и знаете какие элементы floated, а какие - нет. Но всё же Брать все элементы с css('float') - это какая-то дичь. Вероятно, проще было бы на нужные элементы/контейнеры повесить классы, на которые можно было бы опираться. Кстати, если я не ошибаюсь, по запросу jquery equal height можно найти готовые скрипты в интернетах.
Прямо невозможно? Вроде бы здесь написано, что main purpose of recursion [in regex] is to match balanced constructs or nested constructs; разве это не о том речь?
И да, вы правы, можно разбить всё это дело на этапы, но, как я уже писал в комментариях ниже, использование единственного регулярного выражения позволило бы использовать нативный для саблайма find/replace, это было бы очень круто.
