Показывать блок только 1 раз либо до изменения

[smargelov]

Добрый день.

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

Итак:

На сайте есть div с id="info". Внутри дива параграф p с каким-то текстом.

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

Если я правильно всё понимаю, то это выглядит примерно так:

Когда пользователь кликает или тапает на иконку закрытия, JQuery добавляет этому диву класс hide, а плагин JQuery Cookies добавляет кукис со значением = содержимому параграфа. Когда пользователь переходит на другую страницу или перезагружает браузер, функция проверяет наличие и содержание кукиса, и если он есть и совпадает с существующим текстом, то div получает класс hide, в противном случае, всё начинается с начала.

Помогите. Как оформить это в код.

Заранее благодарен.

[konfuji]

Доброго времени!

Я не намного опытней Вас, так что решение может иметь «детские болезни»: http://jsfiddle.net/SdFba/2/

По умолчанию баннер не отображается, чтобы не «моргать» у уже скрывших его посетителей.

Edited October 10, 2013 by konfuji

[hypnocolor]

Можно и без плагина — http://jsfiddle.net/hypnocolor/zG7Ad/

[smargelov]

Я не намного опытней Вас, так что решение может иметь «детские болезни»: http://jsfiddle.net/SdFba/2/

Позволю с вами не согласится по поводу опытности, судя по коду. Отдельное спасибо за комментарии (разобрался полностью) и дополнительную плюшку в виде удаления кукисов.

По умолчанию баннер не отображается, чтобы не «моргать» у уже скрывших его посетителей.

Абсолютно правильное решение. Я думал это следующим вопросом разузнать.

Спасибо вам. На мой взгляд — отличная реализация. Буду юзать.

Можно и без плагина — http://jsfiddle.net/hypnocolor/zG7Ad/

Спасибо огромное, но я не настолько силён пока (точнее — откровенно слаб) в JS. Так что пойду от простого к сложному. Ваш код пока не осилю. Стыдно, конечно. Но...

[konfuji]

Спасибо вам.

И Вам спасибо. Было приятно помочь)

[smargelov]

Оказалось, что не всё еще закончилось на этом.

Тут уж точно не могу понять в чём проблема.

Дело в следующем.

Всё, про что я спрашивал, я использую на wordpress сайте.

в header.php вставил вот такой код:

<?php if (have_posts()) : ?>
  <?php 
  global $post; 
  $args = array( 'numberposts' => 1, 'category' => 1 ); 
  $myposts = get_posts( $args ); 
  foreach( $myposts as $post ) :  setup_postdata($post); ?> 
   <?php the_content(); ?>
  <?php endforeach; ?>
<div id="infobox">
  <div id="close-button">☒</div>
</div>
<?php else : ?>
<!-- Если не найдено -->
<?php endif; ?>

в footer.php — такой:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.cookie.min.js"></script>
<script>
  if ($.cookie('viewed_banner') != $('#infobox').text()) {
   $('#infobox').show();
   $('#close-button').on('click', function() {
    $('#infobox').hide();
    $.cookie('viewed_banner', $('#infobox').text(), { expires: 365 });
   });
  }
</script>

Так вот. Когда выводимых постов нет, то на главной ничего не отображается, но на других страницах div'у задаётся displey:block;

Что я делаю не так.

[smargelov]

Переделал на вывод в виде виджета. Теперь код в header.php выглядит вот так:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Ads Block')): ?>
<?php endif; ?>

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

Заранее благодарен.

UPD:В общем, ситуация такая. Если закрыть блок на главной, то он не появляется больше нигде по домену, но если закрыть его на внутренней странице, то он не появляется только на этой странице, на остальных же, включая главную, он всё так же отображается.

Как этого избежать?

Edited October 12, 2013 by smargelov

[Николя223]

Если я правильно понимаю, то в куку вы загоняете весь текст, и затем проверяете - не рационально.

на php можно получить сумму хэша контента (если не можете маркер поставить).

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

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

можно ссылку на сайт? и посмотрите, что у вас вообще в кукках записанно

Edited October 12, 2013 by Николя223

[smargelov]

Если я правильно понимаю, то в куку вы загоняете весь текст, и затем проверяете - не рационально.

на php можно получить сумму хэша контента (если не можете маркер поставить).

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

Спасибо за совет. Только вот дело в том, что если Javascript я хоть как-то изучаю (начал, по крайней мере), то с PHP вообще беда. Могу готовые куски кода вставить, да лишь на уровне некоторых стандартных функций wordpress. Так что, попробую докопать JS вариант. К тому же, текста там на 1-2 строки. Сильно на производительность не повлияет.

можно ссылку на сайт? и посмотрите, что у вас вообще в кукках записанно

http://timezavod.ru. Текст в куках одинаковый, но вот адрес разный. Как бы заставить их записываться с адресом главной страницы либо как-то допилить код, что бы плагин ориентировался только на содержимом.

UPD: При этом, такая хрень происходит на сайте с ЧПУ. На тестовом сайте (на локальном хосте), там где ЧПУ не включено, всё работает как надо. (((

Edited October 12, 2013 by smargelov

[Николя223]

попробуйте куки вот так ставить:

$.cookie("viewed_banner", "Значение", {
expires: 365,
domain: "timezavod.ru"
});

только предыдущие нужно будет удалить

Edited October 12, 2013 by Николя223

[smargelov]

попробуйте куки вот так ставить:

Попробовал несколько вариантов.

$.cookie('viewed_banner', $('#infobox').text(), { expires: 365,  path: "/"});

Вот этот, кажется, заработал так, как нужно.

Спасибо.

Edited October 12, 2013 by smargelov

[konfuji]

Но насколько я понял, куки сохраняются на одну конкретную страницу. При переходе на другую страницу того же домена они изменяются.

Не совсем верно. Для понимания нужно определение атрибута path:

path — путь к директории на сервере, из которой будут доступны cookie. Если задать '/', cookie будут доступны во всем домене. Если задать '/foo/', cookie будут доступны только из директории /foo/ и всех ее поддиректорий (например, /foo/bar/) домена. По умолчанию значением является текущая директория, в которой cookie устанавливается.

Edited October 12, 2013 by konfuji

[smargelov]

Не совсем верно. Для понимания нужно определение атрибута path:

Спасибо за ликбез. Это помогло.