1. #1
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    85
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 85
    Points : 47
    Points
    47

    Par défaut InnerHtml OffsetWidth Width = 0

    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
    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

  2. #2
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : septembre 2008
    Messages : 226
    Points : 327
    Points
    327

    Par défaut

    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 ?
    Vous cherchez à apprendre les bases en langage « C », « Go », « Rust », « PHP 7 », « Java 9 » ou « Python 3 » ? N'hésitez pas à me contacter par MP.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    85
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 85
    Points : 47
    Points
    47

    Par défaut

    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;

  4. #4
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 383
    Points : 770
    Points
    770

    Par défaut

    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

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    85
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 85
    Points : 47
    Points
    47

    Par défaut

    Bonsoir, melka one

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

    Merci

  6. #6
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 383
    Points : 770
    Points
    770

    Par défaut

    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é
     
    }

  7. #7
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    902
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 902
    Points : 1 000
    Points
    1 000

    Par défaut

    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...

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 808
    Points : 25 264
    Points
    25 264

    Par défaut

    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.

  9. #9
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    85
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 85
    Points : 47
    Points
    47

    Par défaut

    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.

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 808
    Points : 25 264
    Points
    25 264

    Par défaut

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

  11. #11
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    85
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 85
    Points : 47
    Points
    47

    Par défaut

    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é...

  12. #12
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 703
    Points : 21 041
    Points
    21 041
    Billets dans le blog
    39

    Par défaut

    Citation Envoyé par inspecteur rick Voir le message
    [...] 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

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  13. #13
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    85
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 85
    Points : 47
    Points
    47

    Par défaut

    @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.

  14. #14
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 703
    Points : 21 041
    Points
    21 041
    Billets dans le blog
    39

    Par défaut

    • 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).

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 808
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 808
    Points : 25 264
    Points
    25 264

    Par défaut

    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>

Discussions similaires

  1. Différence style.width / propriété DOM offsetWidth
    Par loukoum82 dans le forum JavaScript
    Réponses: 6
    Dernier message: 22/09/2009, 14h13
  2. [W3C] [Debutant] valid. code xhtml et attributs width et align
    Par Marc_3 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 08/04/2005, 07h36
  3. div et innerHTML : tout sur une ligne?
    Par LineLe dans le forum JavaScript
    Réponses: 6
    Dernier message: 04/04/2005, 11h15
  4. Problème innerHTML sur div !!!
    Par aburner dans le forum JavaScript
    Réponses: 5
    Dernier message: 27/01/2005, 09h23
  5. getelementbyid innerhtml sur Opera?
    Par cynthia dans le forum JavaScript
    Réponses: 2
    Dernier message: 31/12/2004, 10h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo