Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Получение позиции курсора в текстовом поле INPUT

11.07.2022 | Категория: Web-мастеру и не только | Автор: ManHunter
Нашел в этих ваших интернетах забавный визуальный эффект для поля ввода логина и пароля. Но, на мой взгляд, он работает не совсем правильно, так как глаза должны следить за позицией курсора в поле ввода, а не за количеством введенных символов.

Пришлось рисовать универсальную кроссбраузерную функцию для получения позиции курсора в поле INPUT, дополнив список уже имеющихся функций похожего назначения. Вот что у меня получилось:
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">
  2. function getpos(id) {
  3.     var el=document.getElementById(id);
  4.     var pos, sel;
  5.  
  6.     // Internet Explorer
  7.     if (document.selection) {
  8.         el.focus();
  9.         if (sel=document.selection.createRange()) {
  10.             sel.moveStart('character', -el.value.length);
  11.             pos=sel.text.length;
  12.         }
  13.         // ... something wrong ...
  14.         else {
  15.             pos=0;
  16.         }
  17.     }
  18.     // Mozilla, Chrome
  19.     else if (el.selectionStart || el.selectionStart=='0') {
  20.         if (el.selectionDirection) {
  21.             if (el.selectionDirection=='backward') {
  22.                 pos=el.selectionStart;
  23.             }
  24.             else {
  25.                 pos=el.selectionEnd;
  26.             }
  27.         }
  28.         else {
  29.             // Opera 9
  30.             pos=el.selectionEnd;
  31.         }
  32.     }
  33.     // ... something wrong ...
  34.     else {
  35.         pos=0;
  36.     }
  37.     return parseInt(pos);
  38. }
  39. </script>
Единственный параметр - id поля ввода, на выходе числовое значение позиции курсора. Вызов функции лучше биндить на все возможные обработчики, так или иначе связанные с изменением содержимого поля ввода или с его (де)активацией. В некоторых случаях в старых браузерах может наблюдаться проблема с определением позиции курсора при выделении фрагмента текста, а также при автоповторе нажатия клавиш. В современных браузерах все работает нормально.

Читать статью целиком »
Просмотров: 357 | Комментариев: 1

Стилизация заданного количества HTML-элементов

25.04.2021 | Категория: Web-мастеру и не только | Автор: ManHunter

Стилизация заданного количества HTML-элементов

Средства CSS3 предоставляют широкие возможности для стилизации HTML-элементов. Например, при помощи псевдо-класса :nth-child() можно стилизовать определенный по счету элемент, четные и нечетные элементы, а также элементы, подходящие под формулу записи этого псевдо-класса (смотрите документацию). А вот не совсем стандартная задача: есть таблица, надо стилизовать только первые N ее строчек.

Читать статью целиком »
Просмотров: 603 | Комментариев: 0

Как сделать у ссылок иконки, соответствующие типу файлов

16.01.2021 | Категория: Web-мастеру и не только | Автор: ManHunter

Как сделать у ссылок иконки, соответствующие типу файлов

Понадобилось сделать красивую страничку со списком файлов. Помимо прочего оформления, решил к ссылкам на файлы добавить иконки, соответствующие их типам, примерно как это делается в Проводнике Windows или файловых менеджерах. Сперва хотел реализовать это на серверной стороне, потом подумал, еще подумал, и решил обойтись чистым CSS. Делается это все очень просто. Для каждой ссылки списка в стилях добавляется селектор, соответствующий расширению файлов:
Code (HTML) : Убрать нумерацию
  1. <style type="text/css">
  2. a[href$=".pdf"] {
  3.     padding-left: 20px;
  4.     background: url('/img/file_pdf.png') no-repeat left 3px;
  5. }
  6.  
  7. a[href$=".doc"], a[href$=".docx"] {
  8.     padding-left: 20px;
  9.     background: url('/img/file_word.png') no-repeat left 3px;
  10. }
  11.  
  12. a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"] {
  13.     padding-left: 20px;
  14.     background: url('/img/file_img.png') no-repeat left 3px;
  15. }
  16. </style>
Размеры изображений с типами файлов подбирайте под размеры текста, смещение фона относительно текста ссылки и отступ также определяются экспериментальным путем в зависимости от особенностей верстки.

Просмотров: 763 | Комментариев: 0

Эффект покачивания изображения при наведении мыши

24.08.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Эффект покачивания изображения при наведении мыши

Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.

Читать статью целиком »
Просмотров: 1867 | Комментариев: 0

Центрирование элементов на странице средствами CSS

06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.

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

Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
Code (HTML) : Убрать нумерацию
  1. .container {
  2.     position: relative;
  3. }
Значение relative определяет, что абсолютное позиционирование всех вложенных блоков должно считаться не от краев экрана, а от границ родительского элемента. Ну а теперь переходим к описанию правил для вложенных блоков.

Читать статью целиком »
Просмотров: 867 | Комментариев: 1

prev 01 02 03 04 05 06 07 08 09 10
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (25), AJAX (5), Assembler (307), COM (27), CSS (38), Exif (15), FASM (8), Firefox (7), HDD (15), Hello Teddy (9), HTML (46), iconBIT (4), JavaScript (65), MySQL (12), Nikon (19), PDF (9), PHP (109), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (65), аккумуляторы (22), аксессуары (12), анализаторы файлов (8), архиваторы (5), аттракционы (6), безопасность (52), браузеры (16), бытовая техника (9), варенье (17), ВВЦ (9), ВДНХ (10), видео (20), Воробьевы горы (8), вторые блюда (106), выпечка (22), выставки (110), генератор ПСЧ (10), графика (105), десерты (29), Египет (8), заготовки на зиму (42), закуска (20), закуска к пиву (23), зарядные устройства (22), защита (15), зоопарки (9), игры (31), иконки (20), интерфейс (25), исследование защиты (279), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (65), мониторы (6), музеи (69), мультимедиа (58), мясо (50), напитки (13), ноутбуки (6), обфускация (7), окна (68), оформление сайта (46), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (116), полезные функции (37), прохождения (4), процессы (21), птица (16), путешествия (25), распаковка (17), реверсинг (48), рыба (32), салаты (17), сброс триала (4), сеть (32), система (165), Сокольники (8), соусы (12), супы (13), телефоны (8), Тунис (6), файлы справки (6), фаст-фуд (17), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (16)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 31,901 раз
<< 2023 - ФЕВРАЛЬ >>
Пн Вт Ср Чт Пт Сб Вс
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28          
День военного топографа
День российской науки
Международный день безопасного Интернета
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 410
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2023
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.13 сек. / MySQL: 3 (0.0613 сек.) / Память: 4.75 Mb
Наверх