Быстрый поиск
Введите фрагмент названия статьи для поиска
Использование HTML-комментариев для хранения данных
16.10.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Как-то меня посетила мысль проверить, как определяются HTML-комментарии в DOM-структуре документа, и как можно получить доступ к их содержимому. Ведь по сути они являются полноправными составляющими документа. Напрямую, через ID, имя и другими подобными способами, естественно, сделать это не получится, т.к. тег комментария не имеет ничего подобного. Но сделать это все-таки удалось, привязавшись к соседнему тегу одного уровня с нужным комментарием. После этого элемент комментария со всеми потрохами можно получить через функцию JavaScript nextSibling или previousSibling, в зависимости от вашей ситуации. Это можно посмотреть, например, вот на таком фрагменте кода:Code (HTML) : Убрать нумерацию
- <div>
- <!--first comment--><div id="main_div">Main DIV</div><!--second comment-->
- </div>
- <script type="text/javascript">
- // Получить опорный элемент
- var el=document.getElementById('main_div');
- // Сообщение "first comment"
- alert(el.previousSibling.nodeValue);
- // Сообщение "second comment"
- alert(el.nextSibling.nodeValue);
- </script>
Code (HTML) : Убрать нумерацию
- <div id="overall">
- <a href="#">link</a>
- <!--first comment-->
- <div id="inner_div">
- inner div
- <!--second comment-->
- </div>
- plain text
- </div>
- <script type="text/javascript">
- var el=document.getElementById('overall');
- for (var i = 0; i < el.childNodes.length; i++) {
- if (el.childNodes[i]=='[object Comment]' ||
- el.childNodes[i]=='[object HTMLCommentElement]') {
- alert(el.childNodes[i].nodeValue);
- }
- }
- </script>
Читать статью целиком »
Просмотров: 5530 | Комментариев: 17
Стилизация checkbox с использованием CSS и JavaScript
11.08.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.Code (HTML) : Убрать нумерацию
- <style type="text/css">
- /* Стиль для обертки отмеченного checkbox'а */
- div.boxChecked {
- background: url("checkbox.gif") no-repeat 0 3px;
- }
- /* Стиль для обертки неотмеченного checkbox'а */
- div.boxUnchecked {
- background: url("checkbox.gif") no-repeat 0 -18px;
- }
- /* Прозрачный стиль для checkbox'а */
- div.boxChecked input, div.boxUnchecked input {
- cursor: pointer;
- margin: 0px;
- padding: 0px;
- width: 16px;
- opacity: 0;
- -moz-opacity: 0;
- -khtml-opacity: 0;
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
- }
- </style>
Читать статью целиком »
Просмотров: 21108 | Комментариев: 14
Поле ввода с убирающейся подсказкой
20.04.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:Code (HTML) : Убрать нумерацию
- <label for="search">Поиск по сайту:</label>
- <input type="text" name="search" id="search" value="что ищем?"
- onfocus="if(this.value==this.defaultValue){this.value='';}"
- onblur="if(this.value==''){this.value=this.defaultValue;}">
Читать статью целиком »
Просмотров: 19180 | Комментариев: 19
Защита от спама на сайтах и форумах
14.12.2008 | Категория: Web-мастеру и не только | Автор: ManHunter
Защита от спама на сайтах и форумах
Проблема спама в комментариях, гостевых книгах, сообщениях на форумах в настоящее время стоит очень остро. Раньше даже простенькая капча или подтверждение регистрации на форуме по e-mail были практически непреодолимым препятствием для спамботов и автосабмиттеров.
Читать статью целиком »
Просмотров: 31458 | Комментариев: 64
Шпаргалки для Web-мастера по HTML, CSS и JavaScript
30.11.2008 | Категория: Web-мастеру и не только | Автор: ManHunter
Шпаргалки для Web-мастера по HTML, CSS и JavaScript
В свое время преподаватели учили меня: "Не надо всего знать, надо знать где взять". Для больших объемов информации я, конечно, предпочитаю бумажные справочники. А когда надо быстро посмотреть синтаксис какой-нибудь редко используемой функции, параметры тега или код цвета, то очень выручают онлайн-справочники и файлы-шпаргалки. Вот основные сайты и ресурсы для облегчения поиска.
Читать статью целиком »
Просмотров: 21188 | Комментариев: 13
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 37,600 раз
Поблагодарили 37,600 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 340 |
 |
 |