Blog. Just Blog

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

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

Загрузка видимых изображений (Lazy Load) на JavaScript

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

Загрузка видимых изображений (Lazy Load) на JavaScript

"Lazy Load", "ленивая" или "отложенная загрузка" - особая технология работы с веб-страницами, когда загружаются только те изображения, которые находятся в поле зрения пользователя. Остальные картинки не загружаются до тех пор, пока пользователь не прокрутит страницу до их попадания в видимую область. При большом количестве изображений на странице такой трюк значительно повышает скорость загрузки сайта, а также экономит трафик пользователя и заметно снижает нагрузку на ваш сервер. Особенно это актуально при работе с сайтами на планшетных компьютерах и смартфонах.

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

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

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

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

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
  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 содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

Читать статью целиком »
Просмотров: 11414 | Комментариев: 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 за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов! Всех барыг на кол.
Если в каком-нибудь из заявленных браузеров скрипт будет работать некорректно, то просьба сообщить в комментариях точную версию браузера и операционную систему.

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

Генераторы прелоадеров

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


Генератор прелоадеров Preloaders.net

Preloaders.net - активно развивающийся отечественный проект. Вы можете выбрать прелоадер из нескольких категорий и множества вариантов, задать его размеры, скорость анимации, цвета, а затем сохранить полученную картинку себе на компьютер. Варианты прелоадеров постоянно пополняются, есть интерфейс на русском языке. Рекомендую к использованию.

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

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

18.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
На разных сайтах в Интернете я часто сталкиваюсь с тем, что на них расположены Flash-объекты, например, видеоплееры с YouTube или фрагменты оформления дизайна на Flash. И при этом различные элементы - плавающие или с абсолютным позиционированием, например, раскрывающиеся меню или всплывающие подсказки, перекрываются областью, занимаемой Flash-объектами. Причем использование атрибута стиля z-index ситуацию не спасает, и в итоге все смотрится очень некрасиво. А ведь решение проблемы очень простое: достаточно в описании Flash-объекта указать параметр wmode со значением opaque:
  1. <param name="wmode" value="opaque">
Получится что-то вроде такого:
  1. <div style="position:relative;">
  2.     <div style="position:absolute;">HelloWorld!</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. Готовый пример можно посмотреть на сайте.

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

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