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, время: 02:14. |