Javascript.RU

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

JQUERY - конфиликт функция при скроллинге
есть кнопка перемотки вверх-назад, которая первым клик перематывает страницу вверх, запоминаея позицию на странице для возврата.
вторым кликом - происходит возврата сверху страницы в исходное положение на странице (как вконтакте)

хочу добавить обработку событий скролстарт и скролстоп.
для этого использую следующий код
Код:
function scrolled() {
    //do by scroll start
$('.extended-ControlsMenu').hide();
    $(this).off('scroll')[0].setTimeout(function(){
        //do by scroll end
$('.extended-ControlsMenu').show();
        $(this).on('scroll',scrolled);
    }, 1500)
}
$(window).on('scroll',scrolled);
сам по себе код рабочий, сама по себе конпка "вверх-назад" тоже работает.

но, когда коды в скрипт довать коды кнопки и код обработки старт-стоп скроллинга - кнопка перемотки "вверх" работает только в режиме "вверх", а назад - уже не работает.
файрбаг ошибок в скрипте не показывает.

опытным путем установил, что баг возникает изза строчки
Код:
    $(this).off('scroll')[0].setTimeout(function(){
но, что там не так и как исправить - ума не приложу.
если сможете помочь - буду признателен.

полный код скрипта ниже
Код:
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});

function scrolled() {
    //do by scroll start
$('.extended-ControlsMenu').hide();
    $(this).off('scroll')[0].setTimeout(function(){
        //do by scroll end
$('.extended-ControlsMenu').show();
        $(this).on('scroll',scrolled);
    }, 1500)
}
$(window).on('scroll',scrolled);


	$(window).scroll(function() {


	    if (jQuery('#top-link').attr('hidden-button') == 'false') {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('<span id="topicon"></span><span id="text">Наверх</span>').parent().removeClass('bottom_button').addClass('top_button');
		} else {
			topLink.children('a').html('<span id="backicon"></span>').parent().removeClass('top_button').addClass('bottom_button');
		}
	    }
	});
	topLink.click(function(e) {
		if($(this).hasClass('bottom_button')){
			// при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
			$("body").scrollTo( pos + 'px', 200 );
		} else{
			// определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
			pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
			$("body,html").animate({scrollTop: 0},200);
		}
		return false;
	});
});
Ответить с цитированием
  #2 (permalink)  
Старый 12.11.2014, 12:38
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Ты молодец, конечно, вешаешь событие sroll на свою вверх-вниз кнопку, и второе событие scroll которое убивает оба, и навешивает снова только второе.
Используй namespace при навешивании и удалении событий, что бы не удалять все подряд, а лучше перепиши так чтоб не пришлось вообще удалять, тем более через setTimeout

Последний раз редактировалось krasovsky, 12.11.2014 в 12:50.
Ответить с цитированием
  #3 (permalink)  
Старый 12.11.2014, 12:54
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

простите, не совсем понял каким образом события мешают друг другу.
постараюсь ответить на ваше сообщение, а потом, пожалуйста, объясните как для слабоумного...

событие $(window).on('scroll',scrolled); срабатывает для блока с классом .extended-ControlsMenu
и оно работает даже вместе с topLink.click(function(e) {, где и реализованы вычисления для кнопки вверх-вниз с идентификатором #top-link.

если я вас правильно понял, нужно разнести события? каким образом это можно сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 12.11.2014, 12:57
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

не на столько силен в джаваскриптах, как может показаться.
$(window).on('scroll',scrolled); брал из примера и адаптировал.
Цитата:
Используй namespace при навешивании и удалении событий, что бы не удалять все подряд, а лучше перепиши так чтоб не пришлось вообще удалять, тем более через setTimeout
можно примеры?
Ответить с цитированием
  #5 (permalink)  
Старый 12.11.2014, 13:04
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

jQuery.myscrollcontrol(jQuery.fn, {

$(window).on('scroll',scrolled);


function scrolled() {
//do by scroll start
$('.extended-ControlsMenu').hide();
$(this).off('scroll')[0].setTimeout(function(){
//do by scroll end
$('.extended-ControlsMenu').show();
$(this).on('scroll',scrolled);
}, 1500)
}

});

вот так?


upd - ерунда получилась.

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

Сообщение от alecto
простите, не совсем понял каким образом события мешают друг другу.
Я не писал что они мешают друг другу. Я написал что ты вешаешь два события scroll, код одного из которых снимает оба события и тут же вешает только одно из них.

Короче,так должно заработать
$(window).on('scroll.scrolled_ns',scrolled);

function scrolled() {
//do by scroll start
$('.extended-ControlsMenu').hide();
$(this).off('scroll.scrolled_ns')[0].setTimeout(function(){
//do by scroll end
$('.extended-ControlsMenu').show();
$(this).on('scroll.scrolled_ns',scrolled);
}, 1500)
}
Ответить с цитированием
  #7 (permalink)  
Старый 12.11.2014, 15:48
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

ура! заработало! спасибо огромное!

скажите, вот это называется
Цитата:
namespace
scroll.scrolled_ns
?
Ответить с цитированием
  #8 (permalink)  
Старый 13.11.2014, 08:39
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

да, scrolled_ns это неймспейс. Загугли jq пространство имен и все поймешь.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разлетающиеся по диагонали объекты при скроллинге Ленча jQuery 3 28.08.2014 08:49
При нажатии Обзор... Видит все подряд файлы, jQuery File Upload Petja jQuery 3 04.09.2013 12:34
Выгрузка из базы при скроллинге jonee Javascript под браузер 0 14.07.2013 01:56
Зафиксировать элемент при скроллинге. icebergcap Events/DOM/Window 3 20.01.2013 15:58
jQuery UI datepicker -- не биндится при загрузке mkrylov jQuery 4 20.05.2009 20:36