Jump to content
vtimbuc

Cookie

Recommended Posts

vtimbuc

Boas pessoal,

Estou a fazer um banner para um website em que tem um "close" button e quando é carregado o banner desaparece.

Eu queria que caso o utilizador fecha-se o banner na próxima visita estivesse escondido.

Aqui esta um live preview http://jsfiddle.net/yHDrX/14/.

So preciso que me ajudem a guardar a informação para que na próxima visita do utilizador o banner carregue com a class "hidden" caso tenham carregado no botão "close".


Valeriu Timbuc

http://vtimbuc.net/

Share this post


Link to post
Share on other sites
softklin

Se quiseres tudo em jQuery, podes usar o jQuery Cookie:

https://github.com/carhartl/jquery-cookie

Depois, basta verificares se o cookie pretendido existe e tem o valor que queres:

$(document).ready(function() {

    // verificar se o cookie ainda não existe
    if( 'yes' != $.cookie('banner_shown') ){
   
        $('.close').on('click', function() {
            $('.banner').addClass('hidden');
            $.cookie('banner_shown', 'yes');
        });

   } else {
       // esconder o banner
       $('.banner').addClass('hidden');
   }
});

Isto cria um cookie chamado 'banner_shown', com o valor 'yes', indicado que o banner já foi fechado. Se o cookie existir, então ele define a ação de fecho do banner, onde se inclui a criação do cookie. Tem em atenção que o cookie criado desta forma é apenas válido para a sessão (é eliminado quando se fecha o browser), mas podes consultar a página do jQuery cookie para saber como definires a quantidade de tempo para reter o cookie.

Ou visto que o código JS só executa depois da página ter sido carregada, pode ser do teu interesse assumir que o banner está oculto por omissão, e só é mostrado se o cookie não existir. Nesse caso, apenas precisas de adicionar um removeClasse('hidden') se o cookie não existir e não precisas do else no código.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
vtimbuc

Obrigado softklin!

Fiz de uma maneira parecida:

function(cookieName, expireDays) {

var $banner = $('.header-banner'),
	cookie = $.cookie(cookieName);

if (cookie !== 'banner-hidden') {
	$banner
		.removeClass('banner-hidden')
		.find('.banner-close')
		.on('click', function(event) {
			event.preventDefault();
			$banner.slideUp('slow');
			$.cookie(cookieName, 'banner-hidden', { path: '/', expires: expireDays });
		});
}
};

O banner já tem a class "hidden" on load e se o cookie não existir apenas remove a class "hidden".

Se o utilizador carregar no botão "close" o banner desaparece e o cookie é criado.


Valeriu Timbuc

http://vtimbuc.net/

Share this post


Link to post
Share on other sites
softklin

Eu depois de fazer a mensagem, acabei por a editar, porque realmente é preferível assumir o banner como oculto e só depois mostrá-lo, se for caso disso. Dessa forma, o banner só é mostrado quando necessário.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.