Пример того, как можно сделать неоновое сердце с анимацией на JavaScript.

Все рисование происходит на canvas с использованием webgl

pic1


Категории: Web, JavaScript

Иногда нужно отреагировать на нажатие клавиш не на конкретонм элементе или в поле ввода, а на странице. Ниже приведу простенький сниппет на данную тему. Он просто отслеживает нажатие сочетания клавиш (горячих клавиш) ctrl + enter.


Категории: JavaScript, JQuery
Пометки: Если Вы нашли неточность в описании, то напишите нам (можно нажать ctrl + enter).

Иногда требуется отсортировать HTML таблицу, без обращения к серверу. Это можно спокойно сделать на простом JavaScript.


Категории: Web, JavaScript, HTML
Пометки: Сортируем HTML таблицу на JavaScript

Бывает нужно обратиться из родительского окна к элементу внутри iframe и передать или получить из него какие-либо данные.


Категории: JavaScript

Иногда необходимо произвести как-либо действия, если размер экрана изменился, но повесить событие onresize и выполнять весь код при любом изменении - бывает накладно по ресурсам.

Учитывая, что обычно действие требуется только при пересечении некоторого рубежа / брейкпоинта (например, только если ширина окна стала меньше 972px), то ниже будет примет решения такой задачи.


Категории: Web, JavaScript

Частая задача - красиво оформить поле для прикрепления файла.

Основной проблемой тут является то, что сам элемент input type="file" через CSS кастомизировать можно плохо, поэтому его просто скрывают и оформляют кнопку место его кнопку, ссылку, label...

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


Категории: Web, JavaScript, HTML, CSS
Пометки: css как красиво оформить прикрепленный файл (input file)

Часто бывает, что нужно обработать клик вне активного элемента (блока), например когда сделан кастомный выпадающий список.

Подобная проблема бывает когда используется всплывающее (модальное) окно, но там, чаще всего, есть слой с зтемнением, клик по которому и можно обработать.


Категории: JavaScript, JQuery
Пометки: Как проверить на клик за пределами элемента javascript, jQuery

Небольшой скрипт, который позволяет разместить на сайте кнопку "прокрутки к шапке" и интерактивным отображением процента прокрутки страницы.

Основная магия основана на css свойстве background-image: conic-gradient и возможность из JavaScript изменять css переменные.


Категории: JavaScript
Пометки: Красиво оформленный scrollup (плавная прокрутка до шапки)

Не всегда целесообразно добавлять в проект wysiwyg редактор, но все же требуется несколько базовых возможностей. Например, выделение текста жирным.


Категории: Web, JavaScript
Пометки: Получение выделенного текста в textarea, wysiwyg редактор

Небольшая заметка о библиотек Iconate.js, которая позволяет добавить разные анимации для кнопок и/или иконок на сайте.


Яндекс.Метрика