"Живые" элементы
Всем доброго времени суток. Есть скрипт, который выводит на первый чекбокс подсказку и если человек скролит страницу вниз и если чекбокс скрывается из видимости, то подсказка передвигается на следующий видимый чекбокс. Подскажите, пожалуйста, если создаются новые чекбоксы то как к ним привязать это? Например, если на страницу пришли новые чекбоксы через аякс. Пробовал .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);
}
}
}
}
|
Иными словами как можно реализовать live() в связке с scroll?И возможно ли вообще это?Гугл выдает множество похожих запросов, но нигде нет решения.
|
Говнокод.
Особенно смешное место вот это:
var j = $(".checkbox-check").length;
for (i=0;i<j;i++){
var el = $(".checkbox-check")[i];
Обратите внимание, как автор ускоряет работу скрипта, вынеся в отдельную переменную длину выборки, а потом делает каждый раз новые выборки:lol:Johny, это раздел "Общие вопросы Javascript". Для jQuery есть свой раздел. Если ума не хватает даже правильно разместить тему, займись чем-нибудь по-проще, чем программирование. |
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);
}
}
}
}
});
|
Цитата:
var el = $(".checkbox-check").eq(i);
или так:
var el = $('.checkbox-check:eq('+i+')');
|
monolithed, спасибо, но по совету Sweet я решил сразу вытащить все элементы, соответственно и скорость увеличилась где-то в 2 раза. Теперь мне стало интересно как можно было бы по-другому всё это сделать.
|
Цитата:
|
Вариант ...
<!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>
|
а вообще задача какая-то, из области теоретического бессознательного. Раз на то пошло, мне больше нравится идея мертвых элементов :)
<input disabled> |
Всем спасибо и отдельно рони. Всё, как обычно, оказалось намного проще. Отсается только один вопрос: неужели до сих пор нельзя никак связать live() и scroll? Этот вопрос уже задавал в разделе jquery. Глухо. На сайте jquery тикет с такой же проблемой был закрыт 2 года назад, сказали что в разработке. Неужели до сих пор нет альтернатив?
|
| Часовой пояс GMT +3, время: 12:42. |