Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2017, 05:02
Кандидат Javascript-наук
Отправить личное сообщение для Зосимов Посмотреть профиль Найти все сообщения от Зосимов
 
Регистрация: 11.02.2013
Сообщений: 102

Как показать div
Всем привет.
Есть три элемента div на странице.
Задача, загружать контент в элемент, когда он полностью появился на странице.
Сами элементы статичные div с рамкой.
(на картинке окно черное. второй div красный еще не полностью в окне)

Понимаю что надо как то получить координаты элемента, и когда он будет в области видимости полностью, произвести событие. Но как определить в окне он или нет, разобраться не могу.
Спасибо.
Изображения:
Тип файла: jpg div.jpg (29.0 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2017, 07:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

Сообщение от Зосимов
когда он будет в области видимости полностью
function checkViewport(el) {
    var H = document.documentElement.clientHeight,
        pos = el.getBoundingClientRect();
        return pos.top  > 0 && pos.bottom  < H
    }
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2017, 08:48
Кандидат Javascript-наук
Отправить личное сообщение для Зосимов Посмотреть профиль Найти все сообщения от Зосимов
 
Регистрация: 11.02.2013
Сообщений: 102

checkViewport($('.bz'));

подскажите, правильно ли я вызываю функцию передавая ей div элемент?
и еще вопрос - когда нужно вызывать данную функцию? если ее вызывать в $(window).scroll то получается при каждом скролле будет вызываться функция.
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2017, 09:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

Зосимов,
checkViewport($('.bz')[0]);

Сообщение от Зосимов
$(window).scroll то получается при каждом скролле будет вызываться функция.
да, поставьте блоку класс "отработано" -- нет класса что -то делаем и добавляем класс -- иначе отмена
Ответить с цитированием
  #5 (permalink)  
Старый 17.01.2017, 10:17
Кандидат Javascript-наук
Отправить личное сообщение для Зосимов Посмотреть профиль Найти все сообщения от Зосимов
 
Регистрация: 11.02.2013
Сообщений: 102

Сообщение от рони Посмотреть сообщение
да, поставьте блоку класс "отработано" -- нет класса что -то делаем и добавляем класс -- иначе отмена
но если изменить/удалить класс, то дальше вызывается ошибка при скролле. так как элемент не существует.
может есть еще способ выполнить функцию один раз?
Ответить с цитированием
  #6 (permalink)  
Старый 17.01.2017, 10:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

Сообщение от Зосимов
то дальше вызывается ошибка при скролле
видимо нет
Сообщение от рони
иначе отмена
Ответить с цитированием
  #7 (permalink)  
Старый 17.01.2017, 10:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

Зосимов,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .bz{
    height: 300px;
    width: 100px;
    font-size: 22px;
    line-height: 44px;
    color: #FFFFFF;
    background-color: #8B4513;
    text-align: center;
    margin-top: 30px;
   }
  p{
    height: 2000px;
  }
  .worked {
    background-color: #FF00FF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {

    function checkViewport(el) {
    var H = document.documentElement.clientHeight,
        pos = el.getBoundingClientRect();
        return pos.top  > 0 && pos.bottom  < H
    }

    $(window).scroll(function() {
        $('.bz:not(.worked)').each(function(indx, el) {
            var visibility = checkViewport(el);
            if(visibility) {$(el).addClass('worked');
            // load data
            }

        })
    })
});
  </script>
</head>

<body>
<p></p>
<div class="bz" >0</div>
<div class="bz" >0</div>
<div class="bz" >0</div>
<p></p>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 17.01.2017, 10:45
Кандидат Javascript-наук
Отправить личное сообщение для Зосимов Посмотреть профиль Найти все сообщения от Зосимов
 
Регистрация: 11.02.2013
Сообщений: 102

рони, спасибо !
сделал в общем так -
if (!$('#bzh').hasClass('sel')) {
    console.log("good");
    $( ".bz" ).addClass("sel");
    }

вроде срабатывает только один раз.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обернуть каждый тег в несколько DIV содержащих по 1 атрибуту от этих самых тегов? Zaxap Общие вопросы Javascript 10 08.11.2016 10:56
Как правильно обновить div из БД в MVC??? espltd AJAX и COMET 2 11.04.2014 00:28
Как отправить div внутри form ruslite AJAX и COMET 38 05.03.2014 01:48
как передать this и показать по нему скрытый текст mbp64 jQuery 4 26.11.2012 12:52
Как побороть "активированный" DIV? XPyCTang Events/DOM/Window 1 21.11.2012 11:01