Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   "Живые" элементы (https://javascript.ru/forum/misc/16339-zhivye-ehlementy.html)

Johny 04.04.2011 16:09

"Живые" элементы
 
Всем доброго времени суток. Есть скрипт, который выводит на первый чекбокс подсказку и если человек скролит страницу вниз и если чекбокс скрывается из видимости, то подсказка передвигается на следующий видимый чекбокс. Подскажите, пожалуйста, если создаются новые чекбоксы то как к ним привязать это? Например, если на страницу пришли новые чекбоксы через аякс. Пробовал .live(), но по видимому к скролу не применяется...Спасибо.

$(document).ready(function(){
	var position = $('.checkbox-check').offset();
	var top = position.top;
	$("#tooltip-checkbox-check").css("top",top + 20).css("left","879px").show();
});

window.onscroll = scrollEvent;
function scrollEvent() {
	var i;
	var j = $(".checkbox-check").length;
	for (i=0;i<j;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);
    		}
		}
	}
}

Johny 05.04.2011 10:42

Иными словами как можно реализовать live() в связке с scroll?И возможно ли вообще это?Гугл выдает множество похожих запросов, но нигде нет решения.

Sweet 05.04.2011 11:54

Говнокод.
Особенно смешное место вот это:
var j = $(".checkbox-check").length;
for (i=0;i<j;i++){
  var el = $(".checkbox-check")[i];
Обратите внимание, как автор ускоряет работу скрипта, вынеся в отдельную переменную длину выборки, а потом делает каждый раз новые выборки:lol:
Johny, это раздел "Общие вопросы Javascript". Для jQuery есть свой раздел. Если ума не хватает даже правильно разместить тему, займись чем-нибудь по-проще, чем программирование.

Johny 05.04.2011 13:29

Sweet, спасибо за критику, хотя и жёсткую :) Немного модифицоровал скрипт. Буду очень признателен если сможете подсказать как можно ещё его улучшить. Спасибо.
$(function(){
	var j = $(".checkbox-check").length;
	var els = new Array();
	for (i=0;i<j;i++)
	{
	    els[i] = $(".checkbox-check")[i];
	}
	window.onscroll = scrollEvent;
	function scrollEvent() {
		var i;
		for (i=0;i<j;i++)
		{
			var el = $(els)[i];
			var br = el.getBoundingClientRect();
			var top_el = br.top;
			if (i == 0 && top_el > 0)
			{
	    		var position_next = $(els).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 = $(els).eq(i+1).offset();
	    		if (position_next != null)
	    		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
	    		}
			}
		}
	}
});

monolithed 05.04.2011 13:31

Цитата:

Сообщение от Johny
var el = $(".checkbox-check")[i];

кстати, на этом шаге jQuery взбрыкнет и попросит сделать так:
var el = $(".checkbox-check").eq(i);

или так:
var el = $('.checkbox-check:eq('+i+')');

Johny 05.04.2011 13:45

monolithed, спасибо, но по совету Sweet я решил сразу вытащить все элементы, соответственно и скорость увеличилась где-то в 2 раза. Теперь мне стало интересно как можно было бы по-другому всё это сделать.

x-yuri 07.04.2011 06:43

Цитата:

Сообщение от monolithed
var el = $(".checkbox-check")[i];
кстати, на этом шаге jQuery взбрыкнет и попросит сделать так:
var el = $(".checkbox-check").eq(i);
или так:
var el = $('.checkbox-check:eq('+i+')');

чего это взбрыкнет? Обращение по индексу - это то же самое что метод get. А там потом getBoundingClientRect идет, так что взбрыкнет как раз с eq

рони 07.04.2011 08:35

Вариант ...
<!DOCTYPE html>
<html>
<head>
  <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function () {
   var t = '<span class="hello">hello</span>';
   $(window).scroll(function() {
   $('.hello').remove();
   var top = $(document).scrollTop();
   $(':checkbox').each(function() {
   var p = $(this).position();
   if(p.top+8>top) {$(this).after(t); return false }
      })});
   $(window).scroll();
});
</script>
</head>
<body>
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
</body>
</html>

x-yuri 07.04.2011 09:28

а вообще задача какая-то, из области теоретического бессознательного. Раз на то пошло, мне больше нравится идея мертвых элементов :)
<input disabled>

Johny 07.04.2011 12:57

Всем спасибо и отдельно рони. Всё, как обычно, оказалось намного проще. Отсается только один вопрос: неужели до сих пор нельзя никак связать live() и scroll? Этот вопрос уже задавал в разделе jquery. Глухо. На сайте jquery тикет с такой же проблемой был закрыт 2 года назад, сказали что в разработке. Неужели до сих пор нет альтернатив?


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