Bonjour,

Voila je rencontre un petit problème avec mon code javascript je cherche une solutuions pour permettre au visiteur de changer le background en cliquent sur des boutons de mon site, aprés le background choisi par l'utilisateur je ne veux pas qu'il disparer à l'acualisations de la page.

Voici le code javascript

/* Changer le background quand on clique sur un lien  */

        $(document).ready(function(){ 

            $("li.one").click( function(){ $
                ("body").removeClass('body2 , body3').addClass("body1"); 
            });

            $("li.two").click( function(){ $
                ("body").removeClass("body1 , body3").addClass("body2"); 
            });

            $("li.three").click( function(){ $
                ("body").removeClass("body1 , body2").addClass("body3"); 
            }); 

        });

Le code foctionne correctement mais apres l'actualisation la page le background disparait. Merci d'avance pour votre aide :)

8 réponses


Est-ce que tu t'es penché sur l'utilisation des cookies ? Il est normal que le changement de page conduise à la disparition des modifications apportées si celles-ce ne sont pas sauvegardées quelque part et vérifiées lors du chargement de la page. Le script que tu montres ici permet simplement le changement de la class du body, pas la vérification d'une modification antérieure.

Motel
Auteur

Merci pour ta réponse, oui je me suis renseigner sur d'autres site sur l'utilisation des cookies mais je n'est pas trouver grand choses sur ce que je voulais faire ! Tu aurais pas un script déjà fait à me proposer s'il te plaît

Pas de problème =) Je n'ai par contre pas de code tout prêt, mais le sujet est pas mal abordé sur des forums du type stackoverflow, un exemple de piste à suivre pour comprendre comment ça fonctionne : http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie

Motel
Auteur

J'ai regarder sur le site mas je ne comprens rien, je suis encore un débutant en programmation :/

j'ai essayer ceci mais cela ne fonctionnes pas

function setCookie(ready, removeClass, expirydays) {
 var d = new Date();
 d.setTime(d.getTime() + (expirydays*24*60*60*1000));
 var expires = "expires="+ d.toUTCString();
 document.cookie = ready + "=" + removeClass + "; " + expires;
}
        $(document).ready(function(){ 

            $("li.one").cookie( function(){ $
                ("body").removeClass('body2 , body3').addClass("body1"); 
            });

            $("li.two").click( function(){ $
                ("body").removeClass("body1 , body3").addClass("body2"); 
            });

            $("li.three").click( function(){ $
                ("body").removeClass("body1 , body2").addClass("body3"); 
            }); 

        });
Motel
Auteur

$("li.one").click il y'à une erreur, tu c'est comment je peu faire pour integrer le cookies ?

pourquoi pas utiliser le local storage? c'est plus simple qu'un cookie et c'est persistant aussi.

Motel
Auteur

Salut je ne suis pas trés bon en programation javascrip vous n'aurez pas des exemple de code sil vous plait

Si tu veux progresser la solution n'est pas de te fournir du code tout fait mais que tu comprennes toi-même comment résoudre ton problème.

Dans ton cas, le principe est d'enregistrer une valeur qui représente le choix de background de ton utilisateur dans quelque chose qui ne disparaît pas à l'actualisation de la page. Pour cela tu peux te pencher soit sur les cookies soit sur le local storage. Ensuite, quand la page charge, tu vérifies si une telle valeur existe dans le navigateur de ton utilisateur. Si elle existe tu changes automatiquement le fond d'écran, sinon tu affiches le fond d'écran par défaut.

Encore une fois, même si tu es débutant, demandé du code tout fait c'est le meilleur moyen de : 1 ne rien obtenir du tout, 2 ne pas progresser non plus.