Blog. Just Blog

Web-мастеру и не только

Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал Web-мастеру и не только - Карта сайта

Стилизация 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.

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

Определение MIME-type файла по его расширению

03.07.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
MIME - Multipurpose Internet Mail Extension - стандарт для определения типа передаваемой информации и механизмов ее обработки. Он сообщает браузерам о том, как им надо обращаться с запрошенными файлами, имеющими то или иное расширение. Так, например, если сервер отдает браузеру в заголовках тип MIME "text/html" для файлов с расширениями htm, html и shtml, то браузер интерпретирует все файлы с этими расширениями как файлы HTML. Также очень желательно передавать корректный MIME-type при отдаче файлов скриптом в антилич-системах.

Недавно я ковырялся в одной коммерческой CMS с закрытым кодом и нашел там одну полезную функцию с большим списком MIME-типов для различных расширений файлов (всего около 400). Реализация самой функции была сделана ужасно, поэтому я ее тут даже приводить не буду. Список я немного почистил и сохранил в удобном для работы виде. Функцию тоже переписал:
  1. //----------------------------------------------------------
  2. // Функция определения MIME-типа файла по его расширению
  3. //----------------------------------------------------------
  4. function get_mime_type($ext) {
  5.     // Массив с MIME-типами
  6.     global $mimetypes;
  7.     // Расширение в нижний регистр
  8.     $ext=trim(strtolower($ext));
  9.     if ($ext!='' && isset($mimetypes[$ext])) {
  10.         // Если есть такой MIME-тип, то вернуть его
  11.         return $mimetypes[$ext];
  12.     }
  13.     else {
  14.         // Иначе вернуть дефолтный MIME-тип
  15.         return "application/force-download";
  16.     }    
  17. }
На входе функция получает расширение файла без точки, например, "zip", "MP3", и возвращает его MIME-тип, если его можно определить, или дефолтный, если расширение не содержится в списке. Расширение файла удобнее всего получить функцией pathinfo.

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

Динамическое добавление скриптов на web-страницу

16.06.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Современные динамические интерфейсы web-страниц подразумевают не только изменение содержимого различных тегов, но и динамическую подгрузку скриптов JavaScript с их последующим выполнением. Например, получение скриптов или данных для них через AJAX. Способы передачи данных я тут рассматривать не буду, а расскажу о том, как динамически добавить скрипт на сформированную web-страницу и затем выполнить его. Это можно сделать как минимум двумя способами. Первый способ - добавление скрипта средствами JavaScript с использованием стандартной функции eval. Она получает в качестве аргумента строку и, рассматривая ее содержимое как код JavaScript, пытается выполнить. Например:
  1. <script type="text/javascript">
  2. eval('function do_my_job(txt) { alert(txt); }');
  3. do_my_job('ok');
  4. </script>
Второй способ, более корректный, - это добавление скриптов через DOM. При этом создается новый объект script, заполняется его тип и текст, а затем созданный объект добавляется в качестве дочернего элемента к элементу head. В этом случае добавленный скрипт будет сразу же выполнен. Для удобства я написал небольшую функцию, получающую в качестве аргумента текст скрипта, и добавляющую его на страницу.
  1. <script type="text/javascript">
  2. function add_script(txt) {
  3.     var newScript document.createElement("script");
  4.     newScript.type "text/javascript";
  5.     newScript.text txt;
  6.     document.getElementsByTagName('head')[0].appendChild(newScript);
  7. }
  8. </script>
Во всех тестовых браузерах (IE 5.5-8, Opera 7-10, Firefox 2-3, Chrome, Safari и т.д.) скрипт выполнялся также при добавлении его к элементу body. Опытным путем установлено, что скрипт срабатывает при добавлении и к другим элементам страницы, но лучше, наверное, так не делать для сохранения кроссбраузерности и совместимости.

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

Обработка недоступных картинок на сайте

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

Обработка недоступных картинок на сайте

Одно из неприятных явлений в Интернете - это "битые" ссылки, в частности ссылки на картинки. Сайты могут закрываться, переезжать, менять свою структуру, это естественный процесс. Хуже, когда от этого страдает ваш сайт. Если на сайте всего несколько страниц, то "битые" картинки вы сможете легко отследить самостоятельно, а о некоторых могут сообщить ваши посетители. Но если страниц много, то в большинстве случаев "битые" картинки могут висеть незамеченными достаточно долго. На своем хостинге их, в принципе, можно отследить по появлению ссылок в логе ошибок 404 (страница не найдена), а если изображения находятся на другом сервере?

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

Ошибка MySQL "Got error 28 from storage engine"

20.05.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Прихожу на работу, а у меня уже телефон разрывается от звонков. Рабочий сайт компании лежит с загадочной ошибкой MySQL "Got error 28 from storage engine", причем не весь, а выборочно местами и только на некоторых запросах. В официальной документации по MySQL ничего внятного не нашел, но после небольшого расследования и поиска в разных интернетах выяснилось, что такая ошибка возникает из-за нехватки свободного места на диске. На небольших запросах оставшегося места хватало для работы MySQL и возвращался какой-то результат, а на более ресурсоемких появлялась указанная ошибка. Позвонил админам, добавили места, почистили мусор, проблема сразу же решилась. Вот такая загогулина. Может кому-нибудь пригодится.

Просмотров: 13428 | Комментариев: 11

prev 01 ... 24 25 26 27 28 29 30 ... 34 next
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0023 сек.) / Память: 4.75 Mb
Наверх