<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру

PHP и MySQL с Нуля до Гуру

Данный курс - это более 20-ти часов видеоуроков по изучению PHP и MySQL. Ключевой момент курса - это создание движка для сайта с нуля. Каждая строчка комментируется. Практически для каждого урока имеются упражнения. Причём данные упражнения направлены не только на закрепление материала, но и на реализацию реальных задач, встающих перед Web-разработчиками при создании сайтов. После курса Вы сможете без проблем создавать движки для любых сайтов.

Также почти к каждому уроку идут упражнения для закрепления материала.

Просмотрев курс и выполнив упражнения, Вы сможете без проблем создавать функциональные движки для самых различных сайтов.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Индикатор позиции чтения. Часть 3

Индикатор позиции чтения. Часть 3

Расчет ширины/высоты окна и документа в JavaScript запутан и сильно различается от браузера к браузеру. К счастью, jQuery позволяет нам абстрагироваться от этой сложности и предоставляет более удобный механизм для вычисления размеров окна и документа. Поэтому, в остальной части статьи для реализации индикатора прогресса чтения мы будем полагаться на jQuery.

До того как мы приступим непосредственно к вычислениям, нам необходимо подключить библиотеку jQuery:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

jQuery нам нужен для расчета значений атрибутов max и value:

  1. max – значением атрибута max является та часть документа, которая лежит вне видимой области просмотра и которая может быть рассчитана путем вычитания высоты окна из высоты документа.
     var winHeight = $(window).height(),
       docHeight = $(document).height();

     var max = docHeight - winHeight;

     $('progress').attr('max', max);
  1. value – первоначально, значение этого атрибута установлено в ноль (его мы уже записали в разметке). Однако, как только пользователь начинает прокручивать страницу, вертикальный отступ верхнего края документа от верхнего края окна будет увеличиваться. Если, полоса прокрутки в самом верху или, если элемент не может быть промотан, смещение будет равняться нулю.
     var value = $(window).scrollTop();
     $('progress').attr('value', value);

Вместо использования объекта document в $(document).height(), мы можем использовать такие элементы как section, article или div, которые содержат контент**,** для вычисления более точной позиции индикатора прогресса чтения. Такое уточнение становится важным, когда у вас есть статья в блоге, которая содержит очень много комментариев, которые по объему занимают более половины статьи.

Теперь, каждый раз, когда пользователь будет проматывать страницу, нам будет необходимо пересчитывать y-отступ от верхнего края окна и затем назначать его атрибуту value индикатора. Обратите внимание, что атрибут max остается тем же и не меняет своего значения, когда пользователь скролит страницу.

  $(document).on('scroll', function() {
    var value = $(window).scrollTop();
    progressBar.attr('value', value);
  });

Направление, в котором пользователь скролит страницу, не имеет значение, так как мы всегда вычисляем y-отступ от верха окна.

Важно отметить, что наш код должен выполниться только тогда, когда будет загружена объектная модель документа (DOM), иначе преждевременная калькуляция высоты окна и документа может привести к очень странным результатам.

  $(document).on('ready', function() {

    var winHeight = $(window).height(),
       docHeight = $(document).height(),
       progressBar = $('progress'),
       max, value;

       /* Установка макисмальной длины прокручиваемой области */
       max = docHeight - winHeight;
       progressBar.attr('max', max);

    $(document).on('scroll', function(){
      value = $(window).scrollTop();
      progressBar.attr('value', value);
    });

  });

Есть и другой способ заставить данный код выполниться только после полной загрузки документа – его надо поместить в конец разметки страницы.

В общем-то, это все, что нам нужно для создания индикатора прогресса чтения, который в равной степени будет хорошо работать во всех браузерах, поддерживающих HTML5 элемент progress.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.