Discussion :

[akito]

Bonjour!

J'ai un div, l'un de 200px servant de "fenetre", l'autre à l'interieur de ce div de 500px servant de bandeau defilant.

Le deuxieme div fait defiler des images de gauche a droite et cela fonctionne.

Mon probleme est le suivant.

Si j'ajoute une image supplémentaire dans mon div, je suis obligé de modifier à la main le width du deuxieme div. Or, je voudrais que des personnes ne touchant pas au code puisse rajouter des images.

Il faudrait donc que je puisse en javascript modifier le width du div si on detecte que tout n'est pas afficher, donc qu'il y a un retour chariot.

Je ne peux pas mettre le deuxime div en width:auto puisque le premier div est defini a 200px pour servir de fenetre...

Connaissez-vous une solution?

Merci par avance!

[E.Bzz]

Bonjour,
même en tentant d'adapter la largeur, tu ne feras que reporter le problème : il faudra bien bloquer la largeur à un moment ou un autre

Un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="overflow-x:scroll;"

ne suffirait pas ?

A+

[akito]

Salut et merci pour ta réponse.

Je ne peux pas bloqué la largeur puisqu'elle va changer a chaque fois qu'un utilisateur va rajouter une image.

Il n'y a pas moyen de dire au div d'être le plus grand possible (même si il est dans un div de 200px)?

Pour le scroll, ce n'est pas bon car c'est pour faire une bannière qui défile et de toute façon ça ne résout pas le problème de la largeur.
Si je la fixe a 500px et qu'un utilisateur rajoute une image, cette image va se trouver à la ligne. Si je mets une largeur trop grande, mon animation de bannière ne va pas se faire correctement puisqu'il y aura un moment où rien ne va défiler.

Merci pour ton aide.

[E.Bzz]

Pour le scroll, ce n'est pas bon car c'est pour faire une bannière qui défile et de toute façon ça ne résout pas le problème de la largeur.

Ben si : ton div fait la largeur nécessaire (sans retour à la ligne), mais tu n'en affiches qu'une partie pour conserver ta mise en page ...
Ce n'est que pour la conception de la bannière, et donc pas gênant, si j'ai bien compris ?

A+

[SpaceFrog]

j'ai du coller dans les contributions un truc pour recupérer la longueur en pixels d'un texte ...

[akito]

E.Bzz :
En fait, mon div fenetre fait 200 px.
Mon deuxieme div qui defile à l'interieur fait 500px. Cela fonctionne.
Mais si on ajoute d'autre image, 500px c'est trop petit, il faut donc modifier la largeur du div qui est à l'interieur.

SpaceFrog :
Ton code permet également de connaitre la taille de toutes les images du div?

En tout cas merci d'essayé de m'aider

[E.Bzz]

En fait, mon div fenetre fait 200 px.
Mon deuxieme div qui defile à l'interieur fait 500px. Cela fonctionne.
Mais si on ajoute d'autre image, 500px c'est trop petit, il faut donc modifier la largeur du div qui est à l'interieur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="fenetre" style="width:200px;overflow-x:scroll;">
	<div id="banniere" style="width:2000px;">
		<span style="width:500px;background-color:blue;color:white;">premiere image</span>images suivantes .........................................................................
	</div>
</div>

Quel est le problème ?

A noter : cette "largeur suffisante" (ici 2000px) peut être augmenter à chaque ajout d'image (dans la fonction dédiée) ....

A+

[akito]

En effet, une grande largeur pourrait résoudre le probleme si je ne faisait pas tourner en boucle la banniere.

Mais quand la bannière arrive a la fin (left-width = 0), je décale mon div a la position initial pour le passer en boucle.

Je suis donc obligé de mettre un width à peut prés égale à la taille de mes images sinon j'ai un gros vide pendant plusieurs seconde où rien ne défile.

D'où mon div width à 500px que je suis obligé d'augmenter à chaque ajout d'image.
Mais je cherche donc un moyen d'automatiser ça car je ne veux pas que mes utilisateurs touchent aux width n'ayant pas de connaissant html.

Merci pour ton aide

[SpaceFrog]

en modifiant légèrement le code oui tout à fait ...

il suffirait de partir sur le code de form dynamique pour créer un element DOM div par exemple, d'y coller un clone de tout ce que tu veux y mettre images et texte ... et de recupérer son offsetWidth puis de le detruire

[akito]

Merci spacefrog pour ton aide.

Ca m'interesse pas mal ton info mais peux tu me donner une piste plus précise.

Il faut que je crée un div dynamiquement autour de mon div conteneur?
Si c'est ça, ce div aura la meme largeur que le conteneur.

Merci pour ton aide

[SpaceFrog]

non créer un div avec document.createElement('div')

et mettre les elements dedans, puis recupérer le offsetWidth

regarde dans les contributions

[akito]

D'accord je comprends le principe.

Mais étant donné que je ne connais pas à l'avance les éléments qu'il va y avoir dans le div, ça ne va pas poser problème?

je vais pouvoir dire de prendre tous les éléments du div contenant pour les mettre dans le div dynamique?

Normalement il faut les atteindre pas un getelementby non?

Merci beaucoup pour ton aide.

[SpaceFrog]

oui
ou alors tu fais direct un cloneNode sur tous les childNodes ...