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 actif Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    septembre 2008
    Messages
    200
    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 : 200
    Points : 288
    Points
    288

    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 », « PHP » ou « Python » ? 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
    381
    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 : 381
    Points : 765
    Points
    765

    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
    381
    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 : 381
    Points : 765
    Points
    765

    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
    818
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 818
    Points : 921
    Points
    921

    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 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 637
    Points : 24 771
    Points
    24 771

    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 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 637
    Points : 24 771
    Points
    24 771

    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 643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

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

    Informations forums :
    Inscription : février 2009
    Messages : 5 643
    Points : 20 917
    Points
    20 917
    Billets dans le blog
    38

    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

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  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 643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

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

    Informations forums :
    Inscription : février 2009
    Messages : 5 643
    Points : 20 917
    Points
    20 917
    Billets dans le blog
    38

    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

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  15. #15
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 637
    Points : 24 771
    Points
    24 771

    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