Est-il possible de permettre aux visiteurs de choisir la couleur du fond ?

[Fil-de-faire]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://unebouteillealamer.pro-forum.fr/forum

Description du problème

Bonjour ! Tout est dans le titre..

Sur un template de Noel, je souhaiterais que le visiteur puisse choisir entre quelques couleurs pour le fond (avoir du vert, ou du rouge, ou du blanc...).
Il faudrait des petits carrés de couleurs où le visiteur puisse cliquer pour choisir.
Cela est-il possible ?

Fil'

[Adam_sfp]

Bonjour

Oui c'est possible
Voici une base que vous pouvez modifier selon vos envies.. du coup j'ai ajouté un bouton pour la neige...mais on peut l'enlever..
https://jsbin.com/javeyijopa/edit?html,css,js,output

Il y a tout les codes nécessaires pour le mettre en place sur votre forum.
Vous n'avez pas précisé si c'est juste pour l'accueil ou toutes les pages...
On peut vous aider et détailler le placement si nécessaire

Cdt.

[Fil-de-faire]

Bonjour Adam_sfp !
Tout d'abord, un grand grand merci pour votre réponse.
Je regarde vos explications qui me semblent très claires à tête reposée et reviens vers vous. C'est EXACTEMENT ce que je voulais et cette neige... elle est somptueuse ! Encore merci et à très vite !
Fil'

[Adam_sfp]

Super si ça vous convient ;-)

Je viens juste de voir un doublon dans la partie script (j'ai surement coller en double ) cette partie en fin de script que vous pouvez enlevez

Code:

if (localStorage.getItem("background") != null) {
  getColour = localStorage.background;
  document.body.className = getColour;
}


jQuery(".c-green-button").click(function () {
  setColour = "c-green"
  document.body.className = setColour
  localStorage.setItem("background", setColour);
});
jQuery(".c-white-button").click(function () {
  setColour = "c-white"
  document.body.className = setColour
  localStorage.setItem("background", setColour);
});
jQuery(".c-red-button").click(function () {
  setColour = "c-red"
  document.body.className = setColour
  localStorage.setItem("background", setColour);
});

[Fil-de-faire]

Bonjour Adam_sfp !

J'ai :

- mis le javascript et l'activé (supprimé le paragraphe faisant doublon)
- supprimé l'ancienne animation flocons
- mis la css
- mis le code sur l'index

et... rien ne se passe. Qu'ai-je oublié ?

[Fil-de-faire]

Je ne suis pas experte mais je pense qu'il vaut mieux mettre le premier code dans le haut de page, pour que ce soit actif sur toutes les pages non ?

[Adam_sfp]

Bonsoir

Oui ce n'est pas évident à mettre en place  ce qui fonctionne en extérieur ne fonctionne pas toujours sur forum actif ou il peut y avoir conflit avec d'autres scripts...

On va essayer comme ceci :
le premier script qui correspond à la neige à mettre dans gestion des codes javascript sur toutes les pages.

Code:

window.onload = function() {
  function snowFall(snow) {
    snow = snow || {};
    this.maxFlake = snow.MaxFlake || 50;
    this.flakeSize = snow.flakeSize || 8;
    this.fallSpeed = snow.fallSpeed || 2;
    this.status = 0;
  }
  requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) {
    setTimeout(callback, 1000 / 60);
  };
  cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame;
  snowFall.prototype.start = function() {
    if (this.status == 1 || this.status == 4) {
      return false;
    }
    this.status = 1;
    snowCanvas.apply(this);
    createFlakes.apply(this);
    drawSnow.apply(this);
  };
  snowFall.prototype.stop = function() {
    if (this.status == 2 || this.status == 0 || !this.canvas) {
      return false;
    }
    this.pause();
    this.status = 2;
    this.canvas.parentNode.removeChild(this.canvas);
    this.canvas = null;
  };
  snowFall.prototype.pause = function() {
    if (this.status == 3) {
      return false;
    }
    this.status = 3;
    cancelAnimationFrame(this.loop);
  };
  snowFall.prototype.resume = function() {
    if (this.status == 3 && this.canvas) {
      this.status = 4;
      this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
      });
    }
  };
  function snowCanvas() {
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = window.innerHeight;
    snowcanvas.setAttribute("style", "position:fixed; top:0; left:0; z-index:1000; pointer-events:none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    window.onresize = function() {
      snowcanvas.width = window.innerWidth;
      snowcanvas.height = window.innerHeight;
    };
  }
  function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);
    this.y = Math.floor(Math.random() * canvasHeight);
    this.size = Math.random() * flakeSize + 2;
    this.maxSize = flakeSize;
    this.speed = Math.random() * 1 + fallSpeed;
    this.fallSpeed = fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
    this.stepSize = Math.random() / 30;
    this.step = 0;
  }
  flakeMove.prototype.update = function() {
    var x = this.x, y = this.y;
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
      this.velY = this.speed;
    }
    this.velX += Math.cos(this.step + .05) * this.stepSize;
    this.y += this.velY;
    this.x += this.velX;
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
      this.reset(canvas.width, canvas.height);
    }
  };
  flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
  };
  flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255,255,255,0.9)");
    snowFlake.addColorStop(.5, "rgba(255,255,255,0.5)");
    snowFlake.addColorStop(1, "rgba(255,255,255,0)");
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  };
  function createFlakes() {
    var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
      flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed));
    }
  }
  function drawSnow() {
    var maxFlake = this.maxFlake, flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
      flakes[e].update();
      flakes[e].render(ctx);
    }
    this.loop = requestAnimationFrame(function() {
      drawSnow.apply(that);
    });
  }
  var snow = new snowFall({maxFlake:200});
  var get = function(id) {
    return document.getElementById(id);
  }, oStart = get("snowStart"), oStop = get("snowStop"), oPause = get("snowPause"), oResume = get("snowResume");
  oStart.addEventListener("click", snow.start.bind(snow));
  oStop.addEventListener("click", snow.stop.bind(snow));

};

Dans ce code au début vous pouvez personnaliser la neige dans cette partie

Code:

 this.maxFlake = snow.MaxFlake || 50; // ICI LE NOMBRE DE FLOCONS
           this.flakeSize = snow.flakeSize || 8; // ICI LA TAILLE MAX
          this.fallSpeed = snow.fallSpeed || 2; // ICI LA VITESSE


Ensuite on met ce 2 ème script à mettre dans gestion des codes javascript sur toutes les pages.
(ce script permet de garder en "mémoire" la couleur choisie même à l'actualisation de la page. )

Code:

$(function(){if(localStorage.getItem("background")!=null){getColour=localStorage.background;document.body.className=getColour}jQuery(".c-green-button").click(function(){setColour="c-green";document.body.className=setColour;localStorage.setItem("background",setColour)});jQuery(".c-white-button").click(function(){setColour="c-white";document.body.className=setColour;localStorage.setItem("background",setColour)});jQuery(".c-red-button").click(function(){setColour="c-red";document.body.className=setColour;
localStorage.setItem("background",setColour)})});

Ensuite  CSS dans la partie CSS

Et pour finir le HTML pour toutes les pages il faudrait passer par le template overall header
recherchez cette ligne

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Et mettre le code juste après

Code:

<div class="colorBack">
 <div class="c-green-button"></div>
 <div class="c-white-button"></div>
 <div class="c-red-button"></div>
</div>
<div class="Buttonsnow">
 <div class="c-snowon-button" id="snowStart">ON</div>
  <div class="c-snowoff-button" id="snowStop">OFF</div>
</div>
 

Enregistrez et n'oubliez pas de publier.
Sinon pour l'effet uniquement sur l’accueil mettre le code HTML en page d’accueil  

Cela devrait fonctionner je viens de tester sur un forum

Cdt.

[Fil-de-faire]

C'est juste parfait et correspond complètement à mes attentes... je vous invite à regarder le résultat !
Vos explications sont si claires... j'ai l'impression d'être super forte et d'avoir fait quelque chose d'extraordinaire !
...
Une dernière question : que puis-je faire pour vous remercier ?

[Adam_sfp]

Bonsoir

Mais vous êtes super forte et vous avez fait quelque chose d'extraordinaire !
C'est en parfaite adéquation avec votre forum et le dosage de neige est parfait  

Vous me remerciez amplement en mettant ce code sur votre forum

[lilas]

wow !!! Très belle neige... Adam.

Dommage, ma page de script est full pin. Je l'aurais installé avec plaisir !

[Fil-de-faire]

Encore merci...!