IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Récupérer la width d'une table pour définir max-width sur éléments suivants


Sujet :

JavaScript

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut Récupérer la width d'une table pour définir max-width sur éléments suivants
    Bonjour,

    J'ai une table dont la largeur dépend du contenu.

    Je veux récupérer la width effective de la table et l'affecter comme valeur max-width à certains éléments plus bas dans la page.

    Chose infaisable en CSS, sauf trucs tordus.

    Je me dis qu'une minuscvule fonction javascript peut faire l'affaire mais à vrai dire je connais très mal javascript.

    Pouvez-vous m'orienter vers une bonne source ou peut-être me donner les deux lignes de code ?

    Merci d'avance.

  2. #2
    Membre confirmé
    Homme Profil pro
    Déveleoppeur Web/Mobile
    Inscrit en
    Avril 2013
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Déveleoppeur Web/Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 330
    Points : 545
    Points
    545
    Par défaut
    Bonjour,

    Pour récupérer une propriété css en JQuery par exemple, avec cette méthode

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var width = $(element).css("width")
    Puis pour ajouter un style à un élément c'est la même méthode :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(element).css("max-width", width)

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Merci beaucoup.

    Je profite du week-end allongé pour mes tests, je te tiens au courant.

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    J'ai ajouté dans le HEAD de ma page html :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script type="text/javascript">
    <!--
    var width = $(table.compcab).css("width")
    $(ul.bul).css("max-width", width)
    //-->
    </script>
    Tu devines que l'élément dont je veut le width est <tabla class="compcab"> pour l'appliquer à <ul class="bul">

    Ca ne donne rien du tout...

    Qu'en penses-tu ?

  5. #5
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 392
    Points : 2 044
    Points
    2 044
    Par défaut
    Bonjour,
    je suis débutant en JS, mais j'ai eu un besoin semblable :
    HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
    	<div id="DivCanvas">
    		<!-- <canvas id="canvas" width=”800” height=”600”></canvas> En fait canvas est créé en javascript dans Astro.js sinon PB proportions -->
    		<img src="./images/doudou.bmp" id="doudou"/>
    	</div>
     
    	<div id="AutreDivFlotant">
    		<p>Le Div s'élargie au fur et à messure qu'on ajoute du texte...</p>
    		<textarea id="textarea" name="Message"></textarea>
    	</div>
    </body>
    CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #DivCanvas {
    	width: 800px;
    	height: 800px;
    }
    #AutreDivFlotant {
    	position: fixed; top: 2px; right: 4px;
    	float: right;
    	width: auto;
    	height: 800px;
    	border: 1px solid blue;
    }
    canvas {
    	border: 1px solid black;
    	background-color: #FCFAE1;
    }

    JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var DivFloat = document.getElementById('AutreDivFlotant');
    var WidthDivFloat = document.getElementById('AutreDivFlotant').offsetWidth;
    alert ("WidthDivFloat="+ WidthDivFloat);
    DivFloat.setAttribute('width-max', WidthDivFloat);
    alert ("Taille du Div flottant="+ document.getElementById('AutreDivFlotant').offsetWidth );
    [EDIT 06:50] Et en largeur, le textarea ne va plus au delà de la longueur du texte

    On doit pouvoir faire la même chose sur le Width d'une table...
    Mais sous toutes réserves en attendant l'avis d'experts...

  6. #6
    Membre régulier
    Homme Profil pro
    Futur développeur, étudiant
    Inscrit en
    Juillet 2012
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Futur développeur, étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2012
    Messages : 67
    Points : 73
    Points
    73
    Par défaut
    Bonjour,

    Le code que t'a donné Rpass est du JQuery. Il faut donc importer la librairie si tu veux que ce code fonctionne.

    Ensuite, voici des morceaux de code :
    - Pour récupérer la width de ton objet :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var width = document.getElementByClass('compcab').style.width;
    Le getElementByClass n'est pas toujours bien vu, donc si c'est pour un exam, tu devrais ajouter un attribut id="compcab" à ton table, puis utilise getElementById('compcab') à la place de getElementByClass.

    -Pour définir le max-width d'un objet :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementByClass('bul').style.maxWidth = width;
    ou encore :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    var bul = document.getElementByClass('bul');
    bul.style.maxWidth = width;
    ce qui te permet d'éviter de réécrire le long document.get...style... si tu as besoins de faire d'autres ajouts de style sur ce même objet.
    Ici encore, il serait mieux de mettre un id à ton ul afin de pouvoir utiliser le getElementById. Mais bon, ça c'est toi qui voit.

    J'espère avoir pu t'aider

  7. #7
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Merci beaucoup de vos réponses.

    Je vais tester le code de paulolol.

  8. #8
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Je mets dans le HEAD :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script type="text/javascript">
    <!--
    var width = document.getElementByClass('compcab').style.width;
    document.getElementByClass('bul').style.maxWidth = width;
    //-->
    </script>
    Ne marche pas.
    J'ai testé avec des id au lieu des class, ne marche pas non plus.

    Je me demande si ce script est bien placé dans le HEAD
    Ne faut-il pas le mettre dans le BODY après compcab et avant bul ?
    IL soit s'exécuter au chargmement de la page.

    Je n'y connaît quasiment rien en JS, mes excuses...

  9. #9
    Membre régulier
    Homme Profil pro
    Futur développeur, étudiant
    Inscrit en
    Juillet 2012
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Futur développeur, étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2012
    Messages : 67
    Points : 73
    Points
    73
    Par défaut
    Ah oui, désolé,

    J'avais prévu de le mettre à la fin de mon message, mais j'ai oublié...

    Donc voilà, comme un fichier HTML (ou JS) est un fichier texte, le navigateur va le lire et l'interpréter de haut en bas. Donc si tu lui dis dans le head d'aller chercher des éléments situés dans le body, qui n'ont donc encore jamais été lus, c'est normal qu'il ne comprenne pas. Il faut donc en effet placer ton code JS après les éléments HTML concernés, donc dans le <BODY>

  10. #10
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Encore merci de ton aide.

    J'ai à la fin du body :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script type="text/javascript">
    <!--
    var width = document.getElementById('compcab').style.width;
    document.getElementById('bul').style.width = width;
    //-->
    </script>
    Ca continue à ne pas marcher...
    J'ai remplacé Class par Id et maxWith par Width pour simplifier.

    Vois-tu une erreur ?

  11. #11
    Membre actif Avatar de Basile le disciple
    Homme Profil pro
    étudiant Centrale Supélec
    Inscrit en
    Avril 2013
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : étudiant Centrale Supélec

    Informations forums :
    Inscription : Avril 2013
    Messages : 147
    Points : 279
    Points
    279
    Par défaut
    Bonjour,

    je ne sais pas si ça va changer grand chose mais si tu utilises offsetwidth, ça donne quoi??
    et sinon, si tu mets un alert qui donne le width, quelle valeur est affichée??

    Code javacript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
      var w = document.getElementById('compcab').offsetwidth;
      alert(w);
      document.getElementById('bul').style.width = w+'px';

  12. #12
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Avec le code de Basile le disciple, l'alert affiche "undefined"

    Avec width au lieu de offsetwidth, l'alert s'ouvre mais n'affiche rien.

    Une chose importante qui est l'objet même de cette discussion.

    La largeur de compab est effectivement indéterminée.
    C'est une table dont la largeur sera celle du contenu dynamique.

    Le premier boulot du script est donc de calculer la largeur inconnue de compcab.

    Peut-être que cette ligne nécessite que la width soit définie en CSS, mais dans ce cas je n'aurais pas besoin du script...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var w = document.getElementById('compcab').offsetwidth;
    A noter que .style dans le code de paulolol a disparu dans la ligne ci-dessus :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var width = document.getElementById('compcab').style.width;

  13. #13
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 392
    Points : 2 044
    Points
    2 044
    Par défaut
    Bonsoir,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var w = document.getElementById('compcab').offsetwidth;
    Width avec une majuscule...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var w = document.getElementById('compcab').offsetWidth;

  14. #14
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Merci, avec la majuscule cela marche.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    <!--
    var w = document.getElementById('compcab').offsetWidth;
    alert (w);
    document.getElementById('bul').style.width = w+'px';
    //-->
    </script>
    Toutefois il y a des surprises.

    Selon le navigateur et l'écran (essai sur deux Macs) je ne récupère pas la même valeur pour w :
    611 dans un cas, 579 dans l'autre.
    Je ne sais pas si c'est normal.

    Autre chose ennuyeuse, le bloc où s'applique w est une liste dont les puces sont gérés par le pseudo-élément :before.
    Aucun souci en fonctionnement normal ou sur le Mac 611 mais avec ce script sur le Mac 579 la première puce (uniquement la première) crée un saut de ligne et il s'affiche donc :


    première ligne
    • deuxième ligne
    • troisème ligne
    etc...

    Autre point, j'ai essayé avec Class au lieu de Id

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    <!--
    var w = document.getElementByClass('compcab').offsetWidth;
    alert (w);
    document.getElementByClass('bul').style.width = w+'px';
    //-->
    </script>
    Là je ne récupère plus aucune valeur.

    J'ai beaucoup avancé grâce à votre aide mais ce n'est pas encore prêt pour mise en production.

  15. #15
    Membre actif Avatar de Basile le disciple
    Homme Profil pro
    étudiant Centrale Supélec
    Inscrit en
    Avril 2013
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : étudiant Centrale Supélec

    Informations forums :
    Inscription : Avril 2013
    Messages : 147
    Points : 279
    Points
    279
    Par défaut
    Là je ne récupère plus aucune valeur.
    Normal, getElementByClassName renvoie un tableau de tous les objets ayant cette classe, il faudrait mettre :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    var obj = document.getElementByClassName('bul');
      for (var i=0;i<obj.length;i++) { 
        obj[i].style.width=w+'px';
      }

    [Edit]Merci NoSmoking[/Edit]

  16. #16
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    Normal, getElementByClass renvoie un tableau de tous les objets ayant cette classe...
    getElementByClass n'existe pas, getElementsByClassName peut être !

  17. #17
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Encore merci pour vos réponses.

    Je n'aurai pas le temps de m'y remettre avant le prochain week-end.

    Dans cette attente, avez-vous idée pour ces deux questions ?

    Selon le navigateur et l'écran (essai sur deux Macs) je ne récupère pas la même valeur pour w :
    611 dans un cas, 579 dans l'autre.
    Je ne sais pas si c'est normal.

    Autre chose ennuyeuse, le bloc où s'applique w est une liste dont les puces sont gérés par le pseudo-élément :before.
    Aucun souci en fonctionnement normal ou sur le Mac 611 mais avec ce script sur le Mac 579 la première puce (uniquement la première) crée un saut de ligne et il s'affiche donc :


    première ligne
    • deuxième ligne
    • troisème ligne
    etc...

  18. #18
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    J'ai continué les tests avec ce petit code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script type="text/javascript">
    <!--
    var w = document.getElementById('compcab').offsetWidth;
    document.getElementById('bul').style.maxWidth = w+'px';
    //-->
    </script>
    Merche très bien sur PC avec Firefox, Chome ou IE.

    Par contre, Safari sur Mac ne trouve pas la bonne longueur et provoque le problème de puce déjà évoqué.

    Idées pour un correctif ?

  19. #19
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 392
    Points : 2 044
    Points
    2 044
    Par défaut
    Bonjour,
    Citation Envoyé par boteha
    Par contre, Safari sur Mac ne trouve pas la bonne longueur
    Tu es certain que c'est la longueur détectée qui est en cause ?
    En as tu fait un alert ?
    Quelle différence avec Firefox... ?

    Ne serait-ce pas l'affectation qui suit qui serait en cause ?
    As-tu essayé :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var w = document.getElementById('compcab').offsetWidth;
    var bul = document.getElementById('bul');
    bul.setAttribute('width-max', w);
    Éventuellement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    bul.setAttribute('width-max', w+'px');

  20. #20
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    671
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 671
    Points : 128
    Points
    128
    Par défaut
    Bonjour,

    Merci de ta réponse.

    Quand je place une alert, je récupère une largeur plausible (579).
    Elle est différente avec Firefox (611) mais ce n'est pas le même écran, je suppose que cela explique cela.
    En plus, comme c'est le texte qui remplit les cellules qui détermine la largeur, je pense que la largeur du texte dépend du navigateur.

    Je vais faire ce soir un essai avec ton code.
    Cela m'étonne que Safari bute sur un script aussi simple.

Discussions similaires

  1. Réponses: 5
    Dernier message: 17/07/2013, 09h23
  2. [Toutes versions] Récupérer les valeurs d'une table pour une autre table
    Par spacesheep dans le forum Access
    Réponses: 3
    Dernier message: 29/03/2013, 18h06
  3. Réponses: 11
    Dernier message: 22/06/2009, 10h58
  4. Réponses: 62
    Dernier message: 16/04/2009, 11h09
  5. Réponses: 2
    Dernier message: 18/02/2007, 22h30

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