Petit coup de main Javascript (à priori simple)

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Zecat, 24 Avril 2011.

  1. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    Voila j'utilise ce ceci (déjà fourni par un wrinaute ici ... je ne sais plus qui, qu'il me pardonne) .

    Un script :

    Code:
    <script> 
    var zones = ["zonea","zoneb","zonec"];
    function deployer(identifier)
    {
          for ( var i in zones)
          {
                if (zones[i] != identifier)
                {
                       document.getElementById(zones[i]).style.display="none";
                }
                else
                {
                       document.getElementById(zones[i]).style.display="block";
                }
          }
    }
    </script>
    et ensuite dans mon code :

    Code:
    <a onclick="deployer('zonea')" style="cursor:pointer">A</a><br>
    <div id="zonea" style="display:none">
    		aaaaaaaaaaa<br>
    		aaaaaaaaaaaa<br>
    </div>
         					     					
     <a onclick="deployer('zoneb')" style="cursor:pointer">B</a><br>
     <div id="zoneb" style="display:none">
    		bbbbbb<br>
    		bbbbbbbbbbb<br>
    </div>
    
     <a onclick="deployer('zonec')" style="cursor:pointer">C</a><br>
     <div id="zonec" style="display:none">
    		cccccccccc<br>
    		ccccccccccc<br>
    </div>
    
    Ca marche impec. Le clic sur chaque lettre deploie la zone correspondante en fermant l'ancienne zone déployée.

    Seul probleme, j'y connais rien en JS et me manque un script qui ferait un tout deployer/tout refermer en alternance ... (appliqué sur var zones). Si un JS codeur traine ... Merci d'avance
     
  2. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    arf en relisant le code , meme sans connaitre js, je me dit que :

    Code:
    <script> 
    var zones = ["zonea","zoneb","zonec"];
    function toutdeployer(identifier)
    {
          for ( var i in zones)
          {
                      document.getElementById(zones[i]).style.display="block";
          }
    }
    </script>
    et

    Code:
    <script> 
    var zones = ["zonea","zoneb","zonec"];
    function toutcontracter(identifier)
    {
          for ( var i in zones)
          {
                       document.getElementById(zones[i]).style.display="none";
          }
    }
    </script>
    ca doit le faire ... ? Un JS codeur peut confirmer ? Arf oui sauf que je veux qu'une fonction qui deployetout/contractetout en alternance ... :roll:
     
  3. mrPringle
    mrPringle WRInaute occasionnel
    Inscrit:
    11 Mars 2006
    Messages:
    472
    J'aime reçus:
    0
    Ca devrait le faire :

    Code:
    <script>
    var zones = ["zonea","zoneb","zonec"];
    function deployer()
    {
          var visibility = (document.getElementById("zonea").style.display !== "block") ? "block" : "none";
          for ( var i in zones)  {
                document.getElementById(zones[i]).style.display = visibility;
          }
    }
    </script>
     
  4. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    heu je dois je suppose la renommer toutdeployertoutcontracter ? qu'elle se bouscule pas avec l'autre ... :?: Par contre je vois pas de none dans le script ? manque pas un truc ? Je uspect un des deux blocks :wink:
     
  5. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    Finalement c'ets enpalce et ca marche ... Merci mrPringle :wink:

    J'ai juste changé le nom de la fonction.
     
  6. mrPringle
    mrPringle WRInaute occasionnel
    Inscrit:
    11 Mars 2006
    Messages:
    472
    J'aime reçus:
    0
  7. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    Si j'osais abuser mrPringle ...

    Mon premier script permet d'avoir 3 zones et le clic sur une lettre deploie la zone correspondante et replie toutes les autres : tres bien ...

    Sauf que ca serait encore plus que "tres bien" si un nouveau clic sur la lettre refermait la zone ... faut rajouter quoi ou ? :wink:

    PS : Grrr va vraiment falloir que je me mette aussi au JS !
     
  8. mrPringle
    mrPringle WRInaute occasionnel
    Inscrit:
    11 Mars 2006
    Messages:
    472
    J'aime reçus:
    0
    Oui faut t'y mettre, JS c'est sympa une fois passées les premières interminables sessions de debuggage. :)
    Ca devrait faire ce que tu souhaites :

    Code:
    function deployer(identifier)
    {
          if (document.getElementById(identifier).style.display === 'block') {
                document.getElementById(identifier).style.display="none";
          }
          for ( var i in zones) {
                if (zones[i] !== identifier)  {
                       document.getElementById(zones[i]).style.display="none";
                }
          }
    }
    PS. Si tu ajoutes pas mal de JS sur ton site, tu devrais voir à utiliser une librairie comme jQuery.
     
  9. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
  10. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    Bon testé ... marche pas. le nouveau scipt ne fait plus rien de visible (ni deployer non contracté). j'ai remis l'ancien pour le moment
     
  11. mrPringle
    mrPringle WRInaute occasionnel
    Inscrit:
    11 Mars 2006
    Messages:
    472
    J'aime reçus:
    0
    C'est sur je viens de relire, je devais être fatigué... :)

    Code:
    function deployer(identifier)
    {
          var i, elem = document.getElementById(identifier);
          elem.style.display = (elem.style.display === 'block') ? 'none' : 'block';
          for (i in zones) {
                if (zones[i] !== identifier)  {
                       document.getElementById(zones[i]).style.display = 'none';
                }
          }
    }
    En gros la première ligne (après les déclarations de variables) affiche le bloc demandé ou le masque si c'est déjà le cas et la boucle masque tous les autres ensuite.
     
  12. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    ouai oaui ... tu voulais voir si je suivais :mrgreen: :mrgreen: Ben t'as vu, je suis pas :mrgreen: Bon je va retester
     
  13. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    2peccable ! C'est en place. Milles merci.
     
  14. mrPringle
    mrPringle WRInaute occasionnel
    Inscrit:
    11 Mars 2006
    Messages:
    472
    J'aime reçus:
    0
    Oui c'était pour voir si tu suivais. :)
    Cool si ça marche.
     
  15. mitchum
    mitchum WRInaute discret
    Inscrit:
    18 Février 2004
    Messages:
    248
    J'aime reçus:
    0
    zecat, tu devrais te mettre a Jquery, un petit "toggle" et c 'est réglé :)
     
  16. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    Ou à Mootools, que je préfère à jQuery (mon point de vu) ;)
     
  17. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
  18. mitchum
    mitchum WRInaute discret
    Inscrit:
    18 Février 2004
    Messages:
    248
    J'aime reçus:
    0
    toute façon ils annoncent de la pluie pour 6 mois par chez toi, tu vas avoir le temps de lire la doc jquery :p
     
  19. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    :mrgreen: :mrgreen:

    Déjà avoir 6 jours de pluie :roll: J'ai pas compté mais je suis pas sûr qu'on les ai eu l hiver dernier :wink:
     
Chargement...
Similar Threads - coup Javascript (à Forum Date
Site avec beaucoup (trop) de javascript Débuter en référencement 5 Novembre 2012
Comment avoir beaucoup de mots clés référencés sur Google ? Débuter en référencement 24 Juin 2022
WordPress A l'aide ! Mon site est spammé, mon domain rating prend un sacré coup Débuter en référencement 26 Avril 2022
Faut-il découper une (bonne) page trop longue ? Débuter en référencement 2 Juillet 2021
Beaucoup d'articles et seulement 12 visites/jour Problèmes de référencement spécifiques à vos sites 25 Juin 2021
Mise en ligne de beaucoup de produits e-commerce 17 Juin 2021
WordPress Ca vaut le coup de traduire mon site ? Référencement international (langues, pays) 28 Mai 2021
Beaucoup (trop ?) de tags ? Débuter en référencement 15 Février 2021
Où obtenir un coupon de réduction pour Google Ads ? AdWords 10 Février 2021
L'écran AOC C24G1 (dalle 24") vaut le coup ? Vos avis Le café de WebRankInfo 27 Janvier 2021
Comment bloquer à coup sûr l'indexation par les moteurs de recherche Crawl et indexation Google, sitemaps 7 Décembre 2020
Transformation de PDF SEO friendly (coup de baguette magique) Problèmes de référencement spécifiques à vos sites 17 Octobre 2020
Page d'accueil en erreur "Explorée, actuellement non indexée" d'un seul coup Crawl et indexation Google, sitemaps 30 Septembre 2020
Site qui a chuté d'un coup. Débuter en référencement 11 Août 2020
Problème de coupure en hebergement mutualisé Demandes d'avis et de conseils sur vos sites 30 Mai 2020
Réécriture d'articles, est-ce une bonne idée de couper ses articles? Rédaction web et référencement 25 Mai 2020
URL canonique - Coupler ou non avec une balise noindex ? Débuter en référencement 26 Avril 2020
Besoin d'un petit coup de main en référencement Débuter en référencement 23 Avril 2020
Blog qui perd beaucoup de place sur google Problèmes de référencement spécifiques à vos sites 25 Janvier 2020
Tester les pubs ADS - Ou trouver des coupons ? e-commerce 12 Novembre 2019