Cookies для кнопки Х
Есть простенький код блока с кнопкой закрыть.
<div id="fixeddeliverybanner"> <div>Доставка по всей России</div> <a class="closedeliverybanner" onclick="var el=document.getElementById('fixeddeliverybanner');el.parentNode.removeChild(el);">Закрыть</a> </div> Как запомнить в куки removeChild? |
Читал искал в интернете нет нигде адекватной информации, везде блоки со спецэффектами или кодом на 3 страницы, мне не верится, что тупо запоминание кнопки закрыть должно быть таким сложным???
|
Цитата:
|
Цитата:
Изначально строка открыта и кнопкой закрыть просто прячется без анимации, запоминать должно на сутки. |
Прячется? Во-первых событие onclick кроме ошибки ничего не породит, должно быть ('fixeddeliverybanner'), а не ('fixeddeliverybanner' ). Можно и проще написать:
onclick="var el=this.parentNode;el.parentNode.removeChild(el);" И это не скрытие, а удаление объекта. И чего же запоминать на сутки? Можно и html в куках запомнить, но может быть все таки запоминать выбор пользователя, а не кнопки? |
Я бы завел переменную bstate = true/false, менял бы её стейт в зависимости от того, закрыл пользователь баннер или нет. Сохранил бы в куки (если бы это было необходимо). И при прогрузке сайта/приложения бы проверял эту переменную из document.cookie и в зависимости от её значения менял бы класс у баннера. Как то так.
|
Цитата:
|
Для чего именно? Может быть лучше описать словами логику того что требуется?
|
Цитата:
Аналог такой строки https://mail.ru/ (предлагается скачать браузер амиго) или тут http://www.klenmarket.ru/ (про доставку по всей россии) |
По ссылкам осуществляется переход на страницы, причем тут "спрятать"?
Ваша кнопка не прячется, а удаляется. Но если бы и скрывалась, то что означает щелчок по ней: а) просто спрятать и не показывать сутки (почему сутки и зачем)? б) или же согласно описанию ее - это выбор доставки по всей России? |
Цитата:
У нас такая строка информационного характера, как напоминание, если посетитель закроет, то ему не будет показываться эта строка сутки. Почему через сутки - потому что посетитель может забыть или изначально машинально закрыть. То что вы описали в пункте Б вообще не имеет никакого отношения, мой текст про доставку является примером. |
Молодцом, а зачем тогда выставляете код, который к вам отношения не имеет? Ведь то чего вы хотите сотворить с показанной кнопкой лишено всякого смысла.
Значит примените к тому, что для вас имеет смысл один из вариантов: 1) При выборе пользователем "Скрыть", контейнеру кнопки определяется класс или css свойство скрывающее кнопку, а его id записывается в куки (если кнопок несколько, то можно хранить под одним именем, например hidden, массив id контейнеров как json). При открытии страницы проверяется наличие в куках имени hidden, и если есть скрываются контейнеры указанные в нем. 2) При выборе пользователем "Скрыть", ее контейнер удаляется, а его id записывается в куки как и в первом случае. При запросе страницы пользователем сервер проверяет наличие в куках имени hidden, и если есть не выводит на страницу контейнеры указанные в нем. |
Цитата:
1 вариант |
Цитата:
Реализовывайте вариант 1, проблема в чем, в незнании что такое cookie или в чем? |
Цитата:
А готового решения такого нигде нет? Просто такая строка с закрытием много где есть, а готового решения по поиску найти не могу. |
Цитата:
|
Цитата:
Так готовое решение есть? |
Цитата:
Ну так не конечный же пользователь пишет код, а вы, а если удалять, то кто будет выводить? Или все таки пихать html-код в куки хотите? Тогда сами делайте. А сокрытие, это полностью клиент делает. Как сделать, я уже объяснял, что такое куки - прочесть не сложно, а если у вас используется jQuery, то там просто. Чего вам нужно готового? Показывайте конкретно в таком случае код свой, ибо единственная трудность которая у вас (для вас) может возникнуть, это сокрытие множества. Поясню о чем я. Допустим есть у вас единственный блок, который нужно спрятать, то если не лень прочесть о куках и сами сделаете, и это займет меньше времени, чем поиск "готового" в интернете. Но если таких блоков на странице несколько, и на каждый отдельно ставить куку, то потребуется разбор имен кук, которые группируют эти куки для этой задачи. Либо все ссылки на блоки писать в одну куку. Нужно будет решать, что есть время для этих блоков, имеется ввиду если в одну куку пишутся ссылки на несколько блоков. А вам нужно готовое, а чего нужно сами не ведаете. |
Цитата:
![]() Ну так вот же я писал, http://www.klenmarket.ru/ тут наверху строка про доставку, надо тоже самое, только у них закрытие запоминается навсегда, а нам надо на сутки (мы позже отрегулируем). В js я лично совсем не понимаю, только знаю как по инструкции готовые коды поставить и все. Помогите пожалуйста. |
Вы когда либо заказывали исполнение работы программисту, что такое ТЗ знаете?
Вы думаете по этой картинке я догадаюсь чего вам надо? Не надо никаких ссылок на кого-то, и сделать так как у них, только в полосочку.... Есть у вас готовый html код который и нужно обрабатывать? Приводите его и поясняйте чего там прятать и по какому условию. Напишут вам в таком случае конкретное. Нет html кода, значит поясните задачи, и в конце концов хотя бы раз ответьте на вопрос - у вас одна единственная панель которую скрыть надо или же подобных много? Или напишу/напишут как пример, а там сами разбирайтесь как и к чему у себя его прикручивать. |
Цитата:
Вот архив, там исходный код и подключенные скрипты jquery 1.8, cookies и сам скрипт для закрытия инфо-строки, но кнопка закрыть не работает, соответственно я не могу проверить будет ли работать дальше запоминание закрытия. http://файлообменник.рф/gerqokbevrg8.html или вот код: <!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8"> <title>Тест скрытия верхней строки</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="js/jquery.js"></script> <script src="js/cookie.js"></script> <script src="js/script.js"></script> </head> <body> <div style="display: block;" id="topbar"> <div style="display: block;" class="slblock"> <div class="slider"> <div class="discount5"> При покупке в интернет-магазине скидка <b>5%</b> </div> </div> </div> <div style="" class="close"></div> </div> </body> </html> скрипт script.js: //Избавляяемся от подсказки в верху $('#topbar').each(function(i){ var self = this, cookieName = 'topbar', cookie = $.cookie(cookieName), classes = []; try { classes = cookie.split(','); } catch (e) {} /*if (cookie !== null) { $('> div:not(.close)', self).each(function () { if (!in_array($(this).attr('class'), classes)) $(this).show(0).parents('#topbar').show(0); }); } else { $('#topbar, #topbar > div').show(0); } $('.close', this).click(function(e){ e.preventDefault(); $(self).remove(); classes.push($(this).siblings().attr('class')); $.cookie(cookieName, classes.join(), {expires: 7 * 52, path: "/"}); });*/ if (cookie !== null) { $('.slblock .slider > div', self).each(function () { if (in_array($(this).attr('class'), classes)) { $(this).remove(); if ($('.slblock .slider div').length > 0) { $('#topbar, #topbar > div').show(0); } else { $(self).remove(); } } else{ $('#topbar, #topbar > div').show(0); } }); } else { $('#topbar, #topbar > div').show(0); } $('.close', this).click(function(e){ e.preventDefault(); $(this).parents('#topbar').find('.slblock .slider > div').each(function(){ if ($(this).is(':visible')){ classes.push($(this).attr('class')); if ($(this).attr('class')=='feb23'){ $('#head .air').hide(0); } } }); $(self).remove(); $.cookie(cookieName, classes.join(), {expires: 7 * 52, path: "/"}); }); //слайдер подсказки if(($('#topbar .slider div').length > 1)/*, (cookie == null)*/) { var n = 0, slideName = 'slidecurrent', cookcurrent = $.cookie(slideName); if ($('#topbar .slider').length) { var topslider = $('#topbar .slider').bxSlider(); var slcount = topslider.getSlideCount()-1; n = cookcurrent; if ((cookcurrent < slcount) && (cookcurrent != null)){ n=++cookcurrent; } else{ n=0 } cookcurrent = n; $.cookie(slideName, cookcurrent, {expires: 7 * 52, path: '/'}); var topslider = $('#topbar .slider').bxSlider({ autoControls : false, controls : false, pager : false, mode : 'fade', randomStart : false, onSliderLoad: function () { $('#topbar').show(); }, startSlide: n }); } } if ($('#topbar .slider .feb23').is(':visible')){ $('#head .air').show(0); } }) /*крупные баннеры*/ $('#fridayban').each(function(i){ var self = this, cookieName = 'fridayban_second', cookie = $.cookie(cookieName) if (cookie !="false") { $(self).show(); $('#topbar').remove(); $.cookie(cookieName, "false", {expires: 7 * 52, path: "/"}); } else{ $(self).remove(); } $.cookie('fridayban', "", {expires: -1, path: "/"}) }) $('#grandSale').each(function(i) { var self = this, cookieCounter = $.cookie('disable_banner_new_seriously') || 0; if (!cookieCounter || cookieCounter < 3) { cookieCounter++; // $(self).show(); $('#topbar').remove(); $.cookie('disable_banner_new_seriously', cookieCounter, { expires: 365, path: "/" }); } $.cookie('disable_banner_new_seriously', '', { expires: -1, path: "/" }); $.cookie('disable_banner', '', { expires: -1, path: "/" }); $.cookie('disable_banner_new', '', { expires: -1, path: "/" }); }); $('#topbigtrade').each(function(i){ var self = this, cookieName = 'topbigtrade', cookie = $.cookie(cookieName) if ((cookie !="false") && (cookie !="one")) { $(self).show(); $('#topbar').remove(); $.cookie(cookieName, "one", {expires: 7 * 52, path: "/"}); } else{ if (cookie == "one"){ $(self).show(); $('#topbar').remove(); $.cookie(cookieName, "false", {expires: 7 * 52, path: "/"}); } else{ $(self).remove(); } } }) $('#usedsale').each(function(i){ var self = this, cookieName = 'usedsale', cookie = $.cookie(cookieName) if (cookie !="false") { $(self).show(); $('#topbar').remove(); $.cookie(cookieName, "false", {expires: 7 * 52, path: "/"}); } else{ $(self).remove(); } }) $('#kibermonday').each(function(i){ var self = this, cookieName = 'kibersale', cookie = $.cookie(cookieName) if (cookie !="false") { $(self).show(); $('#topbar').remove(); $.cookie(cookieName, "false", {expires: 7 * 52, path: "/"}); } else{ $(self).remove(); } }) $('#tatianaday').each(function(i){ var self = this, cookieName = 'tatianasale', cookie = $.cookie(cookieName) if (cookie !="false") { $(self).show(); $('#topbar').remove(); $.cookie(cookieName, "false", {expires: 7 * 52, path: "/"}); } else{ $(self).remove(); } }) |
Надо было показать html-код блоков, которые скрываются, все не надо, двух хватило бы. И вот почему:
1) Показанный блок прописан без родителя, а в JS коде "topbar" ищутся в родителях. 2) "topbar" ищутся в родителях, что может означать, что таких блоков несколько, но идентификатор, это уникальное значение и на странице он может быть только один. Слишком накладно таким образом поступать, лучше тем, что должно скрываться присвоить одно имя класса и при открытии страницы обходом в цикле проверять наличие в куках id их родителей. Для такой задачи время скрытия блоков есть понятие неоднозначное. То есть, если поступать таким образом как показано в коде, то придется устанавливать кук неимоверное количество в случае если блоков много. Наверное нужно в течении сеанса помещать выбранные блоки в одну куку, если время равно текущей дате. Если же время, это уже следующая дата (относительно текущей рабочей куки), то создавать новую куку. А может быть проще, иметь кнопку "Скрыть/Показать подсказки"? И еще раз - если $('#topbar').remove();, то проверку установленных кук выгоднее производить серверу при выдаче страницы, не выводя в нее блоки, которые нужно скрывать. |
Цитата:
Я далек от js, вообще не понимаю о чем вы пишите. Про кнопку, это сворачивание разворачивание строки с кнопкой-стрелкой и запоминание состояния? Я тоже об этом подумал, если это проще сделать, помогите плиз. |
Цитата:
Цитата:
Если кнопкой "Скрыть/Показать", то лучше запомнить этот параметр "навечно", хотя можно и длительную куку установить. Это пример, а уж по html-коду разбирайтесь сами куда его прикрепить и как, ибо что и как, и почему я так до сих пор и не знаю. В примере скрываются блоки по имени класса, будет такой один на странице, будут скрыт один, будет несколько скроется несколько. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> .hide { display: none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> var mem = (function() { try { return 'localStorage' in window && window['localStorage'] !== null ? localStorage : false } catch(e) { } }()); $(function() { var _hlp_bx = $('.help-box'), _hlp_bt = $('#help-btn').click(function(e, d) { if(mem) { if(mem['help'] && !d) { mem.removeItem('help'); _hlp_bx.removeClass('hide'); _hlp_bt.text(_hlp_bt.data('mess')[1]) } else { mem.setItem('help', 1); _hlp_bx.addClass('hide'); _hlp_bt.text(_hlp_bt.data('mess')[0]) } } else { //управление через куки } }); if(mem && mem['help']) _hlp_bt.trigger('click', [1]); }); </script> </head> <body> <button id="help-btn" data-mess='["Показать подсказки","Скрыть подсказки"]'>Скрыть подсказки</button> <div class="help-box">Подсказка 1</div> <div class="help-box">Подсказка 2</div> <div class="help-box">Подсказка 3</div> </body> </html> |
Часовой пояс GMT +3, время: 01:33. |