Задать вопрос
  • Как привязать alert к input?

    @BelkinVadim
    Frontend разработчик
    <input value="Нажми меня" onclick="alert('пауза!')" onkeydown="alert('пауза!')" type="button">

    Либо через jQuery как написали выше, или addEventListener.
    Любой из этих способов подойдет, но только onkeydown сработает на кнопке если на ней есть фокус. Ушел фокус с кнопки - onkeydown не сработает
    Ответ написан
    Комментировать
  • Есть какой то скрипт для версии для слабовидящих?

    @BelkinVadim
    Frontend разработчик
    Сомневаюсь что такой скрипт есть. В целом, все сайты уникальны в верстке, стилях и контенте и по этому я думаю что нет такого скрипта, который для вас сделает все. В версии для слабовидящих нужны и соответствующие размеры элементов UI и текста в целом, подходящая контрастность и т.п. Есть сервисы которые могут проанализировать страницу(цы) вашего сайта и указать на недостатки (плохая контрастность, мелкие элементы), но за вас исправить это на странице они не могут. Дизайн и верстка могут быть уникальными и скрипт не может знать все особенности интерфейса. Даже если скрипт каким-то чудом на основе данных сервисов проверки сможет исправить размеры, цвета для контрастности, то я сомневаюсь что при этом не сломается интерфейс.
    Все равно придется дорабатывать значительную часть работы самому.
    Лучше на стадии дизайна и верстки сразу решить проблемы с контрастностью. Проблему мелких размеров можно решить зумом в браузере, но я бы все равно предложил это сразу учесть и сделать изначально UI с нормальными размерами.

    Видел много сайтов, где отдельно делалась версия для слабовидящих, либо на основе текущей верстки, либо на облегченной. Но все сделано так небрежно, что я бы не сказал что для слабовидящих они лучше обычных. Не делайте версию для слабовидящих для галочки, сделайте её хорошо. Смысл в больших размерах текста и кнопок, высокой контрастности или тупо черно-белый интерфейс, когда местами едет весь UI, накладывается что-то друг на друга. Какая от этого польза для слабовидящих, когда UI хоть и контрастный и большого размера, но никак не удобный для восприятия?
    Ответ написан
  • Как поставить несколько секций на якорную ссылку?

    @BelkinVadim
    Frontend разработчик
    Сделайте секциям разные id, а в меню в нужном пункте вместо одной ссылке сделайте две (каждая на свою секцию) и в зависимости от устройства скрывайте либо ссылку на мобильную секцию, либо ссылку на ПК секцию через медиа выражения. Т.е. визуально у вас будет один якорный пункт в меню (т.к. второй будет скрыт), но фактически два одинаковых, но с разными якорями.

    Если у вас секции показываются либо одна либо другая в зависимости от экрана и они в верстке рядом, то можно их обернуть в общий блок с id на который будет ссылаться ваша ссылка в меню
    Ответ написан
  • Можно ли заставить owl carousel листать сразу по несколько слайдов?

    @BelkinVadim
    Frontend разработчик
    Customizing, параметр scrollPerPage вроде за это отвечает. Будет листать не по одному, а сразу все слайды на странице.
    Ответ написан
    1 комментарий
  • Проверка валидности полей формы?

    @BelkinVadim
    Frontend разработчик
    Ответ написан
    Комментировать
  • Можно ли упаковать шрифт в HTML файл?

    @BelkinVadim
    Frontend разработчик
    Можете. В css вместо url на шрифт указываете data:URI. Чтобы такое подключение было именно в html, можете вписать встроенные стили с подключением шрифта, вместо использования подключения шрифта в отдельном css файле.
    Ответ написан
    Комментировать
  • Почему при css transform scale делает картинку размытой?

    @BelkinVadim
    Frontend разработчик
    Наверное потому что изначально у вас картинка оригинального размера, а при увеличение она, как и все растровые изображения, теряет качество.
    Ответ написан
    Комментировать
  • Зачем отказываться от готовых сеток?

    @BelkinVadim
    Frontend разработчик
    Не совсем понятно, что имеется в виду по "написать свою сетку".
    Если рассматривать способы реализации сеток, то их не так уж и много (float, flexbox или inline-block даже). Так что свой способ реализации придумать уже не получится, все самое простое и верное уже придумали и реализовали.
    Название классов - это уже дело вкуса, а кол-во колонок зависит от потребностей так сказать. В итоге все самописные сетки это те же самые сетки из популярных css фреймворков. Самые распространенные сетки с колонками через float или уже на flexbox.
    В итоге получается самописная сетка это кастомизация уже существующей системы, где вы назначаете или выбираете:
    1. Названия классов для элементов сетки (row и col-**, grig и grid__column или т.п.)
    2. Метод выстраивания сетки (через float как в bootstrap 2/3 и др.; flex как в bootstrap 4, foundation 6 и др.; или display: inline-block, со своими плюсами и минусами). В зависимости от метода у вам могут быть доступны доп.возможности по работе с сеткой (например при использование flexbox)
    3. Кол-во колонок сетки (будь то часто используемая 12-ти колоночная, или свое ко-во);
    Ответ написан
    Комментировать
  • В чем протестить верстку?

    @BelkinVadim
    Frontend разработчик
    Сам аналогов не встречал ещё, да и не искал. Но сам до использования browserStack тестировал на iOS симуляторе в виртуальной машине OSX и android в Android SDK. Не лучшие варианты, но если ресурсы компа позволяют и как бесплатные варианты.
    Ответ написан
    Комментировать
  • Как такое сверстать?

    @BelkinVadim
    Frontend разработчик
    Можно вообще градиентом и multiple backgrounds для одного элемента сделать.
    https://jsfiddle.net/oreda13p/1/

    А вообще от конкретных целей и поддерживаемых браузеров зависит. Можно и тремя элементами (или одним тегом + :before, :after) с определенными параметрами transform сделать.
    https://jsfiddle.net/oreda13p/2/

    А может проще и вообще фоновой картинкой.
    Ответ написан
    Комментировать
  • Флекс элементы в одну строку, как сделать каждый на новой?

    @BelkinVadim
    Frontend разработчик
    Можно через flex: 1 1 100%; и flex-wrap: wrap; растянуть их на 100% ширины и расположить каждый на своей строке, в этом нет ничего плохого и неправильного. Либо как предложили уже flex-direction: column. Оба способа подойдут для подобного расположения.
    Ответ написан
    Комментировать
  • Вёрстка на flex, space-between и выравнивание по левому краю. Внимание вопрос?

    @BelkinVadim
    Frontend разработчик
    С использованием justify-content: space-between; никак. Обычно в таких случаях используют простую адаптивную сетку с выравниваем по левому краю, ширина колонок задается в процентах, а отступы между колонок либо через margin либо padding.
    Ответ написан
    2 комментария
  • Запуск Mac OS X 10.9 на Windows 8 в VMware Workstation?

    @BelkinVadim
    Frontend разработчик
    Сам долго мучался с подобной проблемой. OS X Yosemite, OS X El Capitan так же загружались до половины примерно и не запускались. На rutracker в одной из раздач пару подсказок дали. Вообщем для запуска использовал VMware Player 12, после установки применить unlocker нужно (без него OS X не запустится), при этом нужно чтобы в пути к unlocker не было папок на русском и выключен антивирус. Запускать win-install от имени администратора. После таких манипуляций все заработало. Хоть и поздний ответ, думаю кому-нибудь и пригодится.
    Ответ написан
    3 комментария
  • Как элегантней создать подменю?

    @BelkinVadim
    Frontend разработчик
    codepen.io/anon/pen/VvRyVB

    Выделите два вида меню: главное (верхнее горизонтальное) и выпадающее.
    Все выпадающие меню с одним классом. Для вложенных выпадающих (когда одно выпадающее в другом) выравнивание через top: 0; и left: 100%; Через доп.классы родительскому li можно настраивать позицию выпадающего (влево, вправо и т.п.)

    В примере думаю разберетесь.
    Ответ написан
    1 комментарий
  • Почему stylus неверно генерирует css(пропускает; и т.п)?

    @BelkinVadim
    Frontend разработчик
    Если из stylus в css что-то не правильно генерируется, то это либо у вас ошибки (синтаксис и т.п), либо это косяки генератора. Чем генерируете css из stylus?
    Ответ написан
    Комментировать
  • Где найти стильные checkbox, select, radio?

    @BelkinVadim
    Frontend разработчик
    15+ jQuery Radio Button & Checkbox Style Plugins или 35+ jQuery CheckBox Plugin with Examples. Выбирайте наиболее удобные для вас плагины. А стилизацию уже сами можете сделать какую хотите, не обязательно же дефолтную от плагина использовать.
    Ответ написан
    Комментировать
  • Аналог Scrollspy bootstrap?

    @BelkinVadim
    Frontend разработчик
    Uikit - scrollspy, Foundation Zurb- magellan, ещё в Semantic-ui какой-то подобный плагин используется
    Ответ написан
    Комментировать
  • Как подстроить input под экран телефона?

    @BelkinVadim
    Frontend разработчик
    Что вы подразумеваете под размерами? Высоту или ширину или все вместе? Для ширины используйте
    input {
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; 
    }

    Тогда у вас всегда будет растягиваться на всю ширину родительского блока.
    Ответ написан
    1 комментарий
  • Почему не запускается антивирус касперского 2016 на windows10?

    @BelkinVadim
    Frontend разработчик
    У вас десятка официальная или инсайдерская? Какой именно касперский ставите? На инсайдерскую и официальную десятку ставил на днях kaspersky total security 2015 и 2016 - установились без проблем (правда 2015 версию ОС не запустила веб установщик, переименовал - все заработало.) Отсюда качали касперского? Так же на форумах касперского читал что они вроде намерено сделали подобное на каких то версиях антивируса. Полноценную рабочую версию в августе только обещали.
    Ответ написан
  • Установка Windows 10 на чистый диск используя ключ от Windows 8.1. Так можно?

    @BelkinVadim
    Frontend разработчик
    Так же интересует такой вопрос. На сколько я знаю, если обновить установленную ОС (лицензию) до десятки, то последующая чистая установка десятки будет возможна с ключом прежней ОС, если конечно я правильно понял. Про чистую установку десятки с ключом необновленной другой версии Windows так же не нашёл информации
    Ответ написан
    4 комментария