Partage
  • Partager sur Facebook
  • Partager sur Twitter

liste déroulante avec du js pour système de bbcode

Rn^
    24 décembre 2005 à 18:50:10

    Bonjour,
    je cherche a réaliser une liste déroulante "couleur" la même que celle utiliser dans le zform du site du zéro.
    J'ai deja créé tout le systeme de bbcode il me manque juste une liste déroulante qui quant je cliquerais sur rouge par exemple mettra [couleur=red][/couleur] dans mon champs de textarea situé en dessous.

    Voici un exemple pour le bouton qui permet d'insérer les balises italic:

    <input type="button" id="Souligné" name="Souligné" value="Souligné" onClick="javascript:bbcode('[s]', '[/s]');return(false)" />


    Voici ma liste deroulante:

    <select name="Couleur">
         <option selected="selected">Couleur</option>
                   <option value="rouge">rouge</option>
                   <option value="bleu">bleu</option>
                   <option value="vert">vert</option>
                   <option value="jaune">jaune</option>
                   <option value="gris">gris</option>
                   <option value="noir">noir</option>
    <liste>
    </liste></select>


    Je n'arrive pas à mettre par exemple:
    <select onClick="javascript:bbcode('[couleur=red]', '[/couleur]');return(false)" />
    à coté de chaque option value....

    Ca doit marcher differement pour une liste déroulante mais je n'ai trouvé nul par!! merci a vous !!

    [Edit] Titre édité.
    • Partager sur Facebook
    • Partager sur Twitter
    Rn^
    Spiky
      25 décembre 2005 à 14:22:04

      function ChangeUrl(formulaire)
              {
              if (formulaire.Couleur.selectedIndex != 0)
                      {
                      location.href = formulaire.Couleur.options[formulaire.Couleur.selectedIndex].value;
                      }
              else
                      {
                      alert('Veuillez choisir une couleur.');
                      }
              }


      Tu définis la variable ChangeUrl

      Ensuite tu l'applique :) :

      <select name="Couleur" onChange="ChangeUrl(this.form)">


      Ciao,
      Spiky.
      • Partager sur Facebook
      • Partager sur Twitter
      Rn^
        26 décembre 2005 à 21:15:07

        merci spiky mais je crois que tu n'a pas compris exactement ce que je voulais faire, regarde la liste déroulante "couleur" du site du zéro lorsque tu veux poster un message sur le forum. Quant tu sélectionnes une couleur ca insere les balises correspondantes à cette couleur dans le formulaire en dessous!
        C'est ca que je voudrais arriver a faire!
        merci!
        • Partager sur Facebook
        • Partager sur Twitter
        Rn^
        Rn^
          28 décembre 2005 à 0:56:03

          svp j'ai besoin d'aide ca ne doit pourtant pas etre si dificil!
          merci.
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            28 décembre 2005 à 3:03:22

            Bha, tout ce que tu as a faire est de mettre ton onclik dans la balise option, ce qui te donnera:

            <option value="rouge" onClick="javascript:bbcode('[couleur=red]', '[/couleur]');return(false)">rouge</option>


            ;)

            J'espère t'avoir aidé,
            Luigi_home
            • Partager sur Facebook
            • Partager sur Twitter
            Rn^
              28 décembre 2005 à 13:26:10

              merci de ta réponse, moi même je ne comprends pas mais en utilisant cette facon de faire ca ne fonctionne pas non plus!
              Voici ma liste déroulante maintenant:

              <select name="Couleur">
                   <option selected="selected">Couleur</option>
                             <option value="rouge" onClick="javascript:bbcode('[couleur=red]', '[/couleur]');return(false)">rouge</option>
                             <option value="bleu" onClick="javascript:bbcode('[couleur=bleu]', '[/couleur]');return(false)">bleu</option>
                             <option value="vert" onClick="javascript:bbcode('[couleur=vert]', '[/couleur]');return(false)">vert</option>
                             <option value="jaune" onClick="javascript:bbcode('[couleur=jaune]', '[/couleur]');return(false)">jaune</option>
                             <option value="gris" onClick="javascript:bbcode('[couleur=gris]', '[/couleur]');return(false)">gris</option>
                             <option value="noir" onClick="javascript:bbcode('[couleur=noir]', '[/couleur]');return(false)">noir</option>
              </select>


              malheuresement quant je sélectionne par exemple rouge dans ma liste déroulante rien ne se passe alors que quant je clic sur un bouton par exemple "souligné" les balises s'affiche dans mon textarea.
              Voici le code du bouton si ca peut aider:

              <input type="button" id="Souligné" name="Souligné" value="Souligné" onClick="javascript:bbcode('[s]', '[/s]');return(false)" />
              • Partager sur Facebook
              • Partager sur Twitter
              Rn^
                29 décembre 2005 à 11:22:34

                j'ai besoin d'aide svp :)
                • Partager sur Facebook
                • Partager sur Twitter
                Rn^
                  29 décembre 2005 à 23:42:09

                  aidez moi svp! merci!
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Rn^
                    30 décembre 2005 à 23:19:48

                    encore un up j'ai toujours pas trouvé le problème ca me bloque vraiment svp aidez moi n'importe quelle aide sera la bienvenue!! merci!
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Styblue
                      31 décembre 2005 à 1:51:50

                      Salut,

                      Tu pourrais poster ta fonction à quoi elle ressemble ? Si tu veux je te laisse le code de ma fonction puis d'un bout de mon formulaire pour que tu vois car moi j'ai fais comme ça et ça marche... Au cas ou ça pourrai t'aider.


                      function scode(debut, fin)
                      {
                              var input = window.document.forms[0].textarea_scode;
                              input.focus();
                             
                              /* IE */
                              if (typeof document.selection != 'undefined')
                              {
                                      var range = document.selection.createRange();
                                      var insText = range.text;
                                      range.text = debut + insText + fin;
                                      range = document.selection.createRange();
                                      if (insText.length == 0)
                                      {
                                              range.move('character', -fin.length);
                                      }
                                      else
                                      {
                                              range.moveStart('character', debut.length + insText.length + fin.length);
                                      }
                                      range.select();
                              }

                              /* FIREFOX */
                              else if (typeof input.selectionStart != 'undefined')
                              {
                                      var start = input.selectionStart;
                                      var end = input.selectionEnd;
                                      var insText = input.value.substring(start, end);
                                      input.value = input.value.substr(0, start) + debut + insText + fin + input.value.substr(end);
                                      var pos;
                                     
                                      if (insText.length == 0)
                                      {
                                              pos = start + debut.length;
                                      }
                                     
                                      else
                                      {
                                              pos = start + debut.length + insText.length + fin.length;
                                      }
                                      input.selectionStart = pos;
                                      input.selectionEnd = pos;
                              }

                              /* AUTRES */
                              else
                              {
                                      var pos;
                                      var re = new RegExp('^[0-9]{0,3}$');
                                      while (!re.test(pos))
                                      {
                                              pos = prompt("insertion (0.." + input.value.length + "):", "0");
                                      }
                                      if (pos > input.value.length)
                                      {
                                              pos = input.value.length;
                                      }
                                      var insText = prompt("Veuillez taper le texte");
                                      input.value = input.value.substr(0, pos) + debut + insText + fin + input.value.substr(pos);
                              }
                      }


                      Et voici un bout de mon formulaire avec des <select>


                              <div id="taille">
                              <select name="taille">
                                      <span class="titre_option"><option value="taille" selected="selected">Taille</option></span>
                                      <option value="minuscule" onclick="javascript:scode('<taille=minuscule>', '</taille>');this.parentNode.selectedIndex=0;">Minuscule</option>
                                      <option value="tres_petit" onclick="javascript:scode('<taille=tres_petit>', '</taille>');this.parentNode.selectedIndex=0;">Très Petit</option>
                                      <option value="petit" onclick="javascript:scode('<taille=petit>                      ', '</taille>');this.parentNode.selectedIndex=0;">Petit</option>
                                      <option value="moyen" onclick="javascript:scode('<taille=moyen>', '</taille>');this.parentNode.selectedIndex=0;">Moyen</option>
                                      <option value="grand" onclick="javascript:scode('<taille=grand>', '</taille>');this.parentNode.selectedIndex=0;">Grand</option>
                                      <option value="tres_grand" onclick="javascript:scode('<taille=tres_grand>                      ', '</taille>');this.parentNode.selectedIndex=0;">Très Grand</option>
                                      <option value="enorme" onclick="javascript:scode('<taille=enorme>', '</taille>');this.parentNode.selectedIndex=0;">Enorme</option>
                              </select>
                              </div>
                       


                      Pour le : this.parentNode.selectedIndex=0; t'en fais pas t'es pas obligé de le mettre ça permet simplement quand la liste déroulante tu clique sur un élement bah ça remonte tout seul sur l'élement de départ.

                      Ps : le code est inspiré du tuto dans javascript.

                      Voila si ça à pu t'aider..
                      • Partager sur Facebook
                      • Partager sur Twitter
                      Rn^
                        31 décembre 2005 à 11:50:40

                        Merci davoir repondu; voila ma fonction:

                        function bbcode(bbdebut, bbfin)
                        {
                        var input = window.document.form2.contenu;
                        input.focus();
                        /* pour IE (toujous un cas appar lui ;) )*/
                        if(typeof document.selection != 'undefined')
                        {
                        var range = document.selection.createRange();
                        var insText = range.text;
                        range.text = bbdebut + insText + bbfin;
                        range = document.selection.createRange();
                        if (insText.length == 0)
                        {
                        range.move('character', -bbfin.length);
                        }
                        else
                        {
                        range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
                        }
                        range.select();
                        }
                        /* pour les navigateurs plus récents que IE comme Firefox... */
                        else if(typeof input.selectionStart != 'undefined')
                        {
                        var start = input.selectionStart;
                        var end = input.selectionEnd;
                        var insText = input.value.substring(start, end);
                        input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
                        var pos;
                        if (insText.length == 0)
                        {
                        pos = start + bbdebut.length;
                        }
                        else
                        {
                        pos = start + bbdebut.length + insText.length + bbfin.length;
                        }
                        input.selectionStart = pos;
                        input.selectionEnd = pos;
                        }
                        /* pour les autres navigateurs comme Netscape... */
                        else
                        {
                        var pos;
                        var re = new RegExp('^[0-9]{0,3}$');
                        while(!re.test(pos))
                        {
                        pos = prompt("insertion (0.." + input.value.length + "):", "0");
                        }
                        if(pos > input.value.length)
                        {
                        pos = input.value.length;
                        }
                        var insText = prompt("Veuillez taper le texte");
                        input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
                        }
                        }
                        function smilies(img)
                        {
                        window.document.form2.contenu.value += '' + img + '';
                        }


                        Je ne parviens pas a trouver le probleme :/
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Rn^

                        liste déroulante avec du js pour système de bbcode

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur ●
                        • Markdown