Mudando o layout dinamicamente

Publicado por Diogo Souza da Silva 04/05/2007

[ Hits: 7.545 ]

Homepage: www.manfiesto.blog.br

Download cssalt.js




Fiz um javascript para usar no meu portfólio.

Este script serve para alternar/alterar o estilo da página carregada através dos "alternates stylesheets", permitindo mudar todo layout sem reload(recarregar) da página.

Também reforça o uso de webstands e o layout via css, além de salvar a sessão em cookie para a próxima visita já usar o último layout escolhido.

  



Esconder código-fonte

// Para cada estilo alternativo, você deve definir no head assim:
// <link href="extras/estilos/segundo.css" rel="alternate stylesheet" type="text/css"  title="Dark" />
// E entao no onload do body, deve-se chamar a funcao start()
// Para mudar o css ativo basta chamar a funcao troca(txt), sendo txt o title do css a ser usado
// O estilo ativo é salvo nos cookies para ser usado na proxima atualização 
// A variavel padrao quarda o estilo basico caso nenhum estaja precarregado
// 
// by http://www.manifesto.blog.br/
   padrao = "basico" ;
   function troca(txt) 
      for(i=0;(a=document.getElementsByTagName("link")[i]);i++) {
         if (a.getAttribute("title") == txt) {
            a.disabled = false ;
         } else  {
            a.disabled = true ;
         }
      }
       setCookie("estilo",txt,"99",null,null,null,null);
   }
   function setCookie(name, value, expires, path, domain, secure) {
        var curCookie = name + "=" + escape(value) +
            ((expires) ? "; expires=2088" : "2098") +
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            ((secure) ? "; secure" : "");
        document.cookie = curCookie;
   }
   function getCookie(name) {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1) {
          begin = dc.indexOf(prefix);
       if (begin != 0) return null;
      } else
          begin += 2;
      var end = document.cookie.indexOf(";", begin);
      if (end == -1)
         end = dc.length;
       return unescape(dc.substring(begin + prefix.length, end));
   }
   function start() {
      txt = getCookie("estilo");
      if (txt == null) { txt = padrao ;   }
      troca(txt)
   }

Scripts recomendados

Redireciona a página de acordo com a Resolução

Efeito de Neon com CSS

Menu sanfona com JQuery apenas utilizando as tags UL e LI

FUNDO QUE MUDA DE COR

Cores de paginas


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts