Blog. Just Blog

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

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

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

11.08.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.
  1. <style type="text/css">
  2. /* Стиль для обертки отмеченного checkbox'а */
  3. div.boxChecked {
  4.     backgroundurl("checkbox.gif"no-repeat 0 3px;
  5. }
  6. /* Стиль для обертки неотмеченного checkbox'а */
  7. div.boxUnchecked {
  8.     backgroundurl("checkbox.gif"no-repeat 0 -18px;
  9. }
  10. /* Прозрачный стиль для checkbox'а */
  11. div.boxChecked inputdiv.boxUnchecked input {
  12.     cursorpointer;
  13.     margin0px;
  14.     padding0px;
  15.     width16px;
  16.     opacity0;
  17.     -moz-opacity0;
  18.     -khtml-opacity0;
  19.     filterprogid:DXImageTransform.Microsoft.Alpha(opacity=0);
  20. }
  21. </style>
Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания. Кроссбраузерный стиль checkbox'а устанавливает для него полную прозрачность. К сожалению, специфические определения стиля типа -moz-opacity, -khtml-opacity и filter не соответствуют спецификации CSS, поэтому, если вы хотите добиться полного прохождения валидатора, то придется извернуться с JavaScript.

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

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

20.04.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:
  1. <label for="search">Поиск по сайту:</label>
  2. <input type="text" name="search" id="search" value="что ищем?"
  3.        onfocus="if(this.value==this.defaultValue){this.value='';}"
  4.        onblur="if(this.value==''){this.value=this.defaultValue;}">
Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

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

Защита от спама на сайтах и форумах

14.12.2008 | Категория: Web-мастеру и не только | Автор: ManHunter
Проблема спама в комментариях, гостевых книгах, сообщениях на форумах в настоящее время стоит очень остро. Раньше даже простенькая капча или подтверждение регистрации на форуме по e-mail были практически непреодолимым препятствием для спамботов и автосабмиттеров. Теперь появились достаточно мощные программы для авторегистрации и рассылки спама, способные реально обходить эти защиты. Никаких названий и ссылок на сайты указывать не буду, чтобы не делать рекламы этим ублюдкам. В описании одного из спамботов его аффтар хвалится:


Эксклюзивная возможность - программа обходит ЛЮБЫЕ виды защиты от автоматической регистрации и автосабмита! Такие, как:
- Защита при помощи пиктокода (тикетов) типа "Введите число, которое видите".
- Защита при помощи активации по e-mail.
- Защита при помощи некоторых Java-скриптов.
- Возможность распознавания защиты в виде арифметических операций и логических вопросов


а на следующей же страничке расписывается в своей беспомощности:


Изредка на некоторых форумах встречается защита от автосабмита в виде java- или VB-скрипта.
Как показала практика, чтобы научить программу обходить такого рода защиту, совсем необязательно писать полнофункциональный обработчик скрипта. Главное, чтобы такой вид защиты был достаточно распространён: нецелесообразно создавать обработчик, если такая защита используется только на одном-двух форумах.


Значит наш удар будет нанесен в самое слабое место спамботов - невозможность обрабатывать формы, защищенные при помощи скриптов JavaScript. Лично я противник использования на сайтах различных навороченных капчей, которые не то что робот, а и не каждый здоровый человек разберет. После первого же неправильного ввода желание оставлять комментарий, да и вообще посещать подобный ресурс, очень резко уменьшается. Туда же идут всякие "сколько будет 2+3", "что нарисовано на картинке" и прочие лишние телодвижения, не связанные непосредственно с комментированием.

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

Шпаргалки для Web-мастера по HTML, CSS и JavaScript

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

Целые каталоги шпаргалок по различным языкам программирования предлагают сайты TechCheatSheets.com, gotAPI, WhatIs.com и refcards.com. Последний сайт уже давно не обновлялся.

Большой набор файлов-шпаргалок по PHP, Apache, mod_rewrite, CSS, JavaScript, HTML, MySQL, ASP, VBScript и другие можно найти на сайте Added Bytes. Они выполнены в формате PDF и PNG.

Отдельно шпаргалки по JavaScript выложены на сайте JavaScript Reference, использование регулярных выражений в JavaScript можно посмотреть на сайте VisiBone. При желании там же можно за денежку заказать наборы шпаргалок в бумажном виде.

Онлайновый справочник по HTML и CSS на русском языке на сайте htmlbook.ru, а в виде шпаргалок на сайте HTML Tags. Справочники по CSS с примерами здесь и здесь. Справочник по CSS на русском языке выложен на сайте Александра Климова, а на сайте CSSplay вы можете посмотреть интересные примеры верстки с использованием CSS.

Таблицу HTML-цветов можно посмотреть на сайте VisiBone или скачать в формате PDF с сайта Veign.

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

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

15.09.2008 | Категория: Web-мастеру и не только | Автор: ManHunter
Последнее время технология Flash на сайтах становится все более популярной. Красивые анимированные меню, баннеры, и даже целые сайты выполнены на Flash. Не так давно я с интересом узнал, что изначально Flash создавался для просмотра анимированных порнушных мультиков и совершенно не предназначался для сайтостроительства. Предположим, вы относитесь к тому редкому виду дизайнеров, которые используют Flash "редко, но метко", и сделали на нем красивую навигацию для сайта. У большинства пользователей все работает как надо, ссылки, прописанные в Flash-кнопках открываются, в общем все замечательно. А что увидит пользователь сайта, если у него в браузере отключена поддержка Flash, например в целях безопасности или экономии трафика? Правильно, не увидит НИЧЕГО. Для решения проблемы предлагаю использовать следующий код:
  1. <object type="application/x-shockwave-flash"
  2.   data="images/contact_button.swf" width="100" height="30">
  3.   <param name="menu" value="false" />
  4.   <param name="quality" value="high" />
  5.   <param name="wmode" value="transparent" />
  6.   <param name="bgcolor" value="#ffffff" />
  7.   <param name="movie" value="images/contact_button.swf" />
  8.   <a href="contact.html"><img src="images/contact_button.gif" width="100"
  9.   height="30" border="0" alt="Контакты" /></a>
  10. </object>
Если все нормально, то посетитель увидит красивую кнопку contact_button.swf, если в браузере отключен Flash, будет показана ссылка на страницу контактов и графическая кнопка contact_button.gif. Если отключены и картинки, то будет показан текст-заместитель "Контакты". Как видите, в любом случае посетитель не потеряется на вашем сайте и попадет куда надо. Приведенный код работает во всех браузерах и 100% проходит проверку на валидаторе W3C.

Просмотров: 4852 | Комментариев: 6

01 02 03 04 05 06 07 08 09 next
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.12 сек. / MySQL: 3 (0.049 сек.) / Память: 4.75 Mb
Наверх