Быстрый поиск
Введите фрагмент названия статьи для поиска
Размещение контента на HTML-странице поверх Flash
18.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
На разных сайтах в Интернете я часто сталкиваюсь с тем, что на них расположены Flash-объекты, например, видеоплееры с YouTube или фрагменты оформления дизайна на Flash. И при этом различные элементы - плавающие или с абсолютным позиционированием, например, раскрывающиеся меню или всплывающие подсказки, перекрываются областью, занимаемой Flash-объектами. Причем использование атрибута стиля z-index ситуацию не спасает, и в итоге все смотрится очень некрасиво. А ведь решение проблемы очень простое: достаточно в описании Flash-объекта указать параметр wmode со значением opaque:Code (HTML) : Убрать нумерацию
- <param name="wmode" value="opaque">
Code (HTML) : Убрать нумерацию
- <div style="position:relative;">
- <div style="position:absolute;">Hello, World!</div>
- <object type="application/x-shockwave-flash" data="flash.swf">
- <param name="menu" value="false" />
- <param name="quality" value="high" />
- <param name="wmode" value="opaque">
- <param name="movie" value="flash.swf" />
- </object>
- </div>
Просмотров: 9794 | Комментариев: 12
Как отправить из формы HTML только часть данных
04.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Формы - один из основных способов взаимодействия сайта и пользователя, без которых невозможно представить ни один современный сайт. Методы работы с формами стандартные, никаких сложностей в реализации вызывать не должны. В некоторых случаях требуется отправить только часть полей из большой формы. Типичный пример - настройки форума, когда можно сохранить какую-то одну из всех открытых категорий, а можно сохранить все сразу. Один из вариантов решения заключается в том, что можно каким-нибудь образом, например, уникальным индексом, пометить кнопку сабмита нужной группы.Code (HTML) : Убрать нумерацию
- <form action="process.php" method="post">
- <input type="text" name="text1" value="text1">
- <input type="checkbox" name="box1" value="box1">
- <input type="submit" name="submit1" value="Отправить 1 блок">
- <input type="text" name="text2" value="text2">
- <input type="checkbox" name="box2" value="box2">
- <input type="submit" name="submit2" value="Отправить 2 блок">
- <input type="submit" name="all" value="Отправить все">
- </form>
Второй способ, с использованием JavaScript, заключается в том, что из формы берутся нужные поля, затем динамически формируется новая форма, и на сервер отправляется уже она. Для этого придется сделать несколько вспомогательных действий. Первая - изменится разметка страницы.
Code (HTML) : Убрать нумерацию
- <div id="wrapper0">
- <div id="wrapper1">
- Текст 1: <input type="text" name="text1">
- <input type="checkbox" name="chk1" value="1">
- <input type="button" value="Сохранить" onclick="ds('wrapper1');">
- </div>
- <div id="wrapper2">
- Текст 2: <input type="text" name="text2">
- <input type="checkbox" name="chk2" value="2">
- <input type="button" value="Сохранить" onclick="ds('wrapper2');">
- </div>
- <div id="wrapper3">
- Текст 3: <input type="text" name="text3">
- <input type="checkbox" name="chk3" value="3">
- <input type="button" value="Сохранить" onclick="ds('wrapper3');">
- </div>
- <div>Глобально: <input type="text" name="global">
- <select name="sel">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- </select>
- </div>
- <input type="button" value="Сохранить все" onclick="ds('wrapper0');">
- </div>
Читать статью целиком »
Просмотров: 11484 | Комментариев: 4
Использование 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>
Читать статью целиком »
Просмотров: 5264 | Комментариев: 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>
Читать статью целиком »
Просмотров: 20742 | Комментариев: 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;}">
Читать статью целиком »
Просмотров: 18774 | Комментариев: 19