AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Sélecteur de couleur de fond

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Jeu 15 Oct 2015 - 10:37

    Hello hello !
    Bon, je le dis tout de suite, je ne savais vraiment pas où poster ça, donc on va dire que c'est une demande, comme ça ça pourra servir à d'autres, mais je préférerais qu'on m'explique comment faire, plutôt que de me donner un code tout prêt. (mes excuses si je n'utilise pas la fiche de demande, mais c'est un peu particulier)

    Il s'agit d'un outil qui ressemble à un sélecteur de thème, mais en beaucoup plus simple. Cela ressemble à ce qu'on peut trouver sur ce site : http://www.scan-manga.com/lecture-en-ligne/Magi-Labyrinth-of-Magic-Chapitre-280-L-execution_34082.html#542.34082.985892 (la barre avec un curseur en haut à gauche qui permet de régler la couleur du fond de page). Sauf que c'est encore plus simple : il suffirait qu'un membre puisse cliquer deux boutons au choix : l'un donnant au fond du forum une couleur claire, l'autre une couleur foncée.
    Donc, à la différence d'un sélecteur de thème, je préférerais que ça ne change pas entièrement de feuille CSS, puisqu'il n'y a qu'une seule chose à changer...

    Je n'aurai pas de problème à m'occuper de créer ces boutons et les couleurs, mais à titre indicatif, on peut utiliser #FFFFFF en clair et #272727 en foncé. La div à laquelle donner cette couleur de fond se nomme #CDS

    En fait ma difficulté, et là où je ne sais vraiment pas comment faire, ni même quel langage utiliser, c'est que j'aimerais que la couleur que le membre choisit reste en dépit des réactualisations et changements de page. Je ne sais pas comment on fait, mais j'observe que sur le site plus haut, la couleur choisie reste d'une visite à l'autre, sauf vidage de cache ! J'aimerais que ce soit pareil ^^

    Voilà voilà, merci d'avance !


    Dernière édition par Alumine le Ven 16 Oct 2015 - 16:11, édité 1 fois



    Alumine
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 15 Oct 2015 - 10:51

    Le plus simple selon moi serait d'utiliser du JS. Normalement avec un onclick sur le bouton, tu fais appel à une fonction qui change la couleur de fond avec la fonction .css () de jquery. Là je pars du principe que tu es sur forumactif donc que tu as la librairie déjà ^^

    Du coup tu aurais un truc du genre dans ta fonction:
    Code:
    $('#CDS').css ("background-color", "couleur");

    Désolée si je ne dis pas plus, je suis sur tablette et c'est difficile xD



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 15 Oct 2015 - 16:35

    Petit double-poste mais parce que je sais que tu as vu mon autre message: voici un exemple de ce que tu veux --> si tu reload la page il mettra celle de tes deux couleurs que tu as sélectionné.

    Edit: Je te montre un truc et je te mets même pas le code, tss, je suis bête. Tiens:

    Code:
    <script type="text/javascript">
     
      var myKey = "nyoColorchange";
      var couleur = localStorage[myKey] || 'red';
     
      $(function() {
            colorChange(couleur);
      });
     
      function colorChange(c) {
         couleur = c;
         $('#cnd').css("background-color", couleur);
         localStorage[myKey] = couleur;
      }
    </script>

    <br /><div id="cnd" style="width: 300px; height: 300px; background-color: red;"></div>

    <input type="button" value="red" onclick="colorChange('red')" /><br/>
    <input type="button" value="blue" onclick="colorChange('blue')" />

    Note: j'utilise le haut et bas de forum dans la page HTML pour avoir la librairie jQuery x)



    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Ven 16 Oct 2015 - 14:59

    Wow, c'est efficace !
    Mais j'ai un petit truc à lui reprocher : La couleur choisie ne se met pas immédiatement au chargement de la page, il faut attendre un peu... serait-ce possible d'accélérer ça ?
    Voilà mon forum test, les boutons sont dans le panneau latéral de gauche



    Alumine
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 16 Oct 2015 - 15:28

    Alors pour moi ça se fait immédiatement au chargement de la page >w< donc je saurais pas t'aider!
    Mais sinon, cela vient probablement du fait que j'utilise document.ready (le $() ) qui attend que toute la page soit chargée pour effectuer le code. Ce que tu peux faire c'est que tu peux plutôt mettre le JS juste après CDS, comme ça quand il est chargé lui (et non pas toute la page), la fonction de chercher la couleur s'active. Après cela implique mettre le code plutôt dans la page plutôt que dans les script de ton forum test.



    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Ven 16 Oct 2015 - 16:04

    Je vais essayer ! Merci (= (en fait mon script était déjà dans la page, mais juste avant les input)
    Edit : alors oui, c'est un peu plus rapide ! Je vais inputer le reste du temps de chargement à mon vieil ordi...
    Je mets l'icône résolu, je ne sais pas si tu souhaites en faire un LS ?



    Alumine
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 16 Oct 2015 - 18:16

    Hum, je ne sais pas vraiment si ce sera très très très utile en fait en tant que LS scratch



    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Sam 17 Oct 2015 - 12:09

    C'est vrai que c'est très spécifique ! x)
    *Alu et es demandes bizarres*
    Encore merci en tout cas (=



    Alumine
    Contenu sponsorisé


      La date/heure actuelle est Mer 8 Mai 2024 - 4:22