Discussion :

[inspecteur rick]

Bonjour

Je coince sur l'utilisation cons�cutive de offsetwidth apr�s un innerhtml

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
element.innerHTML = codehtml;

Le code html est tr�s simple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<img alt="" src="../Images/image.png"/>

Mon "element" est un div qui doit prendre la taille de son contenu et qui joue le r�le d'une popup qui appara�t quand je click sur un lien.
J'ai mis width et height en auto dans le css.

Le probl�me vient de commande

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

element.offsetWidth

Qui me renvoie 0 au lieu de la width de mon image ins�r�e...

Du coup � la premi�re apparition de ma popup, j'ai mon div qui est tout petit et mon image qui d�passe. Au 2e click, c'est nikel, l'image est enti�rement dans le div qui a pris les dimensions de mon image

Une id�e ? Merci d'avance

[Kennel s�bastien]

Bonjour inspecteur rick,

Tu fais bien les choses dans le bon ordre tu as ins�r�, puis tu as demand� la largeur du div ?

Que fait � offsetWidth � sur l'image ?

[inspecteur rick]

Bonjour, Kennel s�bastien

Merci de t'int�resser � mon probl�me

Je m'en sers pour positionner mon popup sur l'�cran. Pour �tre en dessus de l��l�ment que j'ai click�.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
var popupheight = element.offsetHeight - 2 * 11;
var additionalpadding = lineheight / 2 - 11;
var popuptop = pos.y - popupheight - 2 * 11 - 2 * additionalpadding - popupholderpos.y;

[melka one]

jour

c'est peut etre du au fait qu'au moment de l'insertion de l'image sa taille ne soit pas connu car pas encore precharger essai avec getBoundingClientRect() et si c'est pareil recupere la taille de l'image et donne au div la taille de l'image mais avant tout il faut precharger l'image

[inspecteur rick]

Bonsoir, melka one

J'ai compris la th�orie
Mais par "pr�charger" l'image, tu veux dire ? Comment on s'y prend ?

Merci

[melka one]

il faut utiliser new image et l'evenement onload

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
var une_image=new Image
 
une_image.src = 'chemin.jpg';
 
une_image.onload=function(){
 
// le code a executé
 
}

[Beginner.]

Je crois que c'est probl�me de "d�bordement", j'ai d�j� eu �a, c'est gal�re je trouve...

La taille du conteneur qui peut �tre plus petite que celle de son contenu c'est un truc que je ne trouve pas logique, je trouve �trange qu'il faille g�rer cela...

[NoSmoking]

Bonjour,

Mais par "pr�charger" l'image, tu veux dire ? Comment on s'y prend ?

cela peut �tre simplement le fait que la � popup � appartient au document et que l'on affiche/masque celle-ci tout simplement.
En utilisant le positionnement ad�quat tu n'aurais rien de plus � g�rer.

[inspecteur rick]

Merci pour vos r�ponses. Je ne peux pas tester pour l'instant...

@melka one : Merci pour la r�ponse sur le pr� chargement de l'image, je vais essayer.

@NoSmoking : je n'ai pas compris ta r�ponse

En utilisant le positionnement ad�quat tu n'aurais rien de plus � g�rer.

[NoSmoking]

Il suffit de mettre ta popup en position:absolute ET l'�l�ment r�f�rent, celui que tu survoles, en position:relative.

[inspecteur rick]

D�sol� du d�lais de r�ponse, j'�tais en d�placement.

@NoSmoking : J'ai essay�, la popup apparait � l'endroit o� j'ai mis mon div de la popup mais elle ne se positionne pas en dessus du mot survol�...

[danielhagnoul]

[...] Mon "element" est un div qui doit prendre la taille de son contenu et qui joue le r�le d'une popup qui appara�t quand je click sur un lien. J'ai mis width et height en auto dans le css. Le probl�me vient de commande element.offsetWidth Qui me renvoie 0 au lieu de la width de mon image ins�r�e [...]

Il faut utiliser getComputedStyle, voir : https://developer.mozilla.org/fr/doc...tComputedStyle

[inspecteur rick]

@danielhagnoul : Je viens de tester avec la fonction "getComputedStyle"
M�me probl�me, au 1er click j'ai 0px en width de ma popup. L'image apparait dans la popup, je re-click et la j'ai la bonne width sur ma popup.

[danielhagnoul]

• un div qui doit prendre la taille de son contenu et qui joue le r�le d'une popup qui appara�t quand je click sur un lien
• au 1er click j'ai 0px en width de ma popup. L'image appara�t dans la popup, je reclick et la j'ai la bonne width sur ma popup.

Logique si c'est l'image (le contenu) qui fixe la taille de la division (le contenant). Il faut afficher la division (popup) apr�s le chargement de l'image (load event, message n� 6 de @melka one).

[NoSmoking]

Un petit exemple g�r� par le CSS

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Image au survol</title>
<meta name="Author" content="NoSmoking">
<style>
span.infobulle {
  position: relative;
  background: #EFEFEF;
  cursor: pointer;
  displa: inline-block;
}
span.infobulle span {
  display: none;
  position: absolute;
}
span.infobulle img {
  display: block;
}
span.infobulle:hover span {
  display: inline-block;
  top: 0;
  left: 50%;
  border: 1px solid #880;
  transform: translate(-50%, -100%);
}
</style>
</head>
<body>
<h1>Image au survol</h1>
<p>Ceci est un texte qui comporte une <span class="infobulle">image<span><img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt=""></span></span> apparaissant au survol.</p>
<p>Un autre texte comportant également une <span class="infobulle">image<span><img src="https://www.developpez.net/forums/avatars/285162-danielhagnoul.gif" alt=""></span></span> apparaissant au survol.</p>
</body>
</html>