Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
914 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Liste déroulante en guise de sommaire

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Liste déroulante en guise de sommaire

n°2473052
Ze_Noob
Posté le 21-06-2024 à 16:16:27  profilanswer
 

Bonjour,
 
je souhaite remplacer le sommaire sous forme de liste par un <select> qui permet de prendre moins de place lorsqu'il y a beaucoup d'items.
 
Ce que je veux faire c'est comme sur ce site : https://www.frandroid.com/comment-f [...] resolution
 
En gros l'internaute clique sur la liste déroulante qui sert de sommaire pour accéder aux diverses parties composant la page, il clique sur le titre correspondant au h2 de la partie en question et est directement redirigé sur cette partie, de la même manière qu'une encre, la différence ici c'est que ce n'est pas un lien mais une liste.
 
J'avais déjà fait des recherches et j'étais tombé sur un site qui expliquait qu'il était possible de bidouiller un truc en js pour que ça fonctionne, mais je n'arrive plus à mettre la main sur le lien du site en question.
 
Avez-vous une idée ?
 
Merci. :hello:  
 

Code :
  1. <html>
  3. <head>
  4. <title>test</title>
  5. <style>
  6. .cntr { text-align:center; }
  7. </style>
  8. </head>
  10. <body>
  11. <div class="cntr">
  12. <label for="sommaire">A quel endroit de la page souhaitez-vous être redirigé ?</label>
  13. <br/><br/>
  14. <select name="sommaire" id="sommaire">
  15. <option value="0">Sélectionnez...</option>
  16. <option value="#part1">Sous-titre 1</option>
  17. <option value="#part2">Sous-titre 2</option>
  18. <option value="#part3">Sous-titre 3</option>
  19. </select>
  20. </div>
  22. <h1>Titre</h1>
  23. <h2 id="part1">sous-titre 1</h2>
  24. <p>sous-titre de la partie 1</p>
  25. <h2 id="part2">sous-titre 2</h2>
  26. <p>sous-titre de la partie 2</p>
  27. <h2 id="part3">sous-titre 3</h2>
  28. <p>sous-titre de la partie 3</p>
  29. </body>
  31. </html>


Message édité par Ze_Noob le 21-06-2024 à 16:19:20
mood
Publicité
Posté le 21-06-2024 à 16:16:27  profilanswer
 

n°2473055
mechkurt
Posté le 21-06-2024 à 16:39:24  profilanswer
 

Mettre un écouteur onchange sur ton select et faire un scrollto ?
https://www.google.com/search?q=van [...] +to+anchor
 
Apparemment y'a même plus besoin de trouver le offsetTop de l'ancre en vanilla js on peut directement faire document.querySelector('#anchor').scrollIntoView(); IE8 et + autant dire tout le monde 99.9% des gens...
https://gomakethings.com/how-to-scr [...] anilla-js/


---------------
D3
n°2473059
Ze_Noob
Posté le 21-06-2024 à 19:56:11  profilanswer
 

Merci pour ta réponse mechkurt
 
En recherchant sur google je suis tombé sur ce lien :
 
https://stackoverflow.com/questions [...] select-box
 
Ca semble être dans l'esprit de ce que je veux, du coup j'ai essayé quelque chose (je précise que je ne maîtrise pas javascript) :
 

Code :
  1. <html>
  3. <head>
  4. <title>test</title>
  5. <style>
  6. .cntr { text-align:center; }
  7. </style>
  8. <script>
  9. function redirect(goto){
  10. var selectEl = document.getElementById('sommaire');
  11. selectEl.onchange = function(){
  12.     var goto = this.value;
  13.     redirect(goto);
  14. };
  15. </script>
  16. </head>
  18. <body>
  19. <div class="cntr">
  20. <h1>Titre</h1>
  21. <label for="sommaire">Sur quel site souhaitez-vous être redirigé ?</label>
  22. <br/><br/>
  23. <select name="sommaire" id="sommaire">
  24. <option value="">Sélectionnez...</option>
  25. <option value="https://google.fr">Google</option>
  26. <option value="https://duckduckgo.com/">DuckDuckGo</option>
  27. <option value="https://yahoo.fr">Yahoo</option>
  28. </select>
  29. </div>


 
Mais bien entendu ça ne fonctionne pas !
 
Il y a forcément quelque chose que j'ai loupé dans le code, et probablement un meilleur code qui permettrait d'avoir des URL relatives (directement les ancres) à la place des URL absolues.
 
Pouvez-vous m'aiguiller ?
 
Merci


Message édité par Ze_Noob le 21-06-2024 à 19:57:05
n°2473061
mechkurt
Posté le 22-06-2024 à 08:16:23  profilanswer
 

Effectivemnent pas besoin de préciser "je précise que je ne maîtrise pas javascript" quand on voit ce code :

Code :
  1. function redirect(goto){
  2. var selectEl = document.getElementById('sommaire');
  3. selectEl.onchange = function(){
  4.     var goto = this.value;
  5.     redirect(goto);
  6. };


Ton code n'est même pas valide, tu démarre une fonction ligne 9 que tu ne ferme jamais...
 
Pour que ça fonctionne il te manque aussi un window.location = goto ou bien un document.querySelector('#'+id_de_l_ancre).scrollIntoView();


Message édité par mechkurt le 22-06-2024 à 08:16:41

---------------
D3
n°2473112
Ze_Noob
Posté le 23-06-2024 à 18:00:40  profilanswer
 

merci pour ta réponse mechkurt, même si je me serais bien passé du début de ton message quelque peu sarcastique...
 
J'ai corrigé et maintenant ça fonctionne.
 

Code :
  1. <html>
  3. <head>
  4. <title>test</title>
  5. <style>
  6. .cntr { text-align:center; }
  7. </style>
  8. <script>
  9. function redirect(goto){
  10. var selectEl = document.getElementById('sommaire');
  11. selectEl.onchange = function(){
  12.     var goto = this.value;
  13.     redirect(goto); 
  14. };
  15. }
  16. </script>
  17. </head>
  19. <body>
  20. <div class="cntr">
  21. <h1>Titre</h1>
  22. <label for="sommaire">A quel endroit de la page souhaitez-vous être redirigé ?</label>
  23. <br/><br/>
  24. <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" name="sommaire" id="sommaire">
  25. <option  value="">Sélectionnez...</option>
  26. <option value="#part1">Sous-titre 1</option>
  27. <option value="#part2">Sous-titre 2</option>
  28. <option value="#part3">Sous-titre 3</option>
  29. </select>
  30. </div>
  31. <h2 id="part1">Sous-titre 1</h2>
  32. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  33. <h2 id="part2">Sous-titre 2</h2>
  34. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  35. <h2 id="part3">Sous-titre 3</h2>
  36. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  37. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  38. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  39. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  40. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet lacus at ipsum feugiat convallis id vitae diam. Aenean facilisis ultricies purus sed imperdiet. Sed tempor mattis tellus, ut varius augue eleifend quis. Praesent diam neque, egestas facilisis lorem id, egestas interdum purus. Aenean tincidunt tristique hendrerit. Aliquam erat volutpat. Curabitur egestas, est eget dictum tempor, urna sem posuere nibh, rutrum efficitur ante erat ut ipsum. Nullam sagittis diam in elementum fermentum. Maecenas eu ex a metus fermentum venenatis hendrerit ac leo. Curabitur mattis augue tempor, congue ante a, dignissim sapien. Nunc scelerisque maximus nunc at sagittis. Proin egestas risus in ante vehicula vehicula. Aenean eu lectus tristique, fringilla quam sed, dapibus risus.</p>
  41. </body>
  42. </html>


Message édité par Ze_Noob le 23-06-2024 à 18:34:39
n°2473114
mechkurt
Posté le 23-06-2024 à 18:53:19  profilanswer
 

Hfr c'est l'élite, un petit peu d'auto dérision ne fait de mal à personne... :o  

Spoiler :

Désolé de t'avoir froissé. :sweat:


Tout ce qui est dans la balise script est inutile et peut être supprimé (ligne 8 à 16 de ton code ci-dessus).
Ça pourrait être corrigé pour dissocié le Javascript de l'html et ne pas avoir de code "inline" dans la balise, mais c'est un problème de puriste...
Du moment que cela fonctionne : onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" cela résout ton problème.


---------------
D3

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Liste déroulante en guise de sommaire

 

Sujets relatifs
liste à ordonner, résultat : none[Postgresql]Trigger à partir d'une liste
En Java, vous pouvez convertir une liste en tableau.statistique liste avec elements faux
Comportement champ liste sélection multiple différent entre PHP5 et 8Comment tester une liste d'URLs en batch ou PS avec log ?
[RÉSOLU] Envoyer une liste de noms de fichiers vers un exécutableCréer une liste déroulante
Choisir une valeur par défaut sur une liste de choix 
Plus de sujets relatifs à : Liste déroulante en guise de sommaire

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.129 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR