Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.11.2014, 11:40
Аспирант
Отправить личное сообщение для ViRuSreloaded Посмотреть профиль Найти все сообщения от ViRuSreloaded
 
Регистрация: 13.10.2014
Сообщений: 73

addEventListener не срабатывает?
Привет уважаемые форумчане.

Есть лендинг из 3-х страниц.

при скролле создается эффект one-page-scroll

ну и я создал скрипт, который в зависимости от текущей страницы присваивает классы элементам для анимации. Вот код:
<script type="text/javascript">
	function init() {
		window.addEventListener('scroll', function(e){

		if ($('body').hasClass('viewing-page-1')) {
			$('.phone').addClass('y0');
			$('.button').addClass('y1');
			$('.logo').addClass('y2');
		} else {
			$('.phone').removeClass('y0');
			$('.button').removeClass('y1');
			$('.logo').removeClass('y2');
		}
		if ($('body').hasClass('viewing-page-2')) {
			$('.left').addClass('gogo');
			$('.right').addClass('gogo');
		} else {
			$('.left').removeClass('gogo');
			$('.right').removeClass('gogo');
		}
		if ($('body').hasClass('viewing-page-3')) {
			$('.iphone').addClass('wtf');
		} else {
			$('.iphone').removeClass('wtf');
		}
		}
		);
	}
    window.onload = init();
</script>


Консоль ошибок не выдает.
При скролле класс body "viewing-page-X" присваивается. Где X это номер страницы от 1 до 3.

Но почему-то ничего не срабатывает.

Если что вот линк на сам проект:

http://test2.stdmed.ru
Ответить с цитированием
  #2 (permalink)  
Старый 12.11.2014, 11:48
Аспирант
Отправить личное сообщение для ViRuSreloaded Посмотреть профиль Найти все сообщения от ViRuSreloaded
 
Регистрация: 13.10.2014
Сообщений: 73

Только что дошло. Скролла то там нет как такового.
Тогда след. вопрос: на что поставить listener чтобы он отслеживал?
Ответить с цитированием
  #3 (permalink)  
Старый 12.11.2014, 12:02
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

смотри документацию по плагину.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 12.11.2014, 13:22
Аспирант
Отправить личное сообщение для ViRuSreloaded Посмотреть профиль Найти все сообщения от ViRuSreloaded
 
Регистрация: 13.10.2014
Сообщений: 73

Что тут не так?

вроде все логично:
<script type="text/javascript">
	function init() {
		window.addEventListener("DOMMouseScroll", mouse_wheel, false);

		var mouse_wheel = function(event) {

		if ($('body').hasClass('viewing-page-1')) {
			$('.phone').addClass('y0');
			$('.button').addClass('y1');
			$('.logo').addClass('y2');
		} else {
			$('.phone').removeClass('y0');
			$('.button').removeClass('y1');
			$('.logo').removeClass('y2');
		}
		if ($('body').hasClass('viewing-page-2')) {
			$('.left').addClass('gogo');
			$('.right').addClass('gogo');
		} else {
			$('.left').removeClass('gogo');
			$('.right').removeClass('gogo');
		}
		if ($('body').hasClass('viewing-page-3')) {
			$('.iphone').addClass('wtf');
		} else {
			$('.iphone').removeClass('wtf');
		}
		}
	}
    window.onload = init();
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 12.11.2014, 13:32
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

На момент
window.addEventListener("DOMMouseScroll", mouse_wheel, false);
mouse_wheel === undefined, т.к.
function init() {
    window.addEventListener("DOMMouseScroll", mouse_wheel, false);

    var mouse_wheel = function(event) {}
}
это то же самое что:
function init() {
    var mouse_wheel;
    window.addEventListener("DOMMouseScroll", mouse_wheel, false);

    mouse_wheel = function(event) {}
}

Это принципы js, которые следовало бы знать.
Чтобы работало так как вы хотите - следует объявлять таки функцию:
function init() {
    window.addEventListener("DOMMouseScroll", mouse_wheel, false);

    function mouse_wheel(event) {}
}


P.S. Крутить страницу можно ещё и стрелочками, и кликом по "точкам" справа. Вам же сказали что надо делать: читать документацию к плагину, который вам реализует эту хрень. Там гарантировано есть специальное событие скролла.
...
https://github.com/peachananr/onepage-scroll
Цитата:
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
Как же это сложно - читать документацию того, что используешь. Ведь сто раз приятней потратить кучу времени на реализацию через задницу.
*с презрением плюнул под ноги ViRuSreloaded*
__________________
29375, 35

Последний раз редактировалось Aetae, 12.11.2014 в 13:42.
Ответить с цитированием
  #6 (permalink)  
Старый 12.11.2014, 13:46
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

DOMMouseScroll - неподдерживаемое событие. Тебе же написали смотри доку плагина, там наверняка есть коллбэк на смену страницы, вот в нем пиши свой код
Ответить с цитированием
  #7 (permalink)  
Старый 12.11.2014, 14:24
Аспирант
Отправить личное сообщение для ViRuSreloaded Посмотреть профиль Найти все сообщения от ViRuSreloaded
 
Регистрация: 13.10.2014
Сообщений: 73

Сделал как Вы сказали и все ЗАРАБОТАЛО!!!!!!!!!!!!!!!!

Я вас обожаю дорогие форумчане!

код получился такой:

<script>
	  $(document).ready(function(){
      $(".scroll").onepage_scroll({
    sectionContainer: "section",
    responsiveFallback: 400,
    loop: false,
        beforeMove: function(index) {
    	if ($('body').hasClass('viewing-page-1')) {
			$('.phone').addClass('y0');
			$('.button').addClass('y1');
			$('.logo').addClass('y2');
		} else {
			$('.phone').removeClass('y0');
			$('.button').removeClass('y1');
			$('.logo').removeClass('y2');
		}
		if ($('body').hasClass('viewing-page-2')) {
			$('.left').addClass('gogo');
			$('.right').addClass('gogo');
		} else {
			$('.left').removeClass('gogo');
			$('.right').removeClass('gogo');
		}
		if ($('body').hasClass('viewing-page-3')) {
			$('.iphone').addClass('wtf');
		} else {
			$('.iphone').removeClass('wtf');
		}
    }
   });
	});
</script>
Ответить с цитированием
  #8 (permalink)  
Старый 12.11.2014, 14:27
Аспирант
Отправить личное сообщение для ViRuSreloaded Посмотреть профиль Найти все сообщения от ViRuSreloaded
 
Регистрация: 13.10.2014
Сообщений: 73

кстати afterMove как раз позволяет достичь желаемого результата, так как beforeMove инициализирует анимацию на странице которая откроется через 0.4 сек.
Ответить с цитированием
  #9 (permalink)  
Старый 12.11.2014, 15:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от ViRuSreloaded
hasClass('viewing-page-1')
Вообще-то тебе в index передается номер видимой страницы, так что незачем дергать body
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 12.11.2014, 18:20
Аспирант
Отправить личное сообщение для ViRuSreloaded Посмотреть профиль Найти все сообщения от ViRuSreloaded
 
Регистрация: 13.10.2014
Сообщений: 73

Вопрос по кроссплатформенности теперь появился:
при скролле на планшете не работает one-page-scroll

соответственно не срабатывает отображение элементов на второй странице, так как не меняется класс у 'body'.

Есть какой-нить простой способ???

может кто посоветует?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
onclick срабатывает со 2 раза в ie djonA Общие вопросы Javascript 19 25.03.2013 01:07
Не срабатывает обработчик window.onload. Alex82 Events/DOM/Window 16 22.02.2013 21:06
AJAX запрос в Internet Explorer срабатывает через раз nikolayseo jQuery 5 13.11.2012 00:13
Нажатие по дате в календаре срабатывает только со второго клика afr0 Events/DOM/Window 4 31.10.2012 13:39
Не срабатывает при отсутствии в теле документа yuriii jQuery 3 06.05.2010 17:45