Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2011, 16:09
Аспирант
Отправить личное сообщение для Johny Посмотреть профиль Найти все сообщения от Johny
 
Регистрация: 20.08.2010
Сообщений: 54

"Живые" элементы
Всем доброго времени суток. Есть скрипт, который выводит на первый чекбокс подсказку и если человек скролит страницу вниз и если чекбокс скрывается из видимости, то подсказка передвигается на следующий видимый чекбокс. Подскажите, пожалуйста, если создаются новые чекбоксы то как к ним привязать это? Например, если на страницу пришли новые чекбоксы через аякс. Пробовал .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, 04.04.2011 в 17:31.
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2011, 10:42
Аспирант
Отправить личное сообщение для Johny Посмотреть профиль Найти все сообщения от Johny
 
Регистрация: 20.08.2010
Сообщений: 54

Иными словами как можно реализовать live() в связке с scroll?И возможно ли вообще это?Гугл выдает множество похожих запросов, но нигде нет решения.
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2011, 11:54
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Говнокод.
Особенно смешное место вот это:
var j = $(".checkbox-check").length;
for (i=0;i<j;i++){
  var el = $(".checkbox-check")[i];
Обратите внимание, как автор ускоряет работу скрипта, вынеся в отдельную переменную длину выборки, а потом делает каждый раз новые выборки
Johny, это раздел "Общие вопросы Javascript". Для jQuery есть свой раздел. Если ума не хватает даже правильно разместить тему, займись чем-нибудь по-проще, чем программирование.
Ответить с цитированием
  #4 (permalink)  
Старый 05.04.2011, 13:29
Аспирант
Отправить личное сообщение для Johny Посмотреть профиль Найти все сообщения от Johny
 
Регистрация: 20.08.2010
Сообщений: 54

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);
	    		}
			}
		}
	}
});
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2011, 13:31
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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

или так:
var el = $('.checkbox-check:eq('+i+')');
Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2011, 13:45
Аспирант
Отправить личное сообщение для Johny Посмотреть профиль Найти все сообщения от Johny
 
Регистрация: 20.08.2010
Сообщений: 54

monolithed, спасибо, но по совету Sweet я решил сразу вытащить все элементы, соответственно и скорость увеличилась где-то в 2 раза. Теперь мне стало интересно как можно было бы по-другому всё это сделать.
Ответить с цитированием
  #7 (permalink)  
Старый 07.04.2011, 06:43
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от monolithed
var el = $(".checkbox-check")[i];
кстати, на этом шаге jQuery взбрыкнет и попросит сделать так:
var el = $(".checkbox-check").eq(i);
или так:
var el = $('.checkbox-check:eq('+i+')');
чего это взбрыкнет? Обращение по индексу - это то же самое что метод get. А там потом getBoundingClientRect идет, так что взбрыкнет как раз с eq
Ответить с цитированием
  #8 (permalink)  
Старый 07.04.2011, 08:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Вариант ...
<!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>
Ответить с цитированием
  #9 (permalink)  
Старый 07.04.2011, 09:28
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а вообще задача какая-то, из области теоретического бессознательного. Раз на то пошло, мне больше нравится идея мертвых элементов
<input disabled>
Ответить с цитированием
  #10 (permalink)  
Старый 07.04.2011, 12:57
Аспирант
Отправить личное сообщение для Johny Посмотреть профиль Найти все сообщения от Johny
 
Регистрация: 20.08.2010
Сообщений: 54

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выбрать li элементы из первого уровня меню TicTac Общие вопросы Javascript 9 02.05.2013 21:05
Обернуть все элементы, до определённого элемента dom majahead jQuery 6 30.03.2011 18:15
Загрузить элементы документа с другой страницы alexrussia Events/DOM/Window 10 25.03.2011 10:17
Как удалить повторные элементы из массива? YISHIMITSY Общие вопросы Javascript 1 04.05.2010 00:04
mouseout: Определить дочерние элементы Papa Общие вопросы Javascript 3 03.02.2010 20:29