закрытие при клике в body
Добра всем!
Делаю малую корзину в битриксе, пытаюсь обновлять значения с помощью аякса, вроде все получается, кроме одного. Вот что написалось:
$(document).ready(function(){
showBasketLine();
showBasketSmall();
$(".storeBuy a").click(showBasketLine);
});
function showSmallBasket() {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
} else if ($(".basketSmallBox").is(":hidden")) {
showBasketSmall();
$(".basketSmallBox").addClass("shower").show();
}
}
function showBasketLine() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketLine",
dataType: "html",
success: function(data){
$('.basketLineBox').html(data)
}
});
}
function showBasketSmall() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketSmall",
dataType: "html",
success: function(data){
$('.basketSmallBox').html(data)
}
});
}
showSmallBasket() это функция вызываемая этой ссылкой <a href="<?=$arParams["PATH_TO_BASKET"]?>" onclick="showSmallBasket(); return false;">...</a>. Когда жмешь на ссылку, появляется блок с малой корзиной, жмешь на ссылку еще раз и малая корзина закрывается, и осталось только доделать закрытие малой корзины при щелчке в любом месте кроме малой корзины. Помогите мне пожалуйста доделать. |
В момент открытия корзины навешивать обработчик click на body (или на document). В обработчике проверяешь предков - если есть корзина (то есть клик пришелся по корзине), то игнорируешь клик. Иначе закрываешь корзину.
По закрытию корзины снимаешь обработчик. |
Вот html
<div id="headerTel" class="basketHeader"> <div class="basketLineBox"> <div class="basketLine"> <a href="cart" onclick="showSmallBasket(); return false;">В корзине <b>1</b> товар</a> </div> </div> <div class="basketSmallBox" style="display: none;"> <div class="basketSmall"> <h3>Позиции в Вашей корзине:</h3> <div class="basketSmallConteiner"> <a href="/store/pallet/poddon_1200kh800_gost_9078/" title="Поддон 1200х800 ГОСТ 9078-84">Поддон 1200х800 ГОСТ 9078-84</a> Цена: 120.00 руб. Количество: 21.00 </div> <form method="get" action="/p/cart"> <input type="submit" value="Изменить количество"> </form> <form method="get" action="/p/order"> <input type="submit" value="Оформить заказ"> </form> </div> </div> </div> danik.js, Я кучу всего перепробовал, в голове путаница, можете пожалуйста написать пример? |
Цитата:
Мож кто поможет. А лучше не жди а пробуй сам. Хотя бы попытайся (и показывай код) |
На сегодня мои мозги зашились. Тогда если мне завтра квота не выпадет, буду дальше танцевать с бубном.
|
Можно сделать проще: при открытии корзины, ставить на body фиксированный прозрачный div на весь экран, при клике на этот div закрыть корзину и удалять этот div.
|
а не проще ли всего написать event.stopPropagation()?
|
По-моему битрикс такая байда, где никакой корзины не надо. Или при чем тут вообще битрикс?
По теме. Слушайте предыдущего оратора. Всего лишь требуется не пропустить событие к боди и тогда в функции на щелчке по туловищу кроме прочего тупо вырубать заранее известный контейнер из видимости. |
А в той ссылке - по которой типа щелкают чтобы закрыть типа корзину - допускать это самое событие до туловища. Улавливаете?
Про битрикс. Что такое корзина? Это фильтр из всего ассортимента по критерию активный заказ больше 0. |
$(document).ready(function(){
showBasketLine();
showBasketSmall();
$(".storeBuy a").click(showBasketLine);
});
$("html").click(function() {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
}
});
function showSmallBasket(event) {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
} else if ($(".basketSmallBox").is(":hidden")) {
showBasketSmall();
$(".basketSmallBox").addClass("shower").show();
event.stopPropagation();
}
}
function showBasketLine() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketLine",
dataType: "html",
success: function(data){
$('.basketLineBox').html(data)
}
});
}
function showBasketSmall() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketSmall",
dataType: "html",
success: function(data){
$('.basketSmallBox').html(data)
}
});
}
Не работает(( |
$(document).ready(function(){
showBasketLine();
showBasketSmall();
$(".storeBuy a").click(showBasketLine);
});
$("html").click(function() {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
}
});
function showSmallBasket(event) {
$(".basketLine a").click(function (event) {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
} else if ($(".basketSmallBox").is(":hidden")) {
showBasketSmall();
$(".basketSmallBox").addClass("shower").show();
event.stopPropagation();
}
});
}
function showBasketLine() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketLine",
dataType: "html",
success: function(data){
$('.basketLineBox').html(data)
}
});
}
function showBasketSmall() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketSmall",
dataType: "html",
success: function(data){
$('.basketSmallBox').html(data)
}
});
}
Вот так работает, только есть два минуса. Первый, на ссылку нужно нажать два раза чтобы был отклик. Второй, Если нажать внутри малой корзины, она скрывается |
$(document).ready(function(){
showBasketLine();
showBasketSmall();
$(".storeBuy a").click(showBasketLine);
$("html").click(function() {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
}
});
});
function showSmallBasket() {
$(this).click(function (event) {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
} else if ($(".basketSmallBox").is(":hidden")) {
showBasketSmall();
$(".basketSmallBox").addClass("shower").show();
event.stopPropagation();
}
});
}
function showBasketLine() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketLine",
dataType: "html",
success: function(data){
$('.basketLineBox').html(data)
}
});
}
function showBasketSmall() {
$.ajax({
url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
type: "GET",
cache: true,
timeout: 1000,
data: "block=basketSmall",
dataType: "html",
success: function(data){
$('.basketSmallBox').html(data)
}
});
}
Вот так работает открытие и закрытие по щелчку на ссылке, а вот при щелчке на body или html ничего не происходит. |
Все через ж.
1. Сервер сам нарисует кол-во и сум-му заказов в процессе выдачи хтмл. Более того, там на сервере эти показания полезно закешировать скажем в профиле юзера который естественно кешируется в сессии. Вплоть до события обновления корзины. Следовательно не нужен вызов рендера заказов по событию загрузки страницы. 2. Щелчок по боди тупо скрывает контейнер независимо от его состояния. Ничего проверять не надо, потому что щелчок от ссылки-открывашки не должен распространиться до туловища, и такой же щелчок по контейнеру корзины - не должен. Только эти 2 щелчка что-то проверяют и о чем-то размышляют. Это значит на ссылку вешается запрет пропаганды и на контейнер корзины вешается запрет пропаганды щелчка. Один раз и навсегда. По которому контейнер опять же тупо сам себя убирает, потому что проверять нечего - невидимый контейнер не щелкабелен. Переключатель только в ссылке. Если видим - скрыть, если скрыт - увидеть. И вообще, на кой такой гемор. Открыли - закрыли по тому же месту. При чем тут туловище... |
Я скажем так javascript не особо знаю, у меня это получилось благодаря гуглу и экспериментов, особой осмысленности в этом нет, и толком не знаю как реализовать все что Вы пишите((
|
Как-то не вяжется. Кто в js не понимает тот пытается разобраться с js, а не с опупевшим jquery.
В общем из рабочего. Простейший вьюер. див на всю ширину, поверх него две "кнопки", то есть два дива по 30% шириной слева и справа, абсолютно позиционированы. Щелчок на этих кнопках вызывает соответственно следующую или предыдущую картинку, а щелчок посередине - по div под ними - закрывает плеер. Как сделать чтобы щелчок на кнопках не проникал в контейнер для картинок?
prev_button.addEventListener("click",
function(event) {
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
this.elem_anchor.click();
}, false);
Кнопки невидимые, без заливки, без обводки, без ничего. Только указатель мыши меняется в зависимости от расположения над: левой кнопкой - палец влево, правой - вправо, посередине - zoom-out. Див-контейнер сам себя скрывает элементарно
overlay.addEventListener("click",
function(event) {
this.style.visibility = "hidden";
}, false);
Ему не надо проверять видим я или невидим, потому что по невидимому щелкнуть не выйдет. Появляется он после щелчка по ссылке на странице, куче которых вешается обработчик события щелчок по факту загрузки документа
...
elem.addEventListener("click", load_image, false);
вот она
var load_image = function(e) {
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
// тут вырезано действующее вещество
var arr = page_scrolls();
overlay.style.visibility = "visible";
overlay.style.top = arr[1] + "px";
//...
};
Все то же самое у вас, с той лишь разницей что вместо оверлея - боди, и ссылка всего одна. |
Не могу понять как мне все это цельным кодом написать
|
Подумал, подумал, вот что вышло, не знаю работает ли, но что то тут не так.
var showSmallBasket = function () {
$(this).addEventListener("click",
function(event) {
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
this.elem_anchor.click();
}, false);
}
body.addEventListener("click",
function(event) {
this.style.visibility = "hidden";
}, false);
document.onclick = function(e) {
//не могу придумать
}
|
<!DOCTYPE html>
<html>
<head>
<title>Корзина</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var showSmallBasket = function () {
$(this).addEventListener("click",
function(event) {
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
this.elem_anchor.click();
}, false);
}
body.addEventListener("click",
function(event) {
this.style.visibility = "hidden";
}, false);
document.onclick = function(e) {
}
</script>
</head>
<body>
<div class="basketLineBox">
<div class="basketLine">
<a href="#" onclick="showSmallBasket(); return false;">В корзине <b>2</b> товара</a>
</div>
</div>
<div class="basketSmallBox">
<div class="basketSmall">
<h3>Позиции в Вашей корзине:</h3>
<div class="basketSmallConteiner">
<div class="smallName"><a href="#" title="Товар №2"><h3>Товар №2</h3></a></div>
<div class="smallPrice">Цена: 1 руб.</div>
<div class="smallQuantity">Количество: 3.00</div>
</div>
<div class="basketSmallConteiner">
<div class="smallName"><a href="#" title="Товар №2"><h3>Товар №2</h3></a></div>
<div class="smallPrice">Цена: 1 руб.</div>
<div class="smallQuantity">Количество: 3.00</div>
</div>
<div class="buttonWaySmallBasket">
<form method="get" action="/p/cart">
<input type="submit" value="Изменить количество">
</form>
</div>
<div class="buttonWaySmallBasket">
<form method="get" action="/p/order">
<input type="submit" value="Оформить заказ">
</form>
</div>
</div>
</div>
</body>
</html>
|
Дальше этого не ушел((
Работает только клик по ссылке, разворачивает и скрывает, а клик по body не работает.
var showSmallBasket = function () {
$(this).click(function (event) {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
} else if ($(".basketSmallBox").is(":hidden")) {
$(".basketSmallBox").addClass("shower").show();
}
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
});
}
$("html").click(function() {
if($(".shower"))
$(".basketSmallBox").removeClass("shower").hide();
});
|
А вот та все работает, но есть один минус, при клике на body все скрывается, но при повторном клике на body все открывается.
var showSmallBasket = function () {
$(this).click(function (event) {
if($(".basketSmallBox").is(":visible")){
$(".basketSmallBox").removeClass("shower").hide();
} else if ($(".basketSmallBox").is(":hidden")) {
$(".basketSmallBox").addClass("shower").show();
}
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
$(body).click(function() {
if($(".shower")) {
$(".basketSmallBox").removeClass("shower").hide();
}
});
});
}
|
| Часовой пояс GMT +3, время: 18:15. |