клик по скролл-бару
Здравствуйте. У меня по щелчку появляется див с элементами внутри него. Элементов может быть много и так как див ограничен по высоте, у него появляется вертикальный скролл-бар, в зависимости от кол-ва элементов. Так вот, нужно чтобы он вел себя как обычный select. То есть "сворачивался" только тогда, когда либо выбран внутри него элемент либо кликнули вне слоя.
Вариант когда выбран элемент не проблема, меня интересует когда кликнули вне слоя: Я сделал так: $("body").mouseup( function () { $("#j_country_list").addClass("hidden"); } ); Проблема в том, что в FF если в этом диве сликнуть на скролл-бар (с целью прокрутить вниз содержимое) он тоже его скрывает. Как мне исключить скролл-бар? |
дай упрощенный неработающий в ff вариант - http://javascript.ru/paste
|
пробуй при onmousedown запоминать значение .scrollTop а при onmouseup сравнивать это значение и если оно поменялось то не закрывать див
|
а еще лучше при onmousedown поставить флаг "мышь нажата" и запомнить .scrollTop
при onmousemove проверять если "мышь нажата" проверять поменялось ли значение .scrollTop, если поменялось то ставить флаг "скролинг был" при onmouseup проверять если "скролинг был" то не закрывать див |
Собстна сюда код решил вставить...
Я просто не силен в javascript. Если покажите как это делать , буду признателен $(document).ready(function() { $("#j_country_select").bind("click", function () { $("#j_country_list").removeClass("hidden"); }); //$("#j_country_select").srBlur( function () { $("#j_country_list").addClass("hidden"); }); //$("body").mouseup( function () { $("#j_country_list").addClass("hidden"); } ); $("#j_country_list a").bind("click", function() { $("#j_country_list").addClass("hidden"); $("#j_contry_value").attr("value", $(this).attr("id")); $("#j_country_selected").text($(this).text()); return false; }); }); <span style="font-size: 0.8em">Страна:</span><br /> <input id="j_contry_value" type="hidden" name="country" value="" /> <div id="j_country_select" class="good_select_down_cru"> <div id="j_country_selected" class="good_selected"></div> <div id="j_country_list" style="height: 170px; overflow: auto; border-top: 1px solid #b5b6b5; background: #fff;" class="hidden"> <a id="ru" href="#">Russia</a> <a id="ua" href="#">Ukraine</a> </div> </div><br /> |
$(document).ready(function(){
$("#j_country_select").bind("click", function(){
$("#j_country_list").removeClass("hidden");
});
$("#j_country_list a").bind("click", function(){
$("#j_country_list").addClass("hidden");
$("#j_contry_value").attr("value", $(this).attr("id"));
$("#j_country_selected").text($(this).text());
return false;
});
flag_mousedown = false;
value_scroll_top = 0;
flag_scrolled = false;
$("body").mouseup(function(){
if(!flag_scrolled){
$("#j_country_list").addClass("hidden");
}
flag_scrolled = false;
});
$("#j_country_list").mousedown(function(){
flag_mousedown = true;
value_scroll_top = $("#j_country_list").scrollTop();
});
$("#j_country_list").mousemove(function(){
if(flag_mousedown){
if(value_scroll_top != $("#j_country_list").scrollTop()){
flag_scrolled = true;
flag_mousedown = false;
}
}
});
});
|
или так:
$(document).ready(function(){
$("#j_country_select").bind("click", function(){
$("#j_country_list").removeClass("hidden");
});
$("#j_country_list a").bind("click", function(){
$("#j_country_list").addClass("hidden");
$("#j_contry_value").attr("value", $(this).attr("id"));
$("#j_country_selected").text($(this).text());
return false;
});
$("body").mouseup(function(){
$("#j_country_list").addClass("hidden");
});
$("#j_country_list").mouseup(function(){
return false;
});
});
:) |
Ребят, всем спасибо за помощь!!! :)
оыср, работает отлично. |
| Часовой пояс GMT +3, время: 19:30. |