Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [TUTORIAL] Background conforme hora do dia em Sab Mar 23, 2013 11:11 pm

avatarT-Lord
Admin

Background

Com
esse código, válido para todas as versões, torna o fórum capaz de
apresentar aos nossos usuários um fundo para fórum para cada hora do dia
em que nos encontramos, separadamente para a manhã, dia e noite.





--> Tutoriais, dicas e astúcias <--
Background conforme hora do dia



1º - Código a ser utilizado:
Começo do código
Código:
        jQuery(function() {

Meio do código

//Zona editável------------------------------------------------------------

var seletor_css = "body";
var imagem_se_repete = true;

var horario_inicio = new Array();
horario_inicio["manhã"] = 5;
horario_inicio["tarde"] = 12;
horario_inicio["noite"]= 21;

var imagens = new Array();
imagens["manhã"] = "Imagem pela manhã";
imagens["tarde"] = "Imagem pela tarde";
imagens["noite"] = "Imagem pela noite";

//Fim da zona editável----------------------------------------------------------

Final do código
Código:
        var horaAtual = (new Date()).getHours();
        var imagem = "";
        if(horaAtual >= horario_inicio["manhã"] && horaAtual < horario_inicio

        ["tarde"]){
          imagem = imagens["manhã"];
        }else if(horaAtual >= horario_inicio["tarde"] && horaAtual <

        horario_inicio["noite"]){
          imagen = imagens["tarde"];
        }else if(horaAtual >= horario_inicio["noite"] || horaAtual < horario_inicio

        ["manhã"]){
          imagen = imagens["noite"];
        }

        if(imagem_se_repete){
          jQuery(seletor_css).css("background", "url("  imagem  ") repeat");
        }else{
          jQuery(seletor_css).css({"background-image":"url("  imagem  ")",

        "background-repeat":"no-repeat", "background-size":"cover"});
        }
            });

Vermelho -> Neste local irá substituir o
texto adicionando o link da imagem que será aplicada ao fundo do fórum
quando estiver de manhã.
Verde -> Neste
local irá substituir o texto adicionando o link da imagem que será
aplicada ao fundo do fórum quando estiver a tarde.
Laranja
-> Neste local irá substituir o texto adicionando o link da imagem
que será aplicada ao fundo do fórum quando estiver de noite.

2º - Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts




Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Habilitar o gerenciamento dos códigos JavaScript Ao
selecionar a opção sim, estará ativando a função páginas Javascript no
seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Exemplo de código:
Código:
        jQuery(function() {
             
              //ZONA EDITABLE------------------------------------------------------------
             
              var selector_css = "body";
              var imagen_se_repite = true; 
             
              var horario_inicio = new Array();
              horario_inicio["mañana"] = 5; 
              horario_inicio["tarde"] = 12;
              horario_inicio["noche"]= 21;     
             
              var imagenes = new Array();
              imagenes["mañana"] = "http://i35.servimg.com/u/f35/17/45/19/77/manana11.jpg";
              imagenes["tarde"] = "http://i35.servimg.com/u/f35/17/45/19/77/tarde11.jpg";
              imagenes["noche"] = "http://i35.servimg.com/u/f35/17/45/19/77/noche11.jpg";
              //FIN ZONA EDITABLE----------------------------------------------------------
             
             
              var horaActual = (new Date()).getHours();
              var imagen = "";
              if(horaActual >= horario_inicio["mañana"] && horaActual < horario_inicio["tarde"]){
                  imagen = imagenes["mañana"];
              }else if(horaActual >= horario_inicio["tarde"] && horaActual < horario_inicio["noche"]){
                  imagen = imagenes["tarde"];
              }else if(horaActual >= horario_inicio["noche"] || horaActual < horario_inicio["mañana"]){
                  imagen = imagenes["noche"];
              }
             
              if(imagen_se_repite){
                  jQuery(selector_css).css("background", "url("  imagen  ") repeat");
              }else{
                  jQuery(selector_css).css({"background-image":"url("  imagen  ")", "background-repeat":"no-repeat", "background-size":"cover"});
              }
        });

Resultado:



Concerteza achará feio, é só mudar as imagens do seu gosto, se tiver problemas crie um Tópico que ajudarei rapidamente!

Ver perfil do usuário http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum