Liste déroulante en guise de sommaire

Liste déroulante en guise de sommaire - Javascript/Node.js - Programmation

Marsh Posté le 21-06-2024 à 16:16:27    

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
Reply

Marsh Posté le 21-06-2024 à 16:16:27   

Reply

Marsh Posté le 21-06-2024 à 16:39:24    

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
Reply

Marsh Posté le 21-06-2024 à 19:56:11    

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
Reply

Marsh Posté le 22-06-2024 à 08:16:23    

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
Reply

Marsh Posté le 23-06-2024 à 18:00:40    

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
Reply

Marsh Posté le 23-06-2024 à 18:53:19    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed