Метка: frontend

  • Bootstrap. Как отключить закрытие окна кликом за его пределами?

    В случае, когда модальное окно обязательно к прочтению или в нем, например, форма «Я соглашаюсь» — нельзя чтобы клиент имел возможность закрыть его без согласия. А это сделать ему очень просто — просто нажав за его пределами. В этой статье маленький пример, как отключить эту возможность. Для решения задачи у Вас есть два пути. Первый…

  • Yii2. Как прокрутить страницу к первому полю с ошибкой после валидации?

    Очень удобная для пользователя фишка — прокрутка страницы к первому полю с ошибкой в случае неуспешной валидации. В этой статье я напишу, как можно просто прокрутить страницу к первой ошибке после валидации yii2. Приведу пример с реального проекта: /** * Прокрутка полсле неудачной валидации */ $(«#form»).on(«afterValidate», function (event, messages) { if(typeof $(«.has-error»).first().offset() !== «undefined») {…

  • jQuery. Autocomplete. Как обновить данные в виджете?

    Плагин Autocomplete используется для быстрой подсказки пользователю вариантов ввода из определенного списка. Но в случае зависимости эти вариантов от других полей — обновление данных очень неочевидно. В этой статье — пример решения задачи. Самый простой пример — это зависимость условных моделей авто от марки. Когда пользователь выбрал Марку «Mercedes» — в поле модель ему должны…

  • Как прокрутить div вниз с помощью JavaScript и jQuery?

    Задача программной прокрутки вниз может быть актуальна, например, при разработке чата. Блок сообщений всегда должен быть внизу, а последние сообщения всегда должны быть видны. Очень короткое решение — в этой статье. Пример для нативного Javascript: element.scrollTop = element.scrollHeight Пример для jQuery использует scrollTop: var targetDiv = $(«#some-div»); targetDiv.scrollTop( targetDiv.prop(‘scrollHeight’) ); Оба эти примера позволят Вам…

  • Как отследить нажатие Ctrl+Enter с помощью jQuery?

    jQuery позволяет очень просто отслеживать комбинации клавиш. В этой статье — пример, как отследить нажатие Ctrl+Enter .на jQuery. На самом деле всё очень просто. Нам нужно использовать событие keydown и event, который генериурет нам jQuery. Например, если нам нужно отследить нажатие Ctrl+Enter на всех textarea: $(‘textarea’).on(‘keydown’, function(e) { if (e.ctrlKey && e.keyCode == 13) {…

  • jQuery. Как программно нажать на download-ссылку? (click trigger on download-link)

    В случае с download-ссылкой простой генерации триггера для нажатия на ссылку и соотв. начала скачивания, недостаточно. Требуется другой подход, пример которого в этой статье. Допустим, что у нас есть ссылка следующего вида: Скачать Чтобы програмно нажать на неё и вызвать диалог сохранения файла недостаточно вызвать привычный $(«#lnk»).trigger(«click»); Приведу примеры на jQuery и на нативном JS.…

  • DropZone. Как изменить текст по умолчанию?

    Если Вы встраиваете DropZone в клиентский интерфейс — вероятно Вам нужно будет изменить текст по умолчанию. В этой статье — параметр, который поможет в этом. В целом тема освещена в документации — но не всегда и не все ищут материал на оф. сайте продукта. В целом локализация DropZone происходит при помощи параметров с префиксом dict*.…

  • Bootstrap. Как сделать боковое всплывающее окно (sidebar modal)?

    В различных дизайнах и интерфейсах иногда уместно сделать модальное окно на всю высоту и прижатым к одной стороне. В статье — пример реализации этой идеи. По большому счету всё достаточно просто: К обычной разметке модального окна следует добавить новые классы left или right соответственно. Html: × Левый сайдбар Контент × Правый сайдбар Контент Также нужно…

  • OpenLayers3. Как изменить маркера и не сломать кластеризацию?

    Перемещение точек на карте в режиме реального времени задача достаточно специфическая. В этой статье пример, который поможет разобраться с задачей и решить её. Столкнувшись с подобной задачей и проведя достаточно времени за чтением документации и поиском примеров я нашел прекрасный пример, которым и хочу поделиться с Вами. Пример находится здесь. При внимательном рассмотрении всё стаёт…

  • jQuery. Как запретить контекстное меню (правую кнопку мыши) на изображениях?

    На некоторых сайтах от пользователей нужно скрыть возможность сохранения изображений. Конечно, от знающих людей это не скроешь — но от тех, кто не силён — вполне запросто можно. В статье — пример реализации на три строки. Всё, что Вам нужно — подключить сам jQuery и вставить следующий код: $(‘img’).bind(‘contextmenu’, function(e) { return false; }); При…