Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Cookies для кнопки Х (https://javascript.ru/forum/misc/61787-cookies-dlya-knopki-kh.html)

stem 09.03.2016 01:38

Cookies для кнопки Х
 
Есть простенький код блока с кнопкой закрыть.
<div id="fixeddeliverybanner">
<div>Доставка по всей России</div>
<a class="closedeliverybanner" onclick="var el=document.getElementById(&apos;fixeddeliverybanner&apos;);el.parentNode.removeChild(el);">Закрыть</a>
</div>


Как запомнить в куки removeChild?

stem 10.03.2016 03:18

Читал искал в интернете нет нигде адекватной информации, везде блоки со спецэффектами или кодом на 3 страницы, мне не верится, что тупо запоминание кнопки закрыть должно быть таким сложным???

laimas 10.03.2016 11:37

Цитата:

Сообщение от stem
мне не верится, что тупо запоминание кнопки закрыть должно быть таким сложным???

Да просто никому в голову не придет мысль хранить в куках фрагменты html кода. В куках нужно хранить параметры, как признаки или условия, а уж зная что это за параметры, какому условию отвечают, не проблема добавить необходимый html на страницу.

stem 12.03.2016 05:03

Цитата:

Сообщение от laimas (Сообщение 410483)
Да просто никому в голову не придет мысль хранить в куках фрагменты html кода. В куках нужно хранить параметры, как признаки или условия, а уж зная что это за параметры, какому условию отвечают, не проблема добавить необходимый html на страницу.

А есть готовый скрипт не громоздкий? Мне поисковик ничего адекватного не выдает.
Изначально строка открыта и кнопкой закрыть просто прячется без анимации, запоминать должно на сутки.

laimas 12.03.2016 15:22

Прячется? Во-первых событие onclick кроме ошибки ничего не породит, должно быть ('fixeddeliverybanner'), а не (&apos;fixeddeliverybanner&apos; ). Можно и проще написать:

onclick="var el=this.parentNode;el.parentNode.removeChild(el);"


И это не скрытие, а удаление объекта. И чего же запоминать на сутки?

Можно и html в куках запомнить, но может быть все таки запоминать выбор пользователя, а не кнопки?

m1lk1way 12.03.2016 18:36

Я бы завел переменную bstate = true/false, менял бы её стейт в зависимости от того, закрыл пользователь баннер или нет. Сохранил бы в куки (если бы это было необходимо). И при прогрузке сайта/приложения бы проверял эту переменную из document.cookie и в зависимости от её значения менял бы класс у баннера. Как то так.

stem 13.03.2016 07:16

Цитата:

Сообщение от laimas (Сообщение 410773)
Прячется? Во-первых событие onclick кроме ошибки ничего не породит, должно быть ('fixeddeliverybanner'), а не (&apos;fixeddeliverybanner&apos; ). Можно и проще написать:

onclick="var el=this.parentNode;el.parentNode.removeChild(el);"


И это не скрытие, а удаление объекта. И чего же запоминать на сутки?

Можно и html в куках запомнить, но может быть все таки запоминать выбор пользователя, а не кнопки?

Что нужно для этого?

laimas 13.03.2016 13:34

Для чего именно? Может быть лучше описать словами логику того что требуется?

stem 14.03.2016 09:07

Цитата:

Сообщение от laimas (Сообщение 410848)
Для чего именно? Может быть лучше описать словами логику того что требуется?

Ну вот у нас наверху сайта полоса информационная, и кнопка закрыть, которая должна скрывать элемент, само скрытие должно запомниться в куки на сутки.

Аналог такой строки https://mail.ru/ (предлагается скачать браузер амиго)
или тут http://www.klenmarket.ru/ (про доставку по всей россии)

laimas 14.03.2016 12:31

По ссылкам осуществляется переход на страницы, причем тут "спрятать"?

Ваша кнопка не прячется, а удаляется. Но если бы и скрывалась, то что означает щелчок по ней:
а) просто спрятать и не показывать сутки (почему сутки и зачем)?
б) или же согласно описанию ее - это выбор доставки по всей России?

stem 16.03.2016 09:46

Цитата:

Сообщение от laimas (Сообщение 410907)
По ссылкам осуществляется переход на страницы, причем тут "спрятать"?

Ваша кнопка не прячется, а удаляется. Но если бы и скрывалась, то что означает щелчок по ней:
а) просто спрятать и не показывать сутки (почему сутки и зачем)?
б) или же согласно описанию ее - это выбор доставки по всей России?

В тех примерах, что я показал, аналогичная строка наверху с кнопкой "закрыть".
У нас такая строка информационного характера, как напоминание, если посетитель закроет, то ему не будет показываться эта строка сутки. Почему через сутки - потому что посетитель может забыть или изначально машинально закрыть.

То что вы описали в пункте Б вообще не имеет никакого отношения, мой текст про доставку является примером.

laimas 16.03.2016 15:02

Молодцом, а зачем тогда выставляете код, который к вам отношения не имеет? Ведь то чего вы хотите сотворить с показанной кнопкой лишено всякого смысла.

Значит примените к тому, что для вас имеет смысл один из вариантов:

1) При выборе пользователем "Скрыть", контейнеру кнопки определяется класс или css свойство скрывающее кнопку, а его id записывается в куки (если кнопок несколько, то можно хранить под одним именем, например hidden, массив id контейнеров как json). При открытии страницы проверяется наличие в куках имени hidden, и если есть скрываются контейнеры указанные в нем.

2) При выборе пользователем "Скрыть", ее контейнер удаляется, а его id записывается в куки как и в первом случае. При запросе страницы пользователем сервер проверяет наличие в куках имени hidden, и если есть не выводит на страницу контейнеры указанные в нем.

stem 18.03.2016 02:26

Цитата:

Сообщение от laimas (Сообщение 411152)
Молодцом, а зачем тогда выставляете код, который к вам отношения не имеет? Ведь то чего вы хотите сотворить с показанной кнопкой лишено всякого смысла.

Значит примените к тому, что для вас имеет смысл один из вариантов:

1) При выборе пользователем "Скрыть", контейнеру кнопки определяется класс или css свойство скрывающее кнопку, а его id записывается в куки (если кнопок несколько, то можно хранить под одним именем, например hidden, массив id контейнеров как json). При открытии страницы проверяется наличие в куках имени hidden, и если есть скрываются контейнеры указанные в нем.

2) При выборе пользователем "Скрыть", ее контейнер удаляется, а его id записывается в куки как и в первом случае. При запросе страницы пользователем сервер проверяет наличие в куках имени hidden, и если есть не выводит на страницу контейнеры указанные в нем.

Тот код что сейчас, - временный костыль, я имел ввиду что к нам отношения не имеет внутренний текст, а сам код идентичный. Я полагал, что его можно доработать... как выяснилось - нет.

1 вариант

laimas 18.03.2016 06:58

Цитата:

Сообщение от stem
я имел ввиду что к нам отношения не имеет внутренний текст, а сам код идентичный.

Не может он быть идентичным по одной причине - в нем блок удаляется, а значит ну никак не вариант 1. Вот верстка может быть идентична.

Реализовывайте вариант 1, проблема в чем, в незнании что такое cookie или в чем?

stem 20.03.2016 09:19

Цитата:

Сообщение от laimas (Сообщение 411287)
Не может он быть идентичным по одной причине - в нем блок удаляется, а значит ну никак не вариант 1. Вот верстка может быть идентична.

Реализовывайте вариант 1, проблема в чем, в незнании что такое cookie или в чем?

По идентичности я имел из своего примера, а не из ваших 1 и 2.
А готового решения такого нигде нет? Просто такая строка с закрытием много где есть, а готового решения по поиску найти не могу.

laimas 20.03.2016 12:52

Цитата:

Сообщение от stem
По идентичности я имел из своего примера, а не из ваших 1 и 2.

Вы уж определитесь или удаляется, или закрывается, ибо ваш пример с вашим "хочу" большая разница.

stem 23.03.2016 15:00

Цитата:

Сообщение от laimas (Сообщение 411511)
Вы уж определитесь или удаляется, или закрывается, ибо ваш пример с вашим "хочу" большая разница.

Конечному пользователю разницы нет, прячется код или удаляется, мне важно чтобы само закрытие ("закрытие" - я имею виду действие пользователя, а не технический момент) помнилось сутки.

Так готовое решение есть?

laimas 23.03.2016 16:07

Цитата:

Сообщение от stem
Конечному пользователю разницы нет, прячется код или удаляется


Ну так не конечный же пользователь пишет код, а вы, а если удалять, то кто будет выводить? Или все таки пихать html-код в куки хотите? Тогда сами делайте. А сокрытие, это полностью клиент делает.

Как сделать, я уже объяснял, что такое куки - прочесть не сложно, а если у вас используется jQuery, то там просто.

Чего вам нужно готового? Показывайте конкретно в таком случае код свой, ибо единственная трудность которая у вас (для вас) может возникнуть, это сокрытие множества. Поясню о чем я. Допустим есть у вас единственный блок, который нужно спрятать, то если не лень прочесть о куках и сами сделаете, и это займет меньше времени, чем поиск "готового" в интернете. Но если таких блоков на странице несколько, и на каждый отдельно ставить куку, то потребуется разбор имен кук, которые группируют эти куки для этой задачи. Либо все ссылки на блоки писать в одну куку.

Нужно будет решать, что есть время для этих блоков, имеется ввиду если в одну куку пишутся ссылки на несколько блоков.

А вам нужно готовое, а чего нужно сами не ведаете.

stem 28.03.2016 11:03

Цитата:

Сообщение от laimas (Сообщение 411823)
Ну так не конечный же пользователь пишет код, а вы, а если удалять, то кто будет выводить? Или все таки пихать html-код в куки хотите? Тогда сами делайте. А сокрытие, это полностью клиент делает.

Как сделать, я уже объяснял, что такое куки - прочесть не сложно, а если у вас используется jQuery, то там просто.

Чего вам нужно готового? Показывайте конкретно в таком случае код свой, ибо единственная трудность которая у вас (для вас) может возникнуть, это сокрытие множества. Поясню о чем я. Допустим есть у вас единственный блок, который нужно спрятать, то если не лень прочесть о куках и сами сделаете, и это займет меньше времени, чем поиск "готового" в интернете. Но если таких блоков на странице несколько, и на каждый отдельно ставить куку, то потребуется разбор имен кук, которые группируют эти куки для этой задачи. Либо все ссылки на блоки писать в одну куку.

Нужно будет решать, что есть время для этих блоков, имеется ввиду если в одну куку пишутся ссылки на несколько блоков.

А вам нужно готовое, а чего нужно сами не ведаете.



Ну так вот же я писал, http://www.klenmarket.ru/
тут наверху строка про доставку, надо тоже самое, только у них закрытие запоминается навсегда, а нам надо на сутки (мы позже отрегулируем). В js я лично совсем не понимаю, только знаю как по инструкции готовые коды поставить и все. Помогите пожалуйста.

laimas 28.03.2016 14:43

Вы когда либо заказывали исполнение работы программисту, что такое ТЗ знаете?

Вы думаете по этой картинке я догадаюсь чего вам надо?

Не надо никаких ссылок на кого-то, и сделать так как у них, только в полосочку....

Есть у вас готовый html код который и нужно обрабатывать? Приводите его и поясняйте чего там прятать и по какому условию. Напишут вам в таком случае конкретное.

Нет html кода, значит поясните задачи, и в конце концов хотя бы раз ответьте на вопрос - у вас одна единственная панель которую скрыть надо или же подобных много?

Или напишу/напишут как пример, а там сами разбирайтесь как и к чему у себя его прикручивать.

stem 29.03.2016 11:31

Цитата:

Сообщение от laimas (Сообщение 412273)
Вы когда либо заказывали исполнение работы программисту, что такое ТЗ знаете?

Вы думаете по этой картинке я догадаюсь чего вам надо?

Не надо никаких ссылок на кого-то, и сделать так как у них, только в полосочку....

Есть у вас готовый 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();
    }
})

laimas 30.03.2016 00:12

Надо было показать html-код блоков, которые скрываются, все не надо, двух хватило бы. И вот почему:

1) Показанный блок прописан без родителя, а в JS коде "topbar" ищутся в родителях.

2) "topbar" ищутся в родителях, что может означать, что таких блоков несколько, но идентификатор, это уникальное значение и на странице он может быть только один.

Слишком накладно таким образом поступать, лучше тем, что должно скрываться присвоить одно имя класса и при открытии страницы обходом в цикле проверять наличие в куках id их родителей.

Для такой задачи время скрытия блоков есть понятие неоднозначное. То есть, если поступать таким образом как показано в коде, то придется устанавливать кук неимоверное количество в случае если блоков много. Наверное нужно в течении сеанса помещать выбранные блоки в одну куку, если время равно текущей дате. Если же время, это уже следующая дата (относительно текущей рабочей куки), то создавать новую куку.

А может быть проще, иметь кнопку "Скрыть/Показать подсказки"?

И еще раз - если $('#topbar').remove();, то проверку установленных кук выгоднее производить серверу при выдаче страницы, не выводя в нее блоки, которые нужно скрывать.

stem 31.03.2016 09:14

Цитата:

Сообщение от laimas (Сообщение 412403)
Надо было показать html-код блоков, которые скрываются, все не надо, двух хватило бы. И вот почему:

1) Показанный блок прописан без родителя, а в JS коде "topbar" ищутся в родителях.

2) "topbar" ищутся в родителях, что может означать, что таких блоков несколько, но идентификатор, это уникальное значение и на странице он может быть только один.

Слишком накладно таким образом поступать, лучше тем, что должно скрываться присвоить одно имя класса и при открытии страницы обходом в цикле проверять наличие в куках id их родителей.

Для такой задачи время скрытия блоков есть понятие неоднозначное. То есть, если поступать таким образом как показано в коде, то придется устанавливать кук неимоверное количество в случае если блоков много. Наверное нужно в течении сеанса помещать выбранные блоки в одну куку, если время равно текущей дате. Если же время, это уже следующая дата (относительно текущей рабочей куки), то создавать новую куку.

А может быть проще, иметь кнопку "Скрыть/Показать подсказки"?

И еще раз - если $('#topbar').remove();, то проверку установленных кук выгоднее производить серверу при выдаче страницы, не выводя в нее блоки, которые нужно скрывать.

Там на сайте у них несколько городов, поэтому блоков много, но все разом они не показываются в коде, у меня только один блок.

Я далек от js, вообще не понимаю о чем вы пишите.

Про кнопку, это сворачивание разворачивание строки с кнопкой-стрелкой и запоминание состояния? Я тоже об этом подумал, если это проще сделать, помогите плиз.

laimas 31.03.2016 12:40

Цитата:

Сообщение от stem
у меня только один блок

Если один блок, то к чему приведенный код JS? Он что выдран с чужого сайта?

Цитата:

Сообщение от stem
Я далек от js, вообще не понимаю о чем вы пишите.

Я вас и не спрашиваю о JS, я спрашиваю об организации кода на странице, чего там скрывать и сколько, к 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.