Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2012, 14:04
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Проблемы со слайдером
Делаю слайдер, но столкнулся с проблемами и прошу помощи в решении.

1. когда нажимаешь на ползунок, перемещаешь его в одну из сторон и выходишь за поля элемента слайдера(но при этом не отпуская зажатую кнопку), а потом отпускаешь его, то он всё равно продолжает следовать за мышью(в разрешённых пределах). Хотя, событие onmouseup должно было бы прекратить движение ползулка.. Как это исправить?

2. хочу, чтобы при перемещении ползунка показывалось на сколько процентов от продвинулся от своего начального состояния до конечного. И всё в роде бы норм, да только вот когда ползунок доводишь до максимума, то показываются не все 100%, а 93%. Это происходит из-за выставленного условия "if(draggerLeft < 0 || draggerLeft > scale.offsetWidth - dragger.offsetWidth)", но если это условие изменить на "if(draggerLeft < 0 || draggerLeft > scale.offsetWidth)", то считается всё нормально, но если ползунок довести на максимум, то он на длину dragger.offsetWidth выходит за пределы "шкалы".


Сам код слайдера
function slider() {
	var source = document.getElementById('slider');
	
	var scale = document.createElement('div');
	scale.setAttribute('class', 'scaleClass');
	source.appendChild(scale);
	scale.style.width = '200px';
	scale.style.height = '10px';
	scale.style.backgroundColor = '#ddd';
	sCoords = getCoords(scale);
	var dragger = document.createElement('div');
	dragger.setAttribute('class', 'draggerClass');
	dragger.style.position = 'relative';
	scale.appendChild(dragger);
	dragger.style.width = '11px';
	dragger.style.height = '11px';
	dragger.style.border = '1px solid black';
	dragger.style.borderRadius = '10px';
	dragger.style.backgroundColor = 'silver';
	
	dragger.onmousedown = function(e) {
		e = getEvent(e);
		var coords = getCoords(dragger);
		var shiftX = e.pageX - coords.left;
		
		document.onmousemove = function(e) {
			draggerLeft = e.pageX - shiftX - sCoords.left;
			if(draggerLeft < 0 || draggerLeft > scale.offsetWidth - dragger.offsetWidth)
				return;
			dragger.style.left = draggerLeft + 'px';
			
			document.getElementById('result').innerHTML = parseInt(draggerLeft / scale.offsetWidth * 100) + '%';
		};
	};
	dragger.onmouseup = function() {
		document.onmousemove = document.onmouseup = null;
	};
	dragger.ondragstart = function() { return false; };
}
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2012, 17:47
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

1. mouseup на документ
2. особо не вникал, значит берите за 100% scale.offsetWidth - dragger.offsetWidth
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 16.03.2012 в 17:50.
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2012, 20:05
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

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

2. спасибо!)) Как же я сам не догадался
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2012, 23:29
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Ребят, ну может у кого ещё какие мысли есть по поводу первого вопроса?)
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2012, 09:53
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

(Sandr), рабочий пример где глючит.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #6 (permalink)  
Старый 18.03.2012, 17:14
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Вот файл.
Вложения:
Тип файла: zip index.zip (1.1 Кб, 5 просмотров)
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2012, 23:24
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Помощь больше не нужна.
Ответить с цитированием
  #8 (permalink)  
Старый 16.05.2012, 23:17
Аватар для viy.li
Аспирант
Отправить личное сообщение для viy.li Посмотреть профиль Найти все сообщения от viy.li
 
Регистрация: 23.02.2011
Сообщений: 49

файл не качается - с чем это связано
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы с отображением элементов на странице mozyr Javascript под браузер 17 13.01.2012 02:34
Помогите разобраться с jquery слайдером!!! Andy76 jQuery 0 25.11.2011 18:12
проблемы с draggble() внутри iframe Гоша Элементы интерфейса 0 07.07.2011 12:30
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47