Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Скрывающее окно с помощью cookie, как доработать ?

Скрывающее окно с помощью cookie, как доработать ?


     12.01.2015    Все вопросы » jQuery    3229

вопрос
Cookies устанавливаем их с помощью очень лайтовой библиотеки jquery.cookie.js (github link (https://github.com/carhartl/jquery-cookie)).

Идея была такая (код ниже) При загрузки стр. сайта баннер моргает и этим раздражает!
Грузится страница - DIV, в нем картинка с ссылкой "закрыть".
Клик по ней обрабатывает jQuery - изменяется display на none, рекламный блок исчезает; затем устанавливаются cookies.
При каждой загрузке cookies проверяются, если нашего значения там нет - показывается рекламный блок.

Сейчас идея такая, которую у меня не получается осуществить!
В <div id="ad" style="display: none;"> будет изначально скрыт, если пользователь не закрывал окно, то будет манятся на   <div id="ad" style="display: block;">




<!DOCTYPE html>

<html lang="en">

<head>
<title>#adv</title>
<meta charset="utf-8">

<style type="text/css">
* {padding: 0; margin: 0; overflow: hidden;}
#ad {position: relative; display: inline-block; border: solid black 1px; }
#ad-close {position: absolute; right: 0px;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js">
</script>

<script type="text/javascript">
$().ready(function() {

function hide_block(id){
$("#"+id).css("display", "none");
return false;
}

if ($.cookie("ad_hide"))
{
hide_block("ad");
}

$("#ad-close-link").click(function() {
hide_block("ad");
$.cookie("ad_hide",'true',{expires: 9999, path: '/'});
});

});
</script>
</head>

<body>
<div id="ad">
<div id="ad-close">
<a href="#" id="ad-close-link">[Закрыть]</a>
</div>
<img src="http://img.yandex.net/i/www/logo.png" alt="ya.logo"></div>
</div>
</body>

</html>


Спасибо за внимание!

Ответа пока нет


4 комментария

wzk
Юзер

wzk - 13 января 2015 14:09 -

Если раздражает именно резкое появление-исчезание, то почему не попробовать заменить:
.css("display", "none"); на fadeOut(); ?
По умолчанию на блок в самом html ставим style="display:none;", при загрузке страницы проверяем наличие куки и если ее нет, то делаем fadeIn();
Еще можно попробовать slideUp() и slideDown(). Будет плавно выезжать и заезжать :)

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

G-Force
Юзер

G-Force - 13 января 2015 16:48 -

wzk, Можете прислать код ваше идеи, очень был благодарен!

wzk
Юзер

wzk - 13 января 2015 16:54 -

G-Force, попробуйте так. Я не тестировал, должно работать. fadeOut и FadeIn попробуйте заменить на slideUp() и slideDown() по желанию, как я писал выше.



$().ready(function() {

function hide_block(id){
$("#"+id).fadeOut();
return false;
}

function show_block(id){
$("#"+id).fadeIn();
return false;
}

if ($.cookie("ad_hide"))
{
hide_block("ad");
}

if($.cookie('ad_hide') === null) {
    show_block("ad");
}

$("#ad-close-link").click(function() {
hide_block("ad");
$.cookie("ad_hide",'true',{expires: 9999, path: '/'});
});

});


G-Force
Юзер

G-Force - 13 января 2015 17:11 -

wzk, Работает, Спасибо!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 06.05.2013 severnake  jQuery
 07.02.2014 Бахтияр_Османов  jQuery
наверх