Быстрый поиск
Введите фрагмент названия статьи для поиска
Прогрессбар с анимированным градиентом на CSS
19.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Прогрессбар с анимированным градиентом на CSS
Анимированный прогрессбар очень часто используется в приложениях для мобильных устройств. Но его также можно использовать и на сайтах, когда выполняется какой-то длительный процесс и надо создать у пользователя иллюзию, что приложение не зависло и что-то происходит прямо сейчас. Для анимации обычно применяется бегущий градиентный фон. Сегодня сделаем такой градиентный прогрессбар на чистом CSS, а "оживим" его с помощью JavaScript.
Читать статью целиком »
Просмотров: 76 | Комментариев: 0
Групповой выбор checkbox'ов на JavaScript
01.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Групповой выбор checkbox'ов на JavaScript
В некоторых пользовательских интерфейсах в рабочих проектах приходится сталкиваться с длинными таблицами. Одна из колонок в такой таблице - чекбокс, которым отмечаются строки, с которыми надо выполнить то или иное действие. При выборе пары-тройки чекбоксов проблем не возникает, один клик - один чекбокс. В шапке колонки есть мастер-чекбокс, с помощью которого можно отметить все или снять все галочки. А вот при необходимости отметить не все, но просто большое количество чекбоксов начинаются сложности. По одному делать это долго. Но ведь даже в стандартном Проводнике есть возможность выбирать последовательность файлов, отмечая чекбоксы с зажатой клавишей Shift. Такая идея мне понравилась и я перенес ее на веб-страницы.
Читать статью целиком »
Просмотров: 223 | Комментариев: 4
Открывающийся текст (спойлер) на CSS и JavaScript
03.03.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Открывающийся текст (спойлер) на CSS и JavaScript
Слово "спойлер" в современном интернете чаще всего используется в значении некой информации, которая заранее раскрывает важный сюжетный поворот или какую-то ключевую суть повествования. В публикациях спойлеры обычно делают в виде раскрывающегося текста, "аккордеона", с использованием тегов <details> / <summary> и другими способами. Сейчас в мессенджерах и на многих информационных сайтах спойлеры оформляют в виде размытого текста, который открывается при клике на него. Давайте тоже сделаем что-нибудь подобное.
Читать статью целиком »
Просмотров: 621 | Комментариев: 1
Получение позиции курсора в текстовом поле INPUT
11.07.2022 | Категория: Web-мастеру и не только | Автор: ManHunter
Нашел в этих ваших интернетах забавный визуальный эффект для поля ввода логина и пароля. Но, на мой взгляд, он работает не совсем правильно, так как глаза должны следить за позицией курсора в поле ввода, а не за количеством введенных символов.Пришлось рисовать универсальную кроссбраузерную функцию для получения позиции курсора в поле INPUT, дополнив список уже имеющихся функций похожего назначения. Вот что у меня получилось:
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- function getpos(id) {
- var el=document.getElementById(id);
- var pos, sel;
- // Internet Explorer
- if (document.selection) {
- el.focus();
- if (sel=document.selection.createRange()) {
- sel.moveStart('character', -el.value.length);
- pos=sel.text.length;
- }
- // ... something wrong ...
- else {
- pos=0;
- }
- }
- // Mozilla, Chrome
- else if (el.selectionStart || el.selectionStart=='0') {
- if (el.selectionDirection) {
- if (el.selectionDirection=='backward') {
- pos=el.selectionStart;
- }
- else {
- pos=el.selectionEnd;
- }
- }
- else {
- // Opera 9
- pos=el.selectionEnd;
- }
- }
- // ... something wrong ...
- else {
- pos=0;
- }
- return parseInt(pos);
- }
- </script>
Читать статью целиком »
Просмотров: 853 | Комментариев: 1
Стилизация заданного количества HTML-элементов
25.04.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Стилизация заданного количества HTML-элементов
Средства CSS3 предоставляют широкие возможности для стилизации HTML-элементов. Например, при помощи псевдо-класса :nth-child() можно стилизовать определенный по счету элемент, четные и нечетные элементы, а также элементы, подходящие под формулу записи этого псевдо-класса (смотрите документацию). А вот не совсем стандартная задача: есть таблица, надо стилизовать только первые N ее строчек.
Читать статью целиком »
Просмотров: 866 | Комментариев: 0
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,172 раза
Поблагодарили 35,172 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |