Быстрый поиск
Введите фрагмент названия статьи для поиска
Получение позиции курсора в текстовом поле 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>
Читать статью целиком »
Просмотров: 254 | Комментариев: 1
Стилизация заданного количества HTML-элементов
25.04.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Стилизация заданного количества HTML-элементов
Средства CSS3 предоставляют широкие возможности для стилизации HTML-элементов. Например, при помощи псевдо-класса :nth-child() можно стилизовать определенный по счету элемент, четные и нечетные элементы, а также элементы, подходящие под формулу записи этого псевдо-класса (смотрите документацию). А вот не совсем стандартная задача: есть таблица, надо стилизовать только первые N ее строчек.
Читать статью целиком »
Просмотров: 538 | Комментариев: 0
Как сделать у ссылок иконки, соответствующие типу файлов
16.01.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Как сделать у ссылок иконки, соответствующие типу файлов
Понадобилось сделать красивую страничку со списком файлов. Помимо прочего оформления, решил к ссылкам на файлы добавить иконки, соответствующие их типам, примерно как это делается в Проводнике Windows или файловых менеджерах. Сперва хотел реализовать это на серверной стороне, потом подумал, еще подумал, и решил обойтись чистым CSS. Делается это все очень просто. Для каждой ссылки списка в стилях добавляется селектор, соответствующий расширению файлов:
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- a[href$=".pdf"] {
- padding-left: 20px;
- background: url('/img/file_pdf.png') no-repeat left 3px;
- }
- a[href$=".doc"], a[href$=".docx"] {
- padding-left: 20px;
- background: url('/img/file_word.png') no-repeat left 3px;
- }
- a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"] {
- padding-left: 20px;
- background: url('/img/file_img.png') no-repeat left 3px;
- }
- </style>
Просмотров: 680 | Комментариев: 0
Эффект покачивания изображения при наведении мыши
24.08.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект покачивания изображения при наведении мыши
Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.
Читать статью целиком »
Просмотров: 1602 | Комментариев: 0
Центрирование элементов на странице средствами CSS
06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.
Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
Code (HTML) : Убрать нумерацию
- .container {
- position: relative;
- }
Читать статью целиком »
Просмотров: 801 | Комментариев: 1
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 31,358 раз
Поблагодарили 31,358 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 390 |
 |
 |