Ответы пользователя по тегу JavaScript
  • Как сделать прокрутку мышью и пальцем на телефоне блока с overflow: scroll или hidden?

    @BelkinVadim
    Frontend разработчик
    Гуглите по запросу "кастомный скролл на js" и смотрите готовые решения. Либо реализуйте сами, тут не так сложно же: делаете блок с overflow: hidden, который скрывает переполнение контента и убирает нативный скролл (у вас это будет practices_list_wrapper), слушаете события касания/нажатия для определения начального положения курсора или нажатия, затем слушаете событие перемещения мыши или тача и высчитываете значение на которое изменилось положение курсора - вот на это значение смещаете внутренний блок practices_list внутри practices_list_wrapper имитируя сдвиг при скролле
    Ответ написан
    Комментировать
  • Почему не работает export/import в ES6?

    @BelkinVadim
    Frontend разработчик
    Первая ошибка - https://jakearchibald.com/2017/es-modules-in-brows...
    Вторая ошибка - добавьте расширение .js в путь импорта модуля - import { Person } from './matix.js'
    Ответ написан
    Комментировать
  • Какое лучше всего событие подобрать?

    @BelkinVadim
    Frontend разработчик
    Если нужно отлавливать события при каждом перемещении ползунка, то используйте mousemove или touchmove если еще и на тач.устройствах нужно ловить.
    Если нужно ловить события только при установки ползунка и отжатия кнопки мыши или тачпада (передвинули ползунок и отцепили его), то mouseup или touchend для тач.устройств.

    В обоих случаях начинать слушать эти события нужно только после нажатия на ползунок, т.е. после mousedown или touchstart вешаете обработчики на нужные события (на mousemove или на mouseup), в по срабатыванию mouseup или touchend убираете с них обработчики

    Еще совет, если вы используете чей-то плагин ползунка, то возможно там есть свои события, почитайте документацию
    Ответ написан
    Комментировать
  • Как правильно поправить код меню для отображения адаптивности в полноэкранном режиме?

    @BelkinVadim
    Frontend разработчик
    Если по-быстрому, то вынести из медиа выраженя все стили и удалить из скрипта все что связано с ресазом, примерно так. А если по-хорошему, то самому объединить стили из медиа выражения с обычными стилями
    Ответ написан
    Комментировать
  • Почему не ловит значение из CSS?

    @BelkinVadim
    Frontend разработчик
    Исправленный пример
    Стили прописанные в css (не инлайн), можно получить через getComputedStyle , через element.style их не получить.
    Еще инфа
    Ответ написан
    Комментировать
  • Как узнать высоту клавиатуры и нижнего бара на iOS Safari?

    @BelkinVadim
    Frontend разработчик
    Сам мучался с этой проблемой. На iOS клавиатура никак не влияет на размер окна и вьюпорт. Она просто открывается поверх окна и страницу при этом может как бы проскроллить вверх если место куда вводится текст находится в том месте где появится клавиатура. Причем скроллится на страница (html, body теги), а фиг знает что, т.к. событие скролла не отлавливалось.
    Пришлось выкручиваться так, я отлавливал событие фокус на полях ввода (вообще на всем что вызывает открытие клавиатуры), и по setTimeout в 500ms (клавиатура появлялась плавно и можно было правильно вычислить её размер только после открытия) выполнял следующее
    const innerHeight = window.innerHeight;
    document.body.style.height = innerHeight + 'px';
    document.documentElement.style.height = innerHeight + 'px';
    window.scrollTo(0, 0); // вообще по-хорошему тут к нужному элементу нужно скроллить, нули я для примера поставил


    решение не вау, и еще таймаут подводит если вдруг интерфейс тормознет и клавиатура появится с чуть большей задержкой, но другого к сожалению не придумал

    Ну и соответственно при закрытии клавиатуры (blur того же поля) нужно примененные стили сбрасывать
    document.body.style.height = '';
    document.documentElement.style.height = '';
    Ответ написан
    Комментировать
  • Можно ли не очищать value input?

    @BelkinVadim
    Frontend разработчик
    Перехватывать только нажатия delete или backspace не вариант, ведь удалять можно еще через контекстное меню. Плюс можно выделить весь текст и нажать клавишу с каким-то символом и все заменится на жэтот символ - такой вариант допустим?
    Если задача такая что разрешено ТОЛЬКО дописываться к текущему значению, а удалять все или часть или заменять все или часть на что-то другое нельзя, то вам нужно хранить текущее значение поля и при изменении (лучше на событие input, если поддержка устроит) сравнивать его с новым. В случае если новое значение не содержит в себе предыдущее значение плюс новые символы, то возвращать исходное значение
    Пример, проверяется содержится ли в начале нового значения предыдущее значение, если да, то в переменных обновляем переменную текущего значения для дальнейшего сравнения с ним, если не содержит - устанавливаем предыдущее значение. Работает как с удалением по кнопкам, так и через контекстное меню
    Ответ написан
  • Почему может не появляться горизонтальный скролл в сафари?

    @BelkinVadim
    Frontend разработчик
    Помог бы живой пример, а так только догадки:
    1. Тупо нет переполнения ширины, ничто не выходит за границы ширины и не вызывает появление горизонтального скролла
    2. Даже есть внутри есть очень широкий контент, может быть такое что у него есть доп.обертка с overflow: hidden которая просто скрывает неуместившееся и переполнения по ширине в блоке с overflow: auto; не происходит
    3. Может где-то overflow: auto; переназначается другими стилями на overflow: hidden

    И инфа на всякий случай, если вы вдруг ожидаете появление скролла без переполнения контентом - его не будет без переполнения, чтобы обязательно был скролл без переполнения нужно использовать  overflow: scroll
    Ответ написан
  • Какую библиотеку для анимации использовать?

    @BelkinVadim
    Frontend разработчик
    Смотря какая анимация вам нужно и что под анимацией вы подразумиваете.
    Кто-то путает анимацию с плавными переходами между состояниями (CSS transition), в этом случае обходится все без библиотек, вы указываете стили элемента в одном состояние и указываете какие свойства должны плавно меняться, затем пишите стили для другого состояния где изменены плавноизменяемые свойства. При изменении состояния будет плавное изменение свойств.
    Есть именно CSS animation, где вы описываете саму анимацию и применяете её к нужным элементам. Есть разные библиотеки с наборами анимаций которые вы можете использовать у себя просто подключив или скопировав себе стили самой анимации и применив её в нужном месте. Например
    Бывают случаи когда анимация может создаваться динамически в зависимости от положения элемента, координат клика и прочих изменяемых и вычисляемых параметров. В таких случаях можно комбинировать JS и CSS для получения нужного результата, на JS вычисляете необходимые параметры и на их основе либо задаете свойства для анимации или плавных переходов.
    Ответ написан
  • В чём проблема разницы расчёта ширины экрана?

    @BelkinVadim
    Frontend разработчик
    Возможно это поможет разобраться
    Ответ написан
    Комментировать
  • Как задать ширину 100% блоку?

    @BelkinVadim
    Frontend разработчик
    Вам нужно растянуть контейнер на весь экран, самый простой вариант это ширина 100%, затем сами слайды так же должны быть на весь экран - так же 100% ширина. А следующий шаг это сделать слайды в одну строку и скрыть те что не умещаются - тут вариантов несколько, можно на флексах с запретом переноса (он по-умолчанию), можно на инлайн блоках с запретом переноса.
    Ответ написан
    Комментировать
  • ES6 модули на локалке. Или как обойти CORS?

    @BelkinVadim
    Frontend разработчик
    Не пробовал, но возможно какие-то расширения для браузера помогут (типа такого)

    Сам, кстати, с подобной проблемой сталкивался и мне помогла сама IDE. Пользуюсь WebStorm, он же при открытии страниц через саму IDE открывает страницы в localhost, не вникал в суть, но видимо сама IDE создает что-то вроде локального сервера (без nodejs, своими силами так сказать). Единственный нюанс, для работы с импортами в настройках нужно включить https://monosnap.com/file/RvlDRly1x2GfEWkeVXBOqFmk... иначе при открытии или обновлении страницы IDE будет запрашивать разрешение на каждый импортируемый ресурс, что очень неудобно
    Ответ написан
  • Как исправить баг на Firefox c select?

    @BelkinVadim
    Frontend разработчик
    Видимо в ФФ при наведении на пункты select с блока пропадает hover. Возможно выходом будет привязываться как-то к focus на селект. CSS'ный focus-within возможно поможет или скриптами при фокусе на селект добавлять класс для блока через который селект будет так же виден аналогично ховеру
    Ответ написан
    Комментировать
  • Как отменить наследование opacity?

    @BelkinVadim
    Frontend разработчик
    opacity не наследуется, если нужно изменить прозрачность фона, то используйте rgba цвет, если же именно opacity нужно изменить, то необходимо за данный блок вынести все что не должно становится полупрозрачным https://codepen.io/anon/pen/zpVBod
    Ответ написан
    Комментировать
  • Как привязать alert к input?

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

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

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

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

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

    @BelkinVadim
    Frontend разработчик
    Ответ написан
    Комментировать
  • Как зафиксировать блоки страницы?

    @BelkinVadim
    Frontend разработчик
    Ищите плагин jquery sticky какой-нибудь, выбирайте подходящий для вас. Мне больше нравится sticky плагин Sticky / Semantic UI, легко настраивается нужное место начала и конца фиксации.
    Ответ написан
    1 комментарий
  • Какой выбрать css фреймворк для быстрой разработки сайта?

    @BelkinVadim
    Frontend разработчик
    Semantic UI объемный достаточно (хотя реализация jQuery плагинов на Bootstrap больше нравится).
    А так основные это Bootstrap, Foundation Zurb, UIKit и Semantic UI, ну по крайней мере сам в основном ими пользуюсь/или их UI элементами
    Ответ написан
    1 комментарий