Dúvida jQuery e Cookies

centralkidede

Membro da Elite Negra
Registrado
Boa tarde pessoal, não lembro de ter postado nessa área antes :hmm:
Eu curto mexer com templates em blogs e sites, como hobby mesmo, fico criando e editando. Dessa vez criei um blog pessoal mas como sou muito perfeccionista com detalhes peguei um tema na net e comecei a modifica-lo.
Resumindo, usei jQuery para alterar conforme o gosto a cor predominante do tema (claro/escuro) e lendo na internet percebi que tem como salvar essa opção com o jQuery.Cookie, instalei ele no tema e tentei escrever o código sozinho mesmo, não deu certo.

Coloquei o código no Spoiler e no Pastebin, não sei qual é melhor pra visualizar.

JavaScript:
<script type='text/javascript'>
$(document).ready(function(){

   if($.cookie(“cleanlinuxtheme”) == 1){
     
     /* a função muda o background da div com id=&quot;box&quot; */   
     $(&quot;.postDate&quot;).css(&quot;background&quot;,&quot;#FFFFFF&quot;);
     $(&quot;body&quot;).css(&quot;background&quot;,&quot;#FFFFFF&quot;);
     $(&quot;#mainNav&quot;).css(&quot;background&quot;,&quot;#FBFBFB&quot;);
     $(&quot;.published&quot;).css(&quot;background&quot;,&quot;#FFFFFF&quot;);
     $(&quot;p&quot;).css(&quot;color&quot;,&quot;#333333&quot;);
     $(&quot;.entry-title a&quot;).css(&quot;color&quot;,&quot;#333333&quot;);
     $(&quot;h3&quot;).css(&quot;color&quot;,&quot;#333333&quot;);
     $(&quot;#PageList1 a&quot;).css(&quot;color&quot;,&quot;#999999&quot;);
     $(&quot;#PageList1 a&quot;).css(&quot;color&quot;,&quot;#999999&quot;);
     $(&quot;#PageList1 a&quot;).hover(
       function(){
         //Ao posicionar o cursor sobre a div
         $(this).css(&quot;color&quot;,&quot;#2E301C&quot;);
       },
       function(){
         //Ao remover o cursor da div
         $(this).css(&quot;color&quot;,&quot;#999999&quot;);
       }
     );

   }else{

     /* a função muda o background da div com id=&quot;box&quot; */  
     $(&quot;.postDate&quot;).css(&quot;background&quot;,&quot;#17181A&quot;);
     $(&quot;body&quot;).css(&quot;background&quot;,&quot;#17181A&quot;);
     $(&quot;#mainNav&quot;).css(&quot;background&quot;,&quot;#2B2B2B&quot;);
     $(&quot;.published&quot;).css(&quot;background&quot;,&quot;#17181A&quot;);
     $(&quot;p&quot;).css(&quot;color&quot;,&quot;#CCCCCC&quot;);
     $(&quot;.entry-title a&quot;).css(&quot;color&quot;,&quot;#EEEEEE&quot;);
     $(&quot;h3&quot;).css(&quot;color&quot;,&quot;#EEEEEE&quot;);
     $(&quot;#PageList1 a&quot;).css(&quot;color&quot;,&quot;#BBBBBB&quot;);
     $(&quot;#PageList1 a&quot;).hover(
       function(){
       //Ao posicionar o cursor sobre a div
       $(this).css(&quot;color&quot;,&quot;#EEEEEE&quot;);
       },
       function(){
       //Ao remover o cursor da div
       $(this).css(&quot;color&quot;,&quot;#BBBBBB&quot;);
       }
     );

   };

    /* ao clicar na div com id=&quot;box&quot; executa a função */
     $(&quot;#blacktheme&quot;).click(function(){
   
     /* a função muda o background da div com id=&quot;box&quot; */  
     $(&quot;.postDate&quot;).css(&quot;background&quot;,&quot;#17181A&quot;);
     $(&quot;body&quot;).css(&quot;background&quot;,&quot;#17181A&quot;);
     $(&quot;#mainNav&quot;).css(&quot;background&quot;,&quot;#2B2B2B&quot;);
     $(&quot;.published&quot;).css(&quot;background&quot;,&quot;#17181A&quot;);
     $(&quot;p&quot;).css(&quot;color&quot;,&quot;#CCCCCC&quot;);
     $(&quot;.entry-title a&quot;).css(&quot;color&quot;,&quot;#EEEEEE&quot;);
     $(&quot;h3&quot;).css(&quot;color&quot;,&quot;#EEEEEE&quot;);
     $(&quot;#PageList1 a&quot;).css(&quot;color&quot;,&quot;#BBBBBB&quot;);
     $(&quot;#PageList1 a&quot;).hover(
       function(){
       //Ao posicionar o cursor sobre a div
       $(this).css(&quot;color&quot;,&quot;#EEEEEE&quot;);
       },
       function(){
       //Ao remover o cursor da div
       $(this).css(&quot;color&quot;,&quot;#BBBBBB&quot;);
       }
     );
     $.removeCookie(“cleanlinuxtheme”);
     $.cookie(“cleanlinuxtheme”,2,{expires: 360});
 
     });

     /* ao clicar na div com id=&quot;box&quot; executa a função */
     $(&quot;#whitetheme&quot;).click(function(){
   
     /* a função muda o background da div com id=&quot;box&quot; */  
     $(&quot;.postDate&quot;).css(&quot;background&quot;,&quot;#FFFFFF&quot;);
     $(&quot;body&quot;).css(&quot;background&quot;,&quot;#FFFFFF&quot;);
     $(&quot;#mainNav&quot;).css(&quot;background&quot;,&quot;#FBFBFB&quot;);
     $(&quot;.published&quot;).css(&quot;background&quot;,&quot;#FFFFFF&quot;);
     $(&quot;p&quot;).css(&quot;color&quot;,&quot;#333333&quot;);
     $(&quot;.entry-title a&quot;).css(&quot;color&quot;,&quot;#333333&quot;);
     $(&quot;h3&quot;).css(&quot;color&quot;,&quot;#333333&quot;);
     $(&quot;#PageList1 a&quot;).css(&quot;color&quot;,&quot;#999999&quot;);
     $(&quot;#PageList1 a&quot;).css(&quot;color&quot;,&quot;#999999&quot;);
     $(&quot;#PageList1 a&quot;).hover(
       function(){
       //Ao posicionar o cursor sobre a div
       $(this).css(&quot;color&quot;,&quot;#2E301C&quot;);
       },
       function(){
       //Ao remover o cursor da div
       $(this).css(&quot;color&quot;,&quot;#999999&quot;);
       }
     );
     $.removeCookie(“cleanlinuxtheme”);
     $.cookie(“cleanlinuxtheme”,1,{expires: 360});

  });
   
});
</script>

Alguém que manja sabe corrigir o que fiz de errado?
 
Coloca no JSFiddle que é mais jogo.
 
@Nano
Coloquei:
https://jsfiddle.net/mf2cr2mw/

@Beeblebrox
A questão é apenas "salvar" usando cookies ou outro método o tema escolhido, para quando sair do blog e voltar não precisar setar o tema novamente, CSS consegue guardar informações para próximas sessões?
Essa dica do CSS é muito boa, valeu, só não acho muito viável fazer isso no Blogger pela liberdade controlada que ele oferecem, mas vou usar nos próximos projetinhos :awesome:.

Como disse é um blog pessoal, porém público, com objetivo de reunir informações úteis que estão espalhadas por aí e o que aprendo sozinho, pra não perder mais.
Link do blog para vocês terem uma ideia, a mudança de cor fica no canto inferior direito.
http://cleanlinux.blogspot.com.br
 
Você pode colocar um select ou botões que só chamam um outro css e salvar o css escolhido em cookie. Acho mais jogo salvar a escolha do que o arquivo inteiro.

Mas se não for dar suporte a IE abaixo do 8, pode usar o localStorage também [ localStorage.setItem(chave, valor) = grava / localStorage.getItem(chave) = pega o valor ]

Não testei não, testa aí e me avisa se der algum erro. :p

No caso gravei um cookie só com a escolha do usuário. Se o cookie não existir, ele cria. Se existir e a escolha for outra, ele sobrescreve. Evita de você ter que ficar apagando o anterior.

Código:
$(document).ready(function(){

     var userStylesheet = $.cookie(this),
       date = new Date(),
  minutes = 60; // Tempo de expiração
  
  date.setTime(date.getTime() + (minutes * 60 * 1000));
  if(userStylesheet("cleanlinuxtheme")) {
  var ss = $('<link/>').attr('rel', 'stylesheet').attr('type','text/css').attr('href', '/css/style_' + userStylesheet + '.css');
        $(document.body).append(ss);
  }
  
  else{
         var ss = $('<link/>').attr('rel', 'stylesheet').attr('type','text/css').attr('href', '/css/style_blacktheme.css');
        $(document.body).append(ss);
  };
  /* ao clicar na div com id="box" executa a função */
  $("#blacktheme").click(function(){
         $.cookie('userStylesheetKey', 'blacktheme',{expires:date});
  );
  });
  /* ao clicar na div com id="box" executa a função */
  $("#whitetheme").click(function(){
         $.cookie('userStylesheetKey', 'cleanlinuxtheme',{expires:date});
  );
  });
});

https://jsfiddle.net/Nano_/6uc4mrL8/1/
 
Você pode colocar um select ou botões que só chamam um outro css e salvar o css escolhido em cookie. Acho mais jogo salvar a escolha do que o arquivo inteiro.

Mas se não for dar suporte a IE abaixo do 8, pode usar o localStorage também [ localStorage.setItem(chave, valor) = grava / localStorage.getItem(chave) = pega o valor ]

Não testei não, testa aí e me avisa se der algum erro. :p

No caso gravei um cookie só com a escolha do usuário. Se o cookie não existir, ele cria. Se existir e a escolha for outra, ele sobrescreve. Evita de você ter que ficar apagando o anterior.

Código:
$(document).ready(function(){

     var userStylesheet = $.cookie(this),
       date = new Date(),
  minutes = 60; // Tempo de expiração
 
  date.setTime(date.getTime() + (minutes * 60 * 1000));
  if(userStylesheet("cleanlinuxtheme")) {
  var ss = $('<link/>').attr('rel', 'stylesheet').attr('type','text/css').attr('href', '/css/style_' + userStylesheet + '.css');
        $(document.body).append(ss);
  }
 
  else{
         var ss = $('<link/>').attr('rel', 'stylesheet').attr('type','text/css').attr('href', '/css/style_blacktheme.css');
        $(document.body).append(ss);
  };
  /* ao clicar na div com id="box" executa a função */
  $("#blacktheme").click(function(){
         $.cookie('userStylesheetKey', 'blacktheme',{expires:date});
  );
  });
  /* ao clicar na div com id="box" executa a função */
  $("#whitetheme").click(function(){
         $.cookie('userStylesheetKey', 'cleanlinuxtheme',{expires:date});
  );
  });
});

https://jsfiddle.net/Nano_/6uc4mrL8/1/
Valeu pelo apoio amigo!
Não consegui fazer funcionar no momento, mas vou continuar tentando ;)
 

Users who are viewing this thread

Voltar
Topo