Faire avancer une progressbar par appui sur bouton radio
Fermé
melomen974
Messages postés
1
Date d'inscription
mercredi 6 avril 2022
Statut
Membre
Dernière intervention
6 avril 2022
-
6 avril 2022 à 10:47
DoctorHow - 11 avril 2022 à 22:08
DoctorHow - 11 avril 2022 à 22:08
A voir également:
- Faire avancer une progressbar par appui sur bouton radio
- Radio française - Télécharger - Médias et Actualité
- Telecharger radio - Télécharger - Audio & Musique
- Réinitialiser chromecast sans bouton - Guide
- Comment amplifier une antenne radio fm - Forum Audio
- Pour confirmer la création du mot de passe, appuyez sur le bouton qui s'affiche à l'écran de votre livebox. - Guide
2 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
Modifié le 7 avril 2022 à 12:19
Modifié le 7 avril 2022 à 12:19
Bonjour,
Une solution en js serait d'ajouter un écouteur (via la fonction addEventListener) sur l'événement click des inputs radio. Dans cet écouteur (l'écouteur est donc une fonction qui sera déclenchée lorsque l'utilisateur clique sur un input radio), tu pourras récupérer la valeur de l'input cliqué (1, 2, 3, etc.) puis modifier le style ou la classe css de la progress bar en fonction de cette valeur.
Est-ce que tu arrives déjà à modifier ton css pour afficher la barre avec une progression de 10 ou 20% ? Un petit exemple ?
Pour une solution plus détaillée, il faudrait plutôt nous partager le code source html de ton formulaire plutôt que le shortcode wp.
Une solution en js serait d'ajouter un écouteur (via la fonction addEventListener) sur l'événement click des inputs radio. Dans cet écouteur (l'écouteur est donc une fonction qui sera déclenchée lorsque l'utilisateur clique sur un input radio), tu pourras récupérer la valeur de l'input cliqué (1, 2, 3, etc.) puis modifier le style ou la classe css de la progress bar en fonction de cette valeur.
Est-ce que tu arrives déjà à modifier ton css pour afficher la barre avec une progression de 10 ou 20% ? Un petit exemple ?
Pour une solution plus détaillée, il faudrait plutôt nous partager le code source html de ton formulaire plutôt que le shortcode wp.
Salut,
oui voilà il faut utiliser la programmation événementielle pour déterminer la taille d'un élément lors du survol en lançant une fonction qui va changer l'apparence d'un élément et l'afficher.
Si 100% = 1000px alors on récupéré la valeur (value)de l'input(case à cocher) survolée de 0 à 10 et on multiplie par 10 pour obtenir la taille horizontale de la barre qui n'est pas une barre de progrès ou progress bar mais seulement une représentation visuelle de 1 à 10.
Un progress bar c'est pour indiquer l'avancement de quelque chose, en général dans le temps comme le chargement dans la age d'une ressource.
Si vous ne savez pas comment commencer aller voir par là:
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events
Pour la modification on peut passer par modifier le CSS avec JavaScript c'est même le mieux.
Par ex. vous définissez la valeur "width" de votre barre de score lors du survol ou alors vous faites une classe pour chacune des 10 tailles de la barre de notation et changez celle ci en fonction de la valeur de l'élément survolé.
Ce n'est pas clair si vous le voulez au survol ou au clic pour valider.
Pour moi il serait plus logique de l'afficher uniquement au clic donc lorsqu'une valeur est choisie.
Mais si vous la mettez au survol il serait logique de l'afficher une fois validée aussi.
oui voilà il faut utiliser la programmation événementielle pour déterminer la taille d'un élément lors du survol en lançant une fonction qui va changer l'apparence d'un élément et l'afficher.
Si 100% = 1000px alors on récupéré la valeur (value)de l'input(case à cocher) survolée de 0 à 10 et on multiplie par 10 pour obtenir la taille horizontale de la barre qui n'est pas une barre de progrès ou progress bar mais seulement une représentation visuelle de 1 à 10.
Un progress bar c'est pour indiquer l'avancement de quelque chose, en général dans le temps comme le chargement dans la age d'une ressource.
Si vous ne savez pas comment commencer aller voir par là:
https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events
Pour la modification on peut passer par modifier le CSS avec JavaScript c'est même le mieux.
Par ex. vous définissez la valeur "width" de votre barre de score lors du survol ou alors vous faites une classe pour chacune des 10 tailles de la barre de notation et changez celle ci en fonction de la valeur de l'élément survolé.
Ce n'est pas clair si vous le voulez au survol ou au clic pour valider.
Pour moi il serait plus logique de l'afficher uniquement au clic donc lorsqu'une valeur est choisie.
Mais si vous la mettez au survol il serait logique de l'afficher une fois validée aussi.
