Blog. Just Blog

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

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

Горизонтальный скроллер на JavaScript

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

Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
Code (HTML) : Убрать нумерацию
  1. <div class="scroller_container">
  2.   <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
  3.     <div class="scroller_window" id="scroller_window">
  4.       <div class="scroller_row" id="scroller_row">
  5.         <div id="scroller_rule">
  6.           <!-- список превьюшек в линейке скроллера -->
  7.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  8.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  9.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  10.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  11.         </div>   
  12.       </div>
  13.     </div>
  14.   <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
  15. </div>
Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

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

Размещение контента на HTML-странице поверх Flash

18.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
На разных сайтах в Интернете я часто сталкиваюсь с тем, что на них расположены Flash-объекты, например, видеоплееры с YouTube или фрагменты оформления дизайна на Flash. И при этом различные элементы - плавающие или с абсолютным позиционированием, например, раскрывающиеся меню или всплывающие подсказки, перекрываются областью, занимаемой Flash-объектами. Причем использование атрибута стиля z-index ситуацию не спасает, и в итоге все смотрится очень некрасиво. А ведь решение проблемы очень простое: достаточно в описании Flash-объекта указать параметр wmode со значением opaque:
Code (HTML) : Убрать нумерацию
  1. <param name="wmode" value="opaque">
Получится что-то вроде такого:
Code (HTML) : Убрать нумерацию
  1. <div style="position:relative;">
  2.     <div style="position:absolute;">Hello, World!</div> 
  3.  
  4.     <object type="application/x-shockwave-flash" data="flash.swf">
  5.         <param name="menu" value="false" />
  6.         <param name="quality" value="high" />
  7.         <param name="wmode" value="opaque">
  8.         <param name="movie" value="flash.swf" />
  9.     </object>     
  10. </div>
В приведенном примере плавающий элемент div с текстом "Hello, World!", позиционированный относительно общего контейнера, будет расположен поверх Flash-ролика. Этот способ валидный и кроссбраузерный, а расположение Flash-объекта на странице теперь можно регулировать с помощью атрибута z-index. Готовый пример можно посмотреть на сайте.

Просмотров: 9878 | Комментариев: 12

Как отправить из формы HTML только часть данных

04.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Формы - один из основных способов взаимодействия сайта и пользователя, без которых невозможно представить ни один современный сайт. Методы работы с формами стандартные, никаких сложностей в реализации вызывать не должны. В некоторых случаях требуется отправить только часть полей из большой формы. Типичный пример - настройки форума, когда можно сохранить какую-то одну из всех открытых категорий, а можно сохранить все сразу. Один из вариантов решения заключается в том, что можно каким-нибудь образом, например, уникальным индексом, пометить кнопку сабмита нужной группы.
Code (HTML) : Убрать нумерацию
  1. <form action="process.php" method="post">
  2.  
  3. <input type="text" name="text1" value="text1">
  4. <input type="checkbox" name="box1" value="box1">
  5. <input type="submit" name="submit1" value="Отправить 1 блок">
  6.  
  7. <input type="text" name="text2" value="text2">
  8. <input type="checkbox" name="box2" value="box2">
  9. <input type="submit" name="submit2" value="Отправить 2 блок">
  10.  
  11. <input type="submit" name="all" value="Отправить все">
  12. </form>
В этом случае обработка и сортировка поступившей информации ложится целиком на сторону сервера. Сперва определяется, какой из сабмитов был нажат, затем на основании этой информации из всех данных выбираются нужные. Метод надежный, работает во всех случаях, даже если у пользователя в браузере отключены скрипты. Недостаток способа в том, что передаются все поля из формы, а не только нужные. Вложенные формы стандартом HTML не допускаются и, соответственно, корректно не обрабатываются.

Второй способ, с использованием JavaScript, заключается в том, что из формы берутся нужные поля, затем динамически формируется новая форма, и на сервер отправляется уже она. Для этого придется сделать несколько вспомогательных действий. Первая - изменится разметка страницы.
Code (HTML) : Убрать нумерацию
  1. <div id="wrapper0">
  2.   <div id="wrapper1">
  3.   Текст 1: <input type="text" name="text1">
  4.   <input type="checkbox" name="chk1" value="1">
  5.   <input type="button" value="Сохранить" onclick="ds('wrapper1');">
  6.   </div>
  7.  
  8.   <div id="wrapper2">
  9.   Текст 2: <input type="text" name="text2">
  10.   <input type="checkbox" name="chk2" value="2">
  11.   <input type="button" value="Сохранить" onclick="ds('wrapper2');">
  12.   </div>
  13.  
  14.   <div id="wrapper3">
  15.   Текст 3: <input type="text" name="text3">
  16.   <input type="checkbox" name="chk3" value="3">
  17.   <input type="button" value="Сохранить" onclick="ds('wrapper3');">
  18.   </div>
  19.  
  20.   <div>Глобально: <input type="text" name="global">
  21.     <select name="sel">
  22.     <option value="1">1</option>
  23.     <option value="2">2</option>
  24.     <option value="3">3</option>
  25.     <option value="4">4</option>
  26.     </select>
  27.   </div>
  28.  
  29.   <input type="button" value="Сохранить все" onclick="ds('wrapper0');">
  30. </div>
Обратите внимание, что вместо тега form используются блоки div. Это позволяет создать на странице что-то вроде вложенных форм. Я сразу добавил в код обработчики сабмитов, функции будут описаны ниже.

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

Использование HTML-комментариев для хранения данных

16.10.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Как-то меня посетила мысль проверить, как определяются HTML-комментарии в DOM-структуре документа, и как можно получить доступ к их содержимому. Ведь по сути они являются полноправными составляющими документа. Напрямую, через ID, имя и другими подобными способами, естественно, сделать это не получится, т.к. тег комментария не имеет ничего подобного. Но сделать это все-таки удалось, привязавшись к соседнему тегу одного уровня с нужным комментарием. После этого элемент комментария со всеми потрохами можно получить через функцию JavaScript nextSibling или previousSibling, в зависимости от вашей ситуации. Это можно посмотреть, например, вот на таком фрагменте кода:
Code (HTML) : Убрать нумерацию
  1. <div>
  2. <!--first comment--><div id="main_div">Main DIV</div><!--second comment-->
  3. </div>
  4.  
  5. <script type="text/javascript">
  6. // Получить опорный элемент
  7. var el=document.getElementById('main_div');
  8. // Сообщение "first comment"
  9. alert(el.previousSibling.nodeValue);
  10. // Сообщение "second comment"
  11. alert(el.nextSibling.nodeValue);
  12. </script>
Можно, конечно, перебрать все дочерние элементы документа, начиная от корневого, но описанным выше способом удобнее выбрать именно нужный комментарий. Способ с перебором элементов тоже приведу:
Code (HTML) : Убрать нумерацию
  1. <div id="overall">
  2.   <a href="#">link</a>
  3.   <!--first comment-->
  4.   <div id="inner_div">
  5.      inner div
  6.      <!--second comment-->
  7.   </div>
  8.   plain text
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. var el=document.getElementById('overall');
  13. for (var i = 0; i < el.childNodes.length; i++) {
  14.   if (el.childNodes[i]=='[object Comment]' ||
  15.       el.childNodes[i]=='[object HTMLCommentElement]') {
  16.     alert(el.childNodes[i].nodeValue);
  17.   }
  18. }
  19. </script>
Последовательно перебираются все дочерние элементы, если текущий объект имеет тип [object Comment] или [object HTMLCommentElement] (в случае Internet Explorer), то значит найден комментарий. Несмотря на некоторые неудобства, способ с обходом дерева DOM тоже можно использовать, когда привязка к строго определенным элементам не требуется, а надо просто получить содержимое комментариев.

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

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

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

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

01 02 03 04 05 06 07 08 09 10 11
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Я в Telegram
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (33), AJAX (5), Assembler (379), COM (44), CSS (45), Exif (15), FASM (9), Firefox (7), HDD (17), Hello Teddy (10), HTML (54), iconBIT (4), JavaScript (78), MySQL (13), Nikon (19), PDF (10), PHP (125), Samsung (6), SEO (12), Sublime Text (9), Telegram (5), TintonLife (4), UGREEN (4), Windows 7 (67), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (21), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (133), выпечка (31), выставки (123), генератор ПСЧ (10), графика (122), десерты (31), Египет (9), заготовки на зиму (47), закуска (23), закуска к пиву (26), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (327), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (28), ледяные скульптуры (6), мои программы (70), мониторы (6), музеи (80), мультимедиа (83), мясо (66), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (52), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (136), полезные функции (47), прохождения (4), процессы (25), птица (24), путешествия (26), распаковка (22), реверсинг (53), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (179), Сокольники (8), соусы (16), супы (14), телефоны (10), Тунис (6), умный дом (15), файлы справки (7), фаст-фуд (19), фестиваль цветов (5), флешки (6), фото (23), хеши (18), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 36,795 раз
<< 2025 - ИЮНЬ >>
Пн Вт Ср Чт Пт Сб Вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
День божьих коровок
День швейной машинки
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2025
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.13 сек. / MySQL: 3 (0.0104 сек.) / Память: 4.5 Mb
Наверх