Как присвоить класс элементу после проверки cookies
 

Есть всплывающее окно, на главной, которое должно появляться лишь один раз за визит.

Вот разметка поп-апа:

<div id="popup">

	<!--  ЗДЕСЬ КОНТЕНТ POP-UP  -->

<a class="close_popup" title="Close" onclick="document.getElementById('popup').style.display='none';">CLOSE</a>


</div>

На этом поп-апе висит задержка, вот её код (на всякий случай):

var delay_popup = 1000;
setTimeout("document.getElementById('popup').style.display='block'", delay_popup);

Как сделать так что бы после нажатию на кнопку закрытия поп-ап (class="close_popup") больше не показывать это окно в течении текущего визита?

Кто генерит ХТМЛ страниц?
Серверный язык какой?

Страницу рисует WP на php конечно же.

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

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

Если я ошибаюсь скажите в чем.

Но мне кажется что здесь нужно примерно так:

1. проверить наличие куки (например такой: first_visit = false)

2. если она там есть, то скриптом назначить диву #popup . 'display' , 'none'

3. а если её там нет, то после загрузки страницы сработает таймер и покажет поп-ап.

4. тогда на нажатие кнопки class="close_popup" нужно повесить запись этой самой куки first_visit = false без указания времени, что бы она обнулилась по закрытии браузера.


Возможно я алгоритм скомкал, но примерно так.

Вопрос в том как это реализовать?

- Как на кнопку записать ещё одно действие с куками, кроме уже существующего там закрытия?
- Как после того как проверили наличие куки назначить стиль диву #popup . 'display' , 'none', что бы он стал важнее чем в таймере окна? Ведь там свой отсчет идет и 'display none' может стать 'block'.

Может есть проще решение и копаю не туда?

Вы можете записать сколько угодно действий на событие. После точки с запятой пишите следующее
А не проще при наличии кукис очистить таймер (clearTimeout)? Или вообще изначально не выставлять таймер, если есть кукис

Я пробовал вот так:

<a class="close_popup" title="Close" onclick="document.getElementById('popup').style.display='none'; document.cookie = 'first_visit = false';">CLOSE</a>

Но, почему то кука записывается еще до того как открылось окно поп-апа.


Таймер нужен на тот случай когда это первый визит. Если таймера нет, то сразу вылетает попап, даже не дав посетителю понять куда он попал. А так, перед всплытием попапа есть мгновение когда видно загрузившуюся страничку.

В данный момент я могу и обнулить таймер и\или обернуть этот весь блок ещё в один див ему назначить display=none. (как вариант)

Но все же первичный вопрос остается не раскрытым - если я правильно на кнопку повесил запись куки, то почему она записывается ещё до срабатывания события onclick на этой кнопке?

Попробую на пальцах объяснить тогда :)
Почему записывается до срабатывания, из этого кода не видно. Наверное, где-то стоит запись в кукис

BETEPAH,

Спасибо за разжевывание, сейчас попробую.

А записи именно в этот кукис нет выше нигде, это же я ему имя дал и его же валуй записал, он нигде выше не может быть... с этим непонятно.

Что делаю не правильно?

alert( document.cookie );

$(document).ready(function () {
 if(cookie.get('first_visit') == null) {

	var delay_popup = 1000;
	setTimeout("document.getElementById('popup').style.display='block'", delay_popup);
	
	  };
 });

Почему не работает?
Консоль кричит, что кукис не найден - if(cookie.get('first_visit') == null) {

А алерт показывает что там есть этот кука.

Где ошибка?

http://learn.javascript.ru/comparison
Как-то так предлагаю:

$(document).ready(function () {
	 if(!getCookie('iWas')) {
		setTimeout( function(){
			document.getElementById('popup').style.display='block';
			setCookie('iWas', 'here');
		} , 1000);
	};
});

функции getCookie и setCookie не расшифровываю для краткости. Можете написать свои, можете использовать эти, например http://learn.javascript.ru/cookie

Так и не пойму, зачем эти танцы с куками если есть серверный язык и сессия (читай сеанс)...

BETEPAH,

Спасибо за помощь, работает.

Все протестил и все отлично.

Но вылезла одна загвоздка. Все работает безупречно на локалхосте. А когда перенес на сервер, работать перестало.

Путем перебора 1000 отличий - нашел что на это как то влияет строчка которая подключается выше чем подключается jquery.cookies. Это строчка: <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js" style=""></script>

Может это быть причиной и какова природа этого?

Я вижу два варианта - как то перенести эту строчку ниже, или (чего не хочется) отказаться от этого аналитикса вообще.

Есть другие варианты?

Round,
сделайте на сервере тестовую страницу, на которой код будет работать неадекватно и дайте, пожалуйста, сюда ссылку.

function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+';path=/'+(c ? '; expires='+d.toUTCString() : '');else return false;}
 function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
//ставим кук на сессию
setcookie('first_visit',true);
var first_visit = getcookie('first_visit');
if(first_visit) alert('"first_visit" - Кук есть')

function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+';path=/'+(c ? '; expires='+d.toUTCString() : '');else return false;}
 function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
//Проверяем установленное предыдущим скриптом
var first_visit = getcookie('first_visit');
if(first_visit) alert('"first_visit" - Кук есть')

Deff,

Спасибо за ещё один вариант.

BETEPAH,

Вчера весь день возился с этим глюком. Перенести этот гугланалитикс не вышло и убрать его нельзя, он мне нужен.

В итоге, я поменял код обработки куков но результат остался тот же - на локалхосте работает, а на сервере глючит.

Вот ссылка на главную страницу, на которой этот попап: http://hostultimo.com/preview/c/oxen/

Возможно, можно какой то костыль поставить?

Сейчас попап появляется на пару секунд и пропадает, если зайти повторно.

Новый код выглядит вот так:

// 'Delete' cookie for testing
function deleteCookie()
{
if(typeof(Storage) !== "undefined"){
    sessionStorage.returnVisit = "false";
    console.log("sessionStorage set.");
}
else{
    setCookie("return_visit","false",1);
}
}

//W3 Schools setCookie function
function setCookie(c_name,value,exdays)
{
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie = c_name + "=" + c_value;
}

//W3 Schools getCookie function
function getCookie(c_name)
{
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1)
  {
    c_start = c_value.indexOf(c_name + "=");
  }
  if (c_start == -1)
  {
    c_value = null;
  }
  else
  {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1)
    {
      c_end = c_value.length;
    }
  c_value = unescape(c_value.substring(c_start,c_end));
 }
return c_value;
}

//Check return_visit cookie on page load
function bodyOnload()
{
if(getCookie("return_visit") === 'true' || sessionStorage.returnVisit === "true"){
    //Do something if user has already visited page
            var test = document.getElementById("test");
    test.style.display = "none";
}
else
{
    if(typeof(Storage) !== "undefined"){
        sessionStorage.returnVisit = "true";
        console.log('Session Storage set.');
    }
    else{
        setCookie("return_visit","true",1);
    }
}
}


$(document).ready(function () {

	var delay_popup = 1000;
	setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
	
 });

А попап обернул ещё раз.

<div id="test">

<div id="parent_popup" class="popup-slider">
<div id="popup">

	<?php if(function_exists('show_flexslider_rotator')) echo show_flexslider_rotator( 'popup' );?>

<a class="close_popup" title="Close" onclick="document.getElementById('parent_popup').style.display='none';">CLOSE X</a>

  </div>
</div>

</div>

Странно. Не понимаю, как может работать такой код:

// 'Delete' cookie for testing
function deleteCookie()
{
if(typeof(Storage) !== "undefined"){
    sessionStorage.returnVisit = "false";
    console.log("sessionStorage set.");
}
else{
    setCookie("return_visit","false",1);
}
}

//W3 Schools setCookie function
function setCookie(c_name,value,exdays)
{
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie = c_name + "=" + c_value;
}

//W3 Schools getCookie function
function getCookie(c_name)
{
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1)
  {
    c_start = c_value.indexOf(c_name + "=");
  }
  if (c_start == -1)
  {
    c_value = null;
  }
  else
  {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1)
    {
      c_end = c_value.length;
    }
  c_value = unescape(c_value.substring(c_start,c_end));
 }
return c_value;
}

//Check return_visit cookie on page load
function bodyOnload()
{
if(getCookie("return_visit") === 'true' || sessionStorage.returnVisit === "true"){
    //Do something if user has already visited page
            var test = document.getElementById("test");
    test.style.display = "none";
}
else
{
    if(typeof(Storage) !== "undefined"){
        sessionStorage.returnVisit = "true";
        console.log('Session Storage set.');
    }
    else{
        setCookie("return_visit","true",1);
    }
}
}


$(document).ready(function () {

	var delay_popup = 1000;
	setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
	
 });

Во-первых, куки вы выставляете не сессионные, а на 1 день. Во-вторых, вы при загрузке страницы запускаете таймер, который через одну секунду должен показать попап, и тут же делаете проверку наличия куки? Зачем? Я же привел выше код. Сначала делайте проверку, а потом запускайте таймер попапа, если есть необходимость

Я согласен, с тем что там сейчас много каши... Но это пока что тестовый вариант и я его всячески мучаю, по этому там могут быть накладки. Все замечания по ошибкам я принимаю с благодарностью. :thanks:

Да, и там ещё была кнопка которой я сбрасывал куки, что бы каждый раз не переоткрывать окно браузера.

ну, правильно. Потому что сначала срабатывает $(document).ready(function (), в которой прописан запуск попапа через секунду, а затем, после загрузки всего содержимого страницы (включая картинки), срабатывает body.onload, в котором этот попап прикрывается.
Переделайте логику скрипта. Сделайте так, как я написал выше - сначала проверка, затем вызов

BETEPAH,

ага, я наверное перегрелся и протупил с этим моментом...

Сейчас переделаю.

Всё... работает. BETEPAH, Deff, ksa спасибо за помощь.

Перебрал все варианты. Остановился на том варианте что я приводил в предыдущем посте. Просто перенес таймер внутрь условия if. Зачем я его раньше вынес за рамки проверки кукисов? - науке это не известно... (тупил наверное). :)

Доделать вариант ВЕТЕРАНа так и не смог. Почему то все время получались разные результаты... то кука не записывалась, то не удалялась, то не определялась ... но это все из-за моей безграмотности. Закончу этот проект и засяду за изучение кукисов.

Всем, ещё раз, спасибо!