11521 sujets

JavaScript, DOM et API Web HTML5

Progress et titre variable

Bonjour

Je suis face à un problème de mathématique basique (?!) dans lequel j'aimerai que mon titre s'étende jusqu'en bout de ligne en fonction du scroll du document. J'ai réussi à appliquer cela à une progress bar, mais je n'arrive pas à l'appliquer sur mon titre.

J'ai créer un simple Jsfiddle pour vous montrer mon problème :
https://jsfiddle.net/uq5tLns0/
Il faut que : "The" reste à gauche. "Master's" se cale au milieu et "Clock" se cale en bout de ligne.

Selon moi il faut tenir compte de la largeur du document + de la largeur du mot que j'aimerai étendre en bout de ligne, mais je n'arrive pas à l'appliquer à mon script.

Avez-vous des pistes / recommandations ? Je vous serais éternellement reconnaissant, étant dessus depuis déjà pas mal de temps...

Merci d'avance !
Olivier
Modifié par OlivierJo (16 Feb 2023 - 18:30)
Modérateur
Salut,

tiens, tiens.... un <h1> accepte des <div> en tant qu'enfant ? Smiley hum

jsfiddle, c'est pas ma tasse de thé.... Quand je lis ton css, ça me rappelle ma syntaxe il y a quelques années (un sélecteur par ligne).

Sinon, au démarrage de ta page, tu calcules la largeur de chaque élément dans ton <h1>.
Ton h1, tu lui donnes un display flex (ce que tu as fait) et sa largeur est égale à l'addition de la largeur de tes éléments. Comme règle css complémentaire à ton <h1>, tu ajoutes un justify-content: space between. Ensuite, au fur et à mesure du scroll, tu étends la largeur de ton <h1>
Modifié par niuxe (16 Feb 2023 - 20:42)
Prévenir un modérateur
Répondre au sujet
Aller à