Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перемещение элементов (https://javascript.ru/forum/misc/16155-peremeshhenie-ehlementov.html)

Johny 28.03.2011 13:37

Перемещение элементов
 
Всем доброго времени суток. Столкнулся со следующей проблемой: есть чекбоксы с одним класом и разными id. Все они распололжены вертикально. На данный момент возле первого при загрузке страницы появляется подсказка. Возможно ли сделать так, чтобы при скролинге или перемещении страницы вниз если эта подсказка скрывается(становится не видна из-за скрола) выводить у того чекбокса, который виден?На сколько я понимаю, можно брать $(window).scrollTop() и когда она становится равной абсолютному положению чекбокса переходить на следующий. Но как определить абсолютное положение так и не понял. Спасибо.

Aetae 28.03.2011 13:49

http://javascript.ru/ui/offset

Johny 28.03.2011 17:15

Aetae, спасибо. Получился следующий код
$(window).scroll(function () {
    	var i;
    	var j = $(".checkbox-check").length;
    	for (i=0;i<j;i++)
    	{
    		var el = document.getElementsByClassName('checkbox-check')[i];
    		var br = el.getBoundingClientRect();
    		var top_el = br.top;
    		if (top_el <= 0)
    		{
        		var position_next = $('.checkbox-check').eq(i+1).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    	}
    });
    
	$(document).ready(function(){
		var position = $('.checkbox-check').offset();
		var top = position.top;
		$("#tooltip-checkbox-check").css("top",top + 20).css("left","806px").show();
	});


Но первый элемент задействуется только вначале...Не подскажите как можно это исправить?

Johny 29.03.2011 13:16

Если кому интересно:
$(window).scroll(function () {
    	var i;
    	var j = $(".checkbox-check").length;
    	for (i=0;i<j;i++)
    	{
    		var el = document.getElementsByClassName('checkbox-check')[i];
    		var br = el.getBoundingClientRect();
    		var top_el = br.top;
    		if (i == 0 && top_el > 0)
    		{
        		var position_next = $('.checkbox-check').eq(0).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    		if (top_el <= 0)
    		{
        		var position_next = $('.checkbox-check').eq(i+1).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    	}
    });

Johny 29.03.2011 13:22

Теперь всё везде работает. Сори за флуд.

window.onscroll = scrollEvent;
	function scrollEvent() {
    	var i;
    	var j = $(".checkbox-check").length;
    	for (i=0;i<j;i++)
    	{
    		//var el = document.getElementsByClassName('checkbox-check')[i];
    		var el = $(".checkbox-check")[i];
    		var br = el.getBoundingClientRect();
    		var top_el = br.top;
    		if (i == 0 && top_el > 0)
    		{
        		var position_next = $('.checkbox-check').eq(0).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    		if (top_el <= 0)
    		{
        		var position_next = $('.checkbox-check').eq(i+1).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    	}
	}

Matre 29.03.2011 13:43

Попробуйте в .css() указывать величину в пикселах, а не просто число.

Т.е. .css("top", top + "px");

Johny 29.03.2011 14:01

Цитата:

Сообщение от Matre (Сообщение 98357)
Попробуйте в .css() указывать величину в пикселах, а не просто число.

Т.е. .css("top", top + "px");

Спасибо, но проблема была в кроссбраузерности...FF сразу все слопал за радость, а остальные, например, ie только после замены
document.getElementsByClassName('checkbox-check')[i]
на
$(".checkbox-check")[i]
и назначения на js
window.onscroll = scrollEvent
, т.к. jquery
$(window).scroll
он не хотел понимать почему-то...


Часовой пояс GMT +3, время: 06:08.