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

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

Горизонтальный скроллер на JavaScript
Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
Code (HTML) : Убрать нумерацию
- <div class="scroller_container">
- <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
- <div class="scroller_window" id="scroller_window">
- <div class="scroller_row" id="scroller_row">
- <div id="scroller_rule">
- <!-- список превьюшек в линейке скроллера -->
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- </div>
- </div>
- </div>
- <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
- </div>
Читать статью целиком »
Просмотров: 11213 | Комментариев: 21

PCL's Nice Tooltip 1.1.4
14.03.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Для оформления этого блога мне понадобился хороший скрипт, показывающий всплывающие подсказки при наведении курсора мышки на определенные элементы страницы. Например, на картинки или ссылки. Готовыми скриптами я не пользуюсь, поэтому и здесь решил написать свой. Тем более я пока не встретил ни одного скрипта всплывающих подсказок, который обладал бы нужным мне функционалом. Так на свет появился скрипт PCL's Nice Tooltip, которым я с удовольствием с вами поделюсь.Описание и возможности PCL's Nice Tooltip:
- Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 5.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.x-10.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.
- Всплывающее окно подсказки автоматически подстраивается под размер текста, длинный текст переносится. Подсказка не выходит за пределы экрана и всегда целиком находится в видимой области web-страницы, размер окна подсказки при достижении краев экрана не искажается. Корректно обрабатывается вертикальная и горизонтальная прокрутка, а также фреймы.
- Простое подключение скрипта, не требующее никаких навыков программирования. Для продвинутых пользователей смена внешнего вида окна подсказки через собственные стили, расширение списка поддерживаемых тегов. Подключаемый скрипт имеет очень небольшой размер и не требует для работы дополнительных файлов.
- Хорошая интеграция скрипта с различными AJAX-компонентами. После загрузки через AJAX и обновления какого-нибудь фрагмента текста на странице достаточно вызвать всего одну функцию PCL_TooltipUpdate() и всплывающие подсказки сразу будут доступны в обновленной части страницы. Пример - динамический AJAX-календарик у меня на сайте.
- Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Nice Tooltip за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов! Всех барыг на кол.
Читать статью целиком »
Просмотров: 7228 | Комментариев: 32

Генераторы прелоадеров
08.02.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Прелоадеры - это анимированные картинки, которые отображаются на период выполнения какого-либо действия. Их обычно используют на сайтах, например, фоновым изображением при отрисовке объемной картинки, индикатором при отправке и получении данных через AJAX, загрузке страницы и т.п. Как правило, анимация в прелоадерах просто закольцована и не отображает реального положения дел (то есть процент обработанной информации), но все равно создает хоть какую-то видимость, что процесс запущен. Сам процесс, впрочем, может наглухо висеть или вообще сдохнуть, но это уже другая история. В этой статье я собрал наиболее интересные сайты, с помощью которых вы можете сгенерировать прелоадер для своего проекта с нужными вам параметрами.
Генератор прелоадеров Preloaders.net
Preloaders.net - активно развивающийся отечественный проект. Вы можете выбрать прелоадер из нескольких категорий и множества вариантов, задать его размеры, скорость анимации, цвета, а затем сохранить полученную картинку себе на компьютер. Варианты прелоадеров постоянно пополняются, есть интерфейс на русском языке. Рекомендую к использованию.
Читать статью целиком »
Просмотров: 25593 | Комментариев: 5

Размещение контента на 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>
Просмотров: 8522 | Комментариев: 12

Стилизация 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>
Читать статью целиком »
Просмотров: 19381 | Комментариев: 14
