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
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!