liste déroulante + pop up

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • liste déroulante + pop up

    Bonjour,

    J'aimerai dans un de mes articles faire une liste déroulante comme ceci:

    Code HTML:
    <label for="pays">pays</label>
           <select name="pays" id="pays">
               <option value="france">France</option>
               <option value="espagne">Espagne</option>
               <option value="italie">Italie</option>
               <option value="royaume-uni">Royaume-Uni</option>
               <option value="canada">Canada</option>
               <option value="etats-unis">Etats-Unis</option>
               <option value="chine">Chine</option>
               <option value="japon">Japon</option>
           </select>
    J'aimerai quand on click sur France, une petit fenêtre pop-up (ou slideshow) s'ouvre en dessous avec l'adresse du magasin. Idem pour les autres pays...

    Comment créer ce pop up (ou slideshow)? c'est un article que je crée et que je transforme en pop up?

    Si oui comment?

    Merci de m'aider...

    PS: le code de ma liste est correct?
    Dernière édition par bizerte77 à 10/11/2009, 15h24

  • #2
    J'ai réussi à créer ma liste déroulante et le faire ouvrir en pop up.

    Mais en faite comme les pop up sont parfois/souvent bloqué, j'aimerai trouvé une solution similaire comme par exemple lightview :http://www.nickstakenburg.com/projects/lightview/

    Quand on click sur une photo elle apparait dans une "div".

    J'aimerai un effet similaire...

    Voici mon code:
    Code HTML:
    <script>// <![CDATA[
    function ChangeUrl(formulaire)
       {
       if (formulaire.pays.selectedIndex != 0)
          {
          location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
           }
       }
    // ]]></script>
    </p>
    <form> <select name="pays" size="1"> <option>pays</option> <option onclick="window.open('index2.php?option=com_content&amp;view=article&amp;id=71&amp;Itemid=67&amp;lang=fr','te','width=200,height=130,left=460, top=530');return false;" value="index2.php?option=com_content&amp;view=article&amp;id=71&amp;Itemid=67&amp;lang=fr">France</option>
     
    <option onclick="window.open('http://www.google.fr','te','width=200,height=200,left=250, top=200');return false;" value="http://www.google.fr">Italie</option> 
    
    <option onclick="window.open('http://www.google.fr','te','width=200,height=200,left=250, top=200');return false;" value="http://www.google.fr">Allemagne</option> </select> </form>
    Merci mille fois pour votre aide!

    Commentaire


    • #3
      J'ai trouvé!

      J'ai utilisé l'iframe à la place, ce qui donne (pour ceux à qui ça intéresse):

      Code HTML:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Document sans nom</title>
      <SCRIPT>
      function Lien(obj) 
      { 
          i = obj.selectedIndex; 
          if (i == 0)
              return false;
          
          url = obj.options[i].value;
          document.getElementById('adresse').src = url; 
      }
      </SCRIPT>
      </head>
      
      <body>
      
      <form name="Choix">
         <select size="1" name="Liste" onChange="Lien(this)">
            <option selected>Pays</option>
            <option value="index2.php?option=com_content&view=article&id=71&Itemid=68&lang=fr">France</option>
            <option value="index2.php?option=com_content&view=article&id=72&Itemid=68&lang=fr">Italie</option>
            <option value="index2.php?option=com_content&view=article&id=73&Itemid=68&lang=fr">Allemagne</option>   
           
         </select>
      </form>
      
      <iframe id="adresse" scrolling="no" style="border:none; margin-top:75px; margin-left:-50px; height:260px"></iframe>
      
      </body>
      </html>
      Bonne journée

      Commentaire


      • #4
        Select option et href ???

        Bonjour Bizerte77,

        Je vois que ton message me concerne un peu mais moi je suis très débutante JOOmLA !!!!
        Je veux un select option encore plus simple que toi et çà ne marche pas, voici mon code :
        <select id="bivalves" name="bivalves"><option>....Téléchargement .....</option>
        <option value="images/formulaires/BIVALVE-SB-09.pdf">Littoral Cotes d'Armor</option>
        <option value="images/formulaires/BIVALVE-SM-09.pdf">Littoral d'Ille et Vilaine</option>
        </select>


        J'ai essayé avec <a href="lien vers fichiers"> dans chaque option, JOOMLA saute cette partie du code dès que j'enregistre !!! Je voudrais mettre dans le dur et pour chaque option mon lien vers le fichier pour que mon fichier s'ouvre quand je le sélectionne dans ma liste déroulante. J'ai essayé avec onClick aussi mais il me faudrait une fonction javascript... J'ai essayé aussi onChange dans mon select mais JOOMLA me saute encore cette partie du code. AU SECOURS je suis perdue !!!
        Est-ce que qulqu'un a un code tout simple à me transmettre ??? SVP MERCI !!!
        Dernière édition par deseint à 21/12/2009, 16h08
        Ya que les idiots qui ne posent pas de question...

        Commentaire


        • #5
          Bonjour,

          Quand tu dis "JOOMLA saute cette partie du code dès que j'enregistre"

          Tu veux dire que le code s'efface/disparait une fois que tu enregistre?

          Si c'est ça, voici ce qu'il faut faire:

          Va dans la configuration générale de joomla (site >> configurations générales)

          A la ligne Éditeur WYSIWYG par défaut : Editor -No editor (tu choisis donc de ne pas afficher l'éditeur), ensuite tu sauve les modifications.

          Ensuite tu retourne dans ton article, là où tu écris ton code... Tu l'écris tu sauvegarde, ensuite test voir sur ton site si c'est ok.

          Si c'est bon, retourne dans la configuration générale et dans Éditeur WYSIWYG par défaut tu remet l'éditeur et tu sauvegarde...

          Dis moi si c'est bon?

          Bonne soirée

          Commentaire


          • #6
            Merci pour ton secours bizerte77,

            Grâce à ce paramètre Editor - No editor, mon code ne s'efface plus après enregistrement.
            Mais ma liste déroulante ne fonctionne toujours pas.
            C'est sûrement un pb dans le code de la fonction Javascript.

            <script type="text/javascript">// <![CDATA[
            function MM_jumpMenu(targ,selObj,restore){ //v3.0
            eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
            if (restore) selObj.selectedIndex=0;
            }
            // ]]></script>

            Appel de la fonction dans l'évènement onChange du SELECT OPTION:
            <form> <select name="bivalves" onChange="MM_jumpMenu('window.open()',this,1)"> <option...

            Est-ce que tu aurais une petite idée de ce qui ne va pas ?
            Sachant que je veux juste ouvrir un fichier pdf (dans une nouvelle page) à partir d'un click dans la liste déroulante...
            Ya que les idiots qui ne posent pas de question...

            Commentaire


            • #7
              Bonsoir,

              Désolé je ne connais pas assez le javascipt pour détecter une erreur...

              J'espère que quelqu'un d'autre pourra t'aider...

              Bonne soirée

              Commentaire


              • #8
                Je viens de faire de nouveaux tests et en fait, ce n'est pas un pb de code !!
                J'ai réduit ma fonction à sa plus simple instruction :
                function ouvrirFichier(){
                alert("aucun fichier !");
                }
                Et ben même çà, çà ne marche pas !!!
                C'est donc au niveau de l'appel de la fonction que çà va pas...

                Appel de la fonction:
                <form name="frmtest">
                <select name="monselect" id="monselect" onChange="ouvrirFichier();">
                <option value="0" selected>selectionner un fichier</option>...

                l'évènement onChange n'est pas reconnu par JOOMLA. Quelqu'un peut-il m'aider ???
                Ya que les idiots qui ne posent pas de question...

                Commentaire


                • #9
                  Bonjour,

                  Essaie de tester avec mon code (voir plus haut) pour voir si ça fonctionne...

                  Si ça fonctionne alors ça vient peut-être/surement de ton code javascript

                  Si ça ne fonctionne pas ça vient peut-être de joomla ou d'un composant/plugin

                  Au moins tu aura peut-être une piste pour chercher...

                  Et quelqu'un pourra surement t'aider...

                  Bon courage

                  Commentaire


                  • #10
                    Merci bizerte d'avoir fait du monologue jusqu'à trouver

                    Je souhaite moi aussi utiliser du javascript dans mon site, mais je ne sais pas où mettre le code javascript. Faut il le mettre dans index.php principale ? Si oui, pour mettre je l'appelle d'où ?

                    Tu mets où le code que tu as montré et tu l'appelles où ?

                    Merci

                    Commentaire


                    • #11
                      Bonjour,

                      Je mets tout mon code dans le même article et j'affiche l'article là où je veux...

                      Je ne le mets pas dans l'index.php

                      Bonne journée

                      Commentaire


                      • #12
                        Bonne année à tous !!
                        C pas le tout mais les festivités ont une fin (c comme toutes les bonnes choses)...

                        G finalement trouvé une soluce pour cette histoire de liste déroulante. C bien Joomla qui supporte mal le javascript et qui fait "sauter" le code qu'il ne comprend pas. Il fallait simplement que j'entoure mon code html Select option par les encolades {source} ce qui donne:
                        {source}
                        <select name="bivalves" id="bivalves" onChange="MM_jumpMenu('window.open()',this,1)">
                        <option>......Téléchargement Formulaires.....</option>
                        <option value ="formulaires/BIVALVES-R D-SB-09.pdf">St Brieuc</option>
                        <option value ="formulaires/BIVALVES-R D-SM-09.pdf">St Malo</option>
                        <option value ="formulaires/BIVALVES-R D-NF-09.pdf">Nord Iroise </option>
                        <option value ="formulaires/BIVALVES-R D-AD-09.pdf">Sud Iroise</option>
                        <option value ="formulaires/BIVALVES-R D-DZ-09.pdf">Douarnenez</option>
                        <option value ="formulaires/BIVALVES-R D-CC-09.pdf">Concarneau</option>
                        <option value ="formulaires/BIVALVES-R D-LO-09.pdf">Lorient</option>
                        </select>
                        {/source}

                        Mon code javascript était bon et toujours intégré en début de page. Mais cette fonction doit aussi être encapsulée par : {source}
                        <script type="text/javascript">
                        function MM_jumpMenu(targ,selObj,restore){
                        eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
                        if (restore) selObj.selectedIndex=0;
                        }
                        </script>
                        {/source}

                        Voilà j'espère que çà pourra reservir à d'autres...
                        Ya que les idiots qui ne posent pas de question...

                        Commentaire


                        • #13
                          Bonjour,

                          Cool tu as enfin trouvé!

                          Bonne année

                          Commentaire

                          Annonce

                          Réduire
                          1 sur 2 < >

                          C'est [Réglé] et on n'en parle plus ?

                          A quoi ça sert ?
                          La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                          Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                          Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                          Comment ajouter la mention [Réglé] à votre discussion ?
                          1 - Aller sur votre discussion et éditer votre premier message :


                          2 - Cliquer sur la liste déroulante Préfixe.

                          3 - Choisir le préfixe [Réglé].


                          4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                          2 sur 2 < >

                          Assistance au forum - Outil de publication d'infos de votre site

                          Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                          Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                          Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                          UTILISER À VOS PROPRES RISQUES :
                          L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                          Problèmes connus :
                          FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                          Installation :

                          1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                          Archive zip : https://github.com/AFUJ/FPA/zipball/master

                          2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                          3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                          4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                          5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                          6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                          et remplacer www. votresite .com par votre nom de domaine


                          Exemples:
                          Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/
                          Pour executer le script: http://www..com/fpa-fr.php

                          Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/cms/
                          Pour executer le script: http://www..com/cms/fpa-fr.php

                          En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                          Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                          Voir plus
                          Voir moins
                          Travaille ...
                          X