Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2021, 23:41
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 78

Почему не работает jquery inview?
Помогите найти почему не работает, все вроде сделал как надо!

Вот сам плагин ---> https://github.com/zuk/jquery.inview/
Тут демо ---> https://codepen.io/ethereal94/pen/yLVvxmo

Сам плагин должен определить если блок полностью в поле зрения!

P.S есть другая модификация этого плагина, она работает, но не так как мне надо. Тот плагин определяет когда блок только входит в поле зрения, мне нужно что б когда блок будет полностью в поле зрения.
https://github.com/protonet/jquery.inview

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 27.02.2021, 00:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

ethereal,
вам же показали, как сделать это без плагина https://javascript.ru/forum/dom-wind...tml#post534123
Ответить с цитированием
  #3 (permalink)  
Старый 27.02.2021, 00:13
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 78

Да, но то мне не подходит! Демо которую я показал, это простой вариант, мне нужно немножко под другую задачу. Этот плагин так как он есть подходит, только он не работает!
Ответить с цитированием
  #4 (permalink)  
Старый 27.02.2021, 00:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

Сообщение от ethereal
почему не работает,
плагин рассчитан на работу не выше jQuery 2.2
Ответить с цитированием
  #5 (permalink)  
Старый 27.02.2021, 00:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

Сообщение от ethereal
Да, но то мне не подходит!
чем не подходит предложенный код? если он делает тоже самое что плагин?
Ответить с цитированием
  #6 (permalink)  
Старый 27.02.2021, 00:25
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 78

Не работает даже с jQuery не выше 2.2
Ответить с цитированием
  #7 (permalink)  
Старый 27.02.2021, 00:28
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 78

Как мне тот код внедрить в это:
$(function() {
		$('.site--video').on('inview', function(event, isInView, topOrBottomOrBoth) {
		  if (isInView) {
		    $(this).bgVideo();
		    $(this).get(0).play(); 
		  } else {
		    $(this).get(0).pause();
	            $(this).get(0).currentTime = 0;
		  }
		});
		$('.site--image---video').on('inview', function(event, isInView) {
		  if (isInView) {
		    $(this).addClass( "show" );
		  } else {
		    $(this).removeClass( "show" );
		  }
		});
	});
Ответить с цитированием
  #8 (permalink)  
Старый 27.02.2021, 00:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

Сообщение от ethereal
Не работает даже с jQuery не выше 2.2


<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    body {
    width: 3000px;
    height: 3000px;
}
.element {
    width: 300px;
    height: 300px;
    float: left;
    margin: 10px;
    background: coral;
}
.visible.element {
    background: skyblue;
}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
    <script>
$(function() {
$('.element').on('inview', function (event, visible, topOrBottomOrBoth) {   console.log(visible)
    if (visible == true) {
        // element is now visible in the viewport
        if (topOrBottomOrBoth == 'top') {
            // top part of element is visible
        } else if (topOrBottomOrBoth == 'bottom') {
            // bottom part of element is visible
        } else {
            // whole part of element is visible
            $(this).addClass("visible");
        }
    } else {
        // element has gone out of viewport
        $(this).removeClass("visible");
    }
});



});
    </script>
</head>

<body>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>


</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 27.02.2021, 00:38
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 78

Но все ровно не работает по горизонтале, а в комментарий написано // whole part of element is visible
Ответить с цитированием
  #10 (permalink)  
Старый 27.02.2021, 00:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

Сообщение от ethereal
Как мне тот код внедрить в это:
document.addEventListener('DOMContentLoaded', function() {
    const lazyAnimate = divs => {
        divs.forEach(el => {
            let isInView = el.intersectionRatio > .4;
            let div = el.target;
            if (div.classList.contains('site--image---video')) div.classList.toggle('show', isInView);
            else {
                if (isInView) {
                    div.play();
                    //$(div).bgVideo();
                } else {
                    div.pause();
                    div.currentTime = 0;
                }
            }
        });
    }
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "100px",
        threshold: [0.1, 0.8] //настроить видимость
    });
    let container = document.querySelectorAll('.site--video, .site--image---video');
    container.forEach(div => observer.observe(div))
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться почему не работает скрипт корректно Batyabest AJAX и COMET 1 09.07.2015 05:08
Не работает console.log.apply(this,arguments) - Почему? Почемучкин Javascript под браузер 9 31.10.2014 16:17
почему один вызов load работает, а другой - нет kravru jQuery 1 16.09.2013 19:51
Метод JQuery $.post работает через раз Dimaz AJAX и COMET 3 22.11.2012 15:52
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 19:50