Стилизация checkbox с использованием CSS и JavaScript

В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания. Кроссбраузерный стиль checkbox'а устанавливает для него полную прозрачность. К сожалению, специфические определения стиля типа -moz-opacity, -khtml-opacity и filter не соответствуют спецификации CSS, поэтому, если вы хотите добиться полного прохождения валидатора, то придется извернуться с JavaScript.

Читать статью целиком »

Поле ввода с убирающейся подсказкой

Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

Читать статью целиком »

PCL's Floating Window 1.0.0

Для очередного проекта мне понадобился скрипт для создания плавающего окна, которое можно перетаскивать по экрану мышкой. Готовые скрипты или не имели нужного мне функционала, или же были слишком громоздкие, а таскать за собой чужеродные фреймворки ради одной функции - слишком дорогое удовольствие. В результате нескольких часов работы появился скрипт PCL's Floating Window.

Описание и возможности PCL's Floating Window:

• Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 6.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.5-9.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.
  
  
• Простое добавление скрипта на страницу, настройка и подключение к нужным плавающим элементам. Функции центрирования плавающих элементов в пределах видимой области экрана, их скрытия и отображения.
  
  
• Поддержка неограниченного количества перетаскиваемых элементов, как блочных, так и строковых. Строковые элементы при перетаскивании преобразуются в блочные.
  
  
• Корректное позиционирование нескольких плавающих элементов относительно друг друга, активный элемент всегда располагается поверх остальных. Корректное отображение взаимного перекрытия нескольких элементов.
  
  
• Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Floating Window за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов!

Если в каком-нибудь из заявленных браузеров скрипт будет работать некорректно, то просьба сообщить в комментариях точную версию браузера и настройки подключения скрипта.

Читать статью целиком »

Кроссбраузерное добавление страницы в закладки

Кроссбраузерное добавление страницы в закладки реализуется с использованием JavaScript. Для добавления страницы в Избранное браузеров Internet Explorer и браузеров, работающих на движке IE, вызывается стандартный метод AddFavorite. Однако здесь есть одна важная деталь. Если страница IE открыта как embedded-объект в другом приложении, например в плагинах или при использовании компонентов для работы с html, то объект window.external присутствует, но его метод AddFavorite не срабатывает. Это наиболее частая ошибка разработчиков, которые просто копируют код друг у друга без его понимания и тестирования. Также большой ошибкой будет использование на своем сайте только одного этого способа.

Браузеры на движке Gecko, такие как Firefox, Netscape, K-Meleon и другие, имеют объект window.sidebar и метод для добавления addPanel. Третий параметр метода недокументирован и является необязательным, поэтому в скрипте заменяется просто пустой строкой. Обратите внимание, что по умолчанию ссылка добавляется не совсем в закладки, а в боковую панель браузера. Для добавления страницы в нужную папку закладок выберите ее в выпадающем меню. С версии 23 в Firefox не поддерживается метод addPanel, в этом случае надо использовать метод добавления Opera.

Для браузера Opera ссылка добавления в закладки должна иметь атрибут rel="sidebar". Но если этот атрибут ставить сразу по умолчанию, то некоторые браузеры типа Netscape будут отрабатывать функцию добавления в закладки дважды: первый раз через скрипт и второй раз через атрибут rel. Поэтому придется изменять атрибуты ссылки динамически, предварительно определив браузер проверкой типа объекта opera.

Если ни один из перечисленных способов не сработал, то не надо выдавать сообщение об ошибке или еще хуже, молча завершать выполнение скрипта. Будет гораздо правильнее показать пользователю доступный вариант решения задачи, например предложить вручную нажать комбинацию клавиш Ctrl+D.

Читать статью целиком »

Flash-навигация при отключенном Flash

Последнее время технология Flash на сайтах становится все более популярной. Красивые анимированные меню, баннеры, и даже целые сайты выполнены на Flash. Не так давно я с интересом узнал, что изначально Flash создавался для просмотра анимированных порнушных мультиков и совершенно не предназначался для сайтостроительства. Предположим, вы относитесь к тому редкому виду дизайнеров, которые используют Flash "редко, но метко", и сделали на нем красивую навигацию для сайта. У большинства пользователей все работает как надо, ссылки, прописанные в Flash-кнопках открываются, в общем все замечательно. А что увидит пользователь сайта, если у него в браузере отключена поддержка Flash, например в целях безопасности или экономии трафика? Правильно, не увидит НИЧЕГО. Для решения проблемы предлагаю использовать следующий код:Если все нормально, то посетитель увидит красивую кнопку contact_button.swf, если в браузере отключен Flash, будет показана ссылка на страницу контактов и графическая кнопка contact_button.gif. Если отключены и картинки, то будет показан текст-заместитель "Контакты". Как видите, в любом случае посетитель не потеряется на вашем сайте и попадет куда надо. Приведенный код работает во всех браузерах и 100% проходит проверку на валидаторе W3C.