Mudança de Fundo (gravar escolha)

CabrestoSexy

Power Member
Boas pessoal :P

É o seguinte, eu fiz uma pequena brincadeirinha que até é engraçadita xD

A Ideia é tipo, entrem nesse site http://servidorteste.site50.net/ideia/

Tipo se carregarem no link mudar1 aparece um fundo com uma certa imagem, e se carregarem no mudar2 acontece o mesmo, pronto até ai tudo bem.

Só que por exemplo, se voces sairem do site e voltarem a entrar, aparece tudo de padrao novamente, ou até mesmo se fizerem f5 :c

O que eu queria perguntar era do tipo, existe alguma maneira para gravar tipo a opção da escolha da pessoa para quando ela voltar a entrar no site, o fundo estar como ela escolheu ? :P

Tipo um cookie ou algo do genero sei la xD

Quem puder ajudar, agradecia :D
Isto se for possivel fazer claro :3

Cumprimentos
 
Olá, a forma mais simples e rápida será usando, como referiste, cookies.

Pois, mas o prob é esse xD

Eu nao sei fazer esse tal cookie, que faça com que ele guarde as escolhas xD

Nunca trabalhei quase nenhuma vez com cookies :x

Se alguem me puder ajudar agradecia <3 *-*

Se quiserem posso deixar aqui o codigo :P tambem nao é muito grande xD
 
Podes usar uma dessas duas estratégias (cookies ou webstorage). Tenta até implementar ambas para perceberes a diferença entre elas.

Para cookies, tens de fazer muita coisa à pata, porque o cookie é uma string do género "chave1=valor1; chave2=valor2" e por aí fora. Podes sempre usar as funções sugeridas neste post:
http://stackoverflow.com/questions/1704991/can-i-modify-or-add-cookies-from-javascript

Para webstorage, as coisas são mais fáceis. O browser já incluí funções para trabalhar de modo eficiente com isto. Por exemplo, gravar a cor do fundo seria tão simples como:

Código:
window.localStorage['fundo'] = "green";

Depois, na próxima visita, basta-te ler esse valor:

Código:
var corFundo = window.localStorage['fundo'];

Podes usar esse link que tu próprio colocaste para aprofundar mais o assunto. Normalmente, o que se faz é uma combinação de técnicas para o caso de o browser não suportar webstorage (problema que tende a desaparecer), usar cookies em vez disso.
 
Fiz uma coisinha engraçado com isso do html5 storage, http://servidorteste.site50.net/html5/ porem apesar de ser engraçado, nao vejo muito funcionalidade para o que eu preciso xD


É assim eu vou explicar digamos de uma vez por todas o que eu preciso. Porque eu já estou atrás disto á 2 dias e tal, e secalhar o que eu quero faz-se em menos de meia hora....

O Code do site que eu pus aí é o seguinte:


Código:
<script type="text/javascript">
function mudar_bg(){
document.getElementById('bg').style.background='#000000 url(sura.png) center top no-repeat';
}
function mudar_bgg(){
document.getElementById('bg').style.background='#00ff00 url(shaman.png) center top no-repeat';
}

</script>
</head>
<body id="bg">

<a href="#" onClick="mudar_bg()">Mudar</a>
<a href="#" onClick="mudar_bgg()">Mudar2</a>

</body>

Ou seja.. Basicamente, quando eu carrego no "Mudar", ele muda me o background do site para "#000000 url(sura.png) center top no-repeat" como voces podem ver lá em cima.
E se carregar no Mudar2 igualmente.

So que pronto, se voces carregarem f5, volta tudo a mesmo .

O que eu queria era, que eu quando carregasse no botao "Mudar", ele grava se isso, e quando a pessoa entrar no site again aquilo esteja com as definiçoes que ela escolheu.

E pronto era isto..
Se alguem me puder ajudar a fazer agradecia muito, porque digo eu que nao deva demorar muito, so que eu não estou a conseguir perceber :x
Ou se alguem quiser dar um exemplo ou isso. Ou ajudar agradecia milhoes mesmo :)

Que funcione sobre cookies, ou sobre html storage pouco me importa, so queria é que isto funcionasse mesmo :(

Entretanto vou continuar a tentar :(

Cumprimentos
 
Última edição:
O webstorage ou cookies servem exatamente para isso, para reter informações para posteriores visitas. Vê nesse exemplo que colocaste que ele memoriza a lista, mesmo que faças F5 ela não desaparece. Vou tentar dar-te um empurrão ;)

Em vez de teres duas funções para fazer uma coisa parecida, podes começar por ter apenas uma, com parâmetros que mudam consoante o que tu queres:

Código:
function mudarBg(cor, personagem) {
    // guardar a nova cor no webstorage para mais tarde
    window.localStorage['corFundo'] = cor;
    window.localStorage['picPersonagem'] = personagem;

    // aplicar a nova cor
    var bg = document.getElementById('bg');
    bg.style.background = "url('" + personagem + "') center top no-repeat";
    bg.style.backgroundColor = cor;
}

Esta função faz duas coisas: guarda os novos valores com o webStorage para usar no futuro; define o fundo tal como as tuas funções (apenas dividi a definição do background em partes por conveniência). As tuas hiperligações têm agora de ser alteradas para esta nova função:

Código:
<a href="#" onClick="mudarBg('#000000', 'sura.png')">Mudar</a>
<a href="#" onClick="mudarBg('#00ff00', 'shaman.png')">Mudar2</a>

Falta a parte da "memória". Esta nova função mudarBg agora grava na webstorage, e podemos ir buscar os valores mais tarde. Quando a página arrancar, fazemos essa alteração, com o cuidado de ver se existem valores previamente colocados. Por baixo da função mudarBg, dentro das tags script, adiciona outra função:

Código:
function inicializar() {
    if(window.localStorage['corFundo'] !== undefined && window.localStorage['picPersonagem'] !== undefined) {
        // as variáveis já foram definidas numa visita anterior, vamos mudar para esses valores
        mudarBg(window.localStorage['corFundo'], window.localStorage['picPersonagem']);
    }
}

Agora, temos de definir esta função para correr quando a página abre. O teu body tem de chamar a função no event onload:

Código:
<body id="bg" style="background-color:green;" onload="inicializar()">

E pronto, muda a cor da página para outra e experimenta fazer refresh no browser. Vais ver que a cor muda consoante a última escolha do utilizador. Espero ter-te ajudado, e se não perceberes algo do código diz. ;)
 
OMG OMG OMG *-*

FUNCIONOUUU :D

Man asserioo........
Não sei como te hei-de agradecer....

Ficarei sempre em divida ctggg <33 *-*

Se eu alguma vez te puder ser util em algo, podes contar cmg ;)

Millll obrigadoes mesmooo <3
 
Eheh, na boa ;) Ainda bem que percebeste o básico do webStorage (leitura e escrita). Explora as funcionalidades que o HTML5 tem para te oferecer. E já que estás a ver HTML5, explora também algumas funcionalidades avançadas de CSS, como as transformações 2d. Quem sabe até podes criar um joguito com essas tecnologias ;) Tudo tem um começo.
 
Eheh, na boa ;) Ainda bem que percebeste o básico do webStorage (leitura e escrita). Explora as funcionalidades que o HTML5 tem para te oferecer. E já que estás a ver HTML5, explora também algumas funcionalidades avançadas de CSS, como as transformações 2d. Quem sabe até podes criar um joguito com essas tecnologias ;) Tudo tem um começo.

Eu por acaso exploro bastante o css3, bastante mesmo :P
Certas vezes até uso ele em vez de javascript/jquery para fazer certos efeitos, e as vezes até ficam melhor xD
E as vezes até dá jeito xD porque css "não dá" para desativar assim como o JS xD
Eu por acaso tenho reparado que muita gente, alias até empresas conceituadas não teem noção do poder do CSS3 e ainda usam as tipicas imagens só para fazer certos efeitos, carregando assim os seus proprios sites desnecessariamente...

Já do Html5 vou conhecendo agora aos poucos xD Mas com calma tudo vai lá e obrigado pelas dicas :P

Já agora uma pergunta...

Isso ficou a funcionar, tipo como te disse funcionou na perfeição :P So que quando fui tentar meter no meu site mesmo o original aconteceu o seguinte:
Pronto deu para carregar nos links e mudar o fundo etc, mas depois quando carregava F5 nada ficava guardado :c

Então fui tentar na minha pagina de offline, que é uma pagina que eu criei em html, para se acontecer algo com a base de dados ou alguma ligaçao que falhe e leve o site a deixar de funcionar, é logo acionada a pagina de manutençao/offline do site.
E nessa pagina o sistema voltou a funcionar direito outra vez.. Fazendo F5 e tudo, ficava tudo guardado.
Entao eu pensei, queres ver que isto so funciona em files .html e nao em .php ?
Mas mudei a file de html para php e funcionou na mesma..

Por isso agora estou a ficar á nora xD
Porque é que na pagina de down funciona, e na index nao ? u_u

Se tiveres alguma noção claro xD
 
Desculpa só responder agora. Eu visitei o site que deixaste e ainda tem o código antigo. O código deveria funcionar tanto online como offline, não há algo dependente de ligação a servidores, etc. Até porque o exemplo que deixaste das listas com HTML5 estão a funcionar bem e estão online. Será que na consola de erros (F12 na maioria dos browsers) aparece lá algum erro referente a isso?
 
Não é nesse site que está aqui no tópico que eu me estou a queixar xD

Eu estou a falar mesmo do principal :P

Tipo se acederes aqui á pagina de down http://mvpcabeleireiros.freeiz.com/down.html e carregares no dois links "mudar1 e mudar2", eles faz as mudanças e tal, e quando fizeres f5 as cenas ficam na mesma como tu mudanças

Agora se fores a pagina principal http://mvpcabeleireiros.freeiz.com/

Lá em baixo, os mesmos links debaixo do video, ele faz as mudanças e tal, mas se recarregares a pagina, puff foi se as mudanças :c

É isso que nao estou a perceber porque :x

Cumprimentos
 
Na página principal tens um script qualquer que te muda umas propriedades do fundo e que corre mais tarde. Isto significa que o script que copiaste daqui guarda os valores e está a correr (confirmei no debug do chrome), mas o outro sobrepõe-se e por isso é que não vês a mudança. Na página de manutenção, não tens esse script, e por isso é que consegues ver a mudança.

Agora aí é que já não consigo saber o que se passa, tens de tentar ver qual o script que está a interferir com a transição.
 
Na página principal tens um script qualquer que te muda umas propriedades do fundo e que corre mais tarde. Isto significa que o script que copiaste daqui guarda os valores e está a correr (confirmei no debug do chrome), mas o outro sobrepõe-se e por isso é que não vês a mudança. Na página de manutenção, não tens esse script, e por isso é que consegues ver a mudança.

Agora aí é que já não consigo saber o que se passa, tens de tentar ver qual o script que está a interferir com a transição.

Super Obrigadão men ;)

Consegui descobrir qual era o script que estava a fazer interferencia com o do storage e já corrigi :P

Mais uma vez obrigadão <3 Fico te a deve mais uma :D

Cumprimentos <3
 
Back
Topo