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

Version imprimable

01/04/2015, 22h09
boteha

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.
02/04/2015, 10h19
-Rpass-

Bonjour,

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

Code:

var width = $(element).css("width")

Puis pour ajouter un style à un élément c'est la même méthode :

Code:

$(element).css("max-width", width)
02/04/2015, 11h23
boteha

Merci beaucoup.

Je profite du week-end allongé pour mes tests, je te tiens au courant.
05/04/2015, 21h49
boteha
Bonjour,

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

1 2 3 4 5 6 7 <script type="text/javascript">  </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 ?

Bonjour,
je suis débutant en JS, mais j'ai eu un besoin semblable :
HTML :

Code:

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:

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:

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

06/04/2015, 09h30
paulolol
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:

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:

document.getElementByClass('bul').style.maxWidth = width;

ou encore :
Code:

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 ;)
06/04/2015, 10h52
boteha

Bonjour,

Merci beaucoup de vos réponses.

Je vais tester le code de paulolol.
06/04/2015, 11h22
boteha
Bonjour,

Je mets dans le HEAD :
Code:

1 2 3 4 5 6 7 <script type="text/javascript">  </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...
06/04/2015, 11h34
paulolol

Ah oui, désolé,

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

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>
06/04/2015, 15h30
boteha
Bonjour,

Encore merci de ton aide.

J'ai à la fin du body :
Code:

1 2 3 4 5 6 7 <script type="text/javascript">  </script>
Ca continue à ne pas marcher...
J'ai remplacé Class par Id et maxWith par Width pour simplifier.

Vois-tu une erreur ?
06/04/2015, 18h10
Basile le disciple
Bonjour:coucou:,

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:

1 2 3 4 var w = document.getElementById('compcab').offsetwidth; alert(w); document.getElementById('bul').style.width = w+'px';
06/04/2015, 19h06
boteha

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:

var w = document.getElementById('compcab').offsetwidth;

A noter que .style dans le code de paulolol a disparu dans la ligne ci-dessus :

Code:

var width = document.getElementById('compcab').style.width;
06/04/2015, 19h30
dmganges

Bonsoir,

Code:

var w = document.getElementById('compcab').offsetwidth;

Width avec une majuscule...

Code:

.offsetWidth;

Code:

var w = document.getElementById('compcab').offsetWidth;
06/04/2015, 20h17
boteha
Bonjour,

Merci, avec la majuscule cela marche.
Code:

1 2 3 4 5 6 7 <script type="text/javascript">  </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:

1 2 3 4 5 6 7 <script type="text/javascript">  </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.
06/04/2015, 20h24
Basile le disciple
Citation:

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:

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]
06/04/2015, 20h29
NoSmoking

Bonjour,

Citation:

Normal, getElementByClass renvoie un tableau de tous les objets ayant cette classe...

getElementByClass n'existe pas, getElementsByClassName peut être !
06/04/2015, 21h44
boteha

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 ?

Citation:

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...
08/04/2015, 22h06
boteha
Bonjour,

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

1 2 3 4 5 6 7 <script type="text/javascript">  </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 ?
09/04/2015, 04h55
dmganges
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:

1 2 3 var w = document.getElementById('compcab').offsetWidth; var bul = document.getElementById('bul'); bul.setAttribute('width-max', w);
Éventuellement :

Code:

bul.setAttribute('width-max', w+'px');
09/04/2015, 12h12
boteha

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.

Citation:

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.

Ben si tu utilises la même police et la même taille de caractère, en théorie non... mais si en plus les définitions de taille d'écran sont différentes :
essaie aussi de définir les tailles non en (px) pixels fixes mais en (em) taille proportionnelle à la police de caractère utilisée...
Mais ça va t'obliger à revoir toutes les tailles, au moins à partir du tableau en question...

[EDIT 13:50]
Tu peux aussi essayer de manipuler la taille obtenue, la faire varier d'un coefficient 0.9 ou 1.1 par exemple et de récupérer la partie entière obtenue avec floor pour l'affecter...
ça pourrait donner :
Code:

1 2 3 4 5 var w = document.getElementById('compcab').offsetWidth; var ww = Math.floor(w * .9); // OU var ww = Math.floor(w * 1.1); //....etc var bul = document.getElementById('bul'); bul.setAttribute('width-max', ww);
Code:

1 2 bul.setAttribute('width-max', ww+'px'); bul.setAttribute('width-max', w+'em');
...
em acceptant des valeurs réelles (nombre avec virgule)

Code non testé...

09/04/2015, 14h17
boteha

Encore merci.

Je teste en fin de journée, ce week-end au plus tard.

Je te tiens au courant.
09/04/2015, 14h52
dmganges

OK, de rien,
Modifier la taille obtenue reste tiré par les cheveux...

Code:

bul.setAttribute('width-max', w+'px');

(ou équivalent)
devrait suffire, sinon ça voudrait dire qu'il faudrait tester le navigateur et la police de caractères, et faire en conséquence...
Une norme CSS3 plus récente
09/04/2015, 14h56
Bovino

Code:

bul.setAttribute('width-max', w+'px');

:nono:

D'une part, width-max n'existe que dans ton imagination. :mrgreen:
Ensuite, une fois la page affichée, il n'y a aucune raison de modifier les attributs HTML avec setAttribute() / getAttribute(), ce sont les propriété du DOM qu'il faut manipuler

Code:

bul.style.maxWidth = w + 'px';

merci bovino pour ton intervention je débute dans le domaine,

Cependant je fais ceci :
Code:

1 2 3 4 5 6 7 8 this.canvas = document.createElement('canvas'); document.getElementById('DIVG').appendChild(this.canvas); this.imgdimx = document.getElementById('DIVG').offsetWidth; this.imgdimy = document.getElementById('DIVG').offsetHeight; // alert ("LARG="+ this.imgdimx +" HAUT="+ this.imgdimy +"="); this.canvas.setAttribute('width', this.imgdimx); this.canvas.setAttribute('height', this.imgdimy); this.ctx = this.canvas.getContext('2d');
car si je crée le canvas dans HTML j'ai des pb de proportion,
c'est tout ce que j'ai trouvé pour me sortir d'affaire, mais autant c'est nul...

[EDIT 15:12]
J'avais rapidement testé comme ceci

09/04/2015, 18h15
NoSmoking

@dmganges :

Citation:

car si je crée le canvas dans HTML j'ai des pb de proportion,
c'est tout ce que j'ai trouvé pour me sortir d'affaire, mais autant c'est nul...

la différence c'est qu'un élément CANVAS possède des atrributs width et height :fleche: 4.11.4 The canvas element.

@boteha :peut être serait-il temps de nous fournir le code HTML/CSS pour que l'on appréhende mieux ce que tu veux car les origines possibles sont nombreuses, DOCTYPE, définition font par défaut ... et aussi bien, une solution HTML est suffisante!
09/04/2015, 19h09
dmganges

MERCI pour le lien NoSmoking,
Je me retire.
Je suivrai les réponses avec intérêt.
09/04/2015, 19h40
boteha

Bonjour,

Citation:

@boteha :peut être serait-il temps de nous fournir le code HTML/CSS pour que l'on appréhende mieux ce que tu veux car les origines possibles sont nombreuses, DOCTYPE, définition font par défaut ... et aussi bien, une solution HTML est suffisante!

Avec plaisir.

J'espère avoir ce soir le temps de vous envoyer les URL de mes pages de test.

J'ai trouvé une piste intéressante pour le bug Safari.

Le bug disparaît si j'enlève les éléments HTML entre la table à mesurer et le DIV où appliquer la mesure.

Cela sera beaucoup plus clair avec les liens de mes pages de test.
09/04/2015, 21h58
boteha
Bonjour,

Ce qui marche sur PC (Chrome, Firefox, IE) mais pas sur Safari :
Code:

1 2 3 4 5 6 7 8 9 <table id="compcab"> ... </table> <p id="D1654">...</p> <div id="bul" > <p>...</p> </div>
Ce qui marche partout, j'ai simplement supprimé id="D1654" entre tabe et div :
Code:

1 2 3 4 5 6 7 8 9 <table id="compcab"> ... </table> <p>...</p> <div id="bul" > <p id="D1654">...</p> </div>
10/04/2015, 21h44
boteha
Bonjour,

Pour info, le problème avec Safari est réglé.
Il faut simplement éviter d'avoir un élément avec id entre l'élément à mesurer et celui où la mesure est affectée.
Code:

1 2 3 4 5 6 7 8 9 // Safari n'aime pas : <table id="compcab"> ... </table> <p id="D1654">...</p> <ul id="bul"> ... </ul>
Safari réagit correctement :
Code:

1 2 3 4 5 6 7 <table id="compcab"> ... </table> <p>...</p> <ul id="bul"> ... </ul>
C'est clairement un bogue de Safari, il est vrai que j'emploie une version ancienne et non mlse à jour.

Autrement quel outil conseillez-vous pour estimer le poids du script dans le temps d'affichage de la page ?
11/04/2015, 08h10
NoSmoking

Citation:

C'est clairement un bogue de Safari...

si tu es obligé de réajuster un élément pour qu'il "taille" comme le précédent, c'est parce que ton document est mal conçu et que les navigateurs font au mieux pour réaliser ce que tu veux, ils leur arrivent même de deviner juste :aie:
On notera également que tu as modifié la structure pour arriver à tes fins...alors...

Qu'arrive t-il à ta page si tu redimensionnes l'écran ou si l'utilisateur à par défaut une police plus petite/grosse, il te vaudrait mieux tant qu'à réajuster réajuster le parent de ta TABLE à savoir la FORM, et laisser les enfants occuper leur place naturelle.

Citation:

Autrement quel outil conseillez-vous pour estimer le poids du script dans le temps d'affichage de la page ?

concernant ta page, tu peux estimer à 0 le plus de chargement.
11/04/2015, 12h01
boteha

Citation:

Envoyé par NoSmoking

Qu'arrive t-il à ta page si tu redimensionnes l'écran ou si l'utilisateur à par défaut une police plus petite/grosse, il te vaudrait mieux tant qu'à réajuster réajuster le parent de ta TABLE à savoir la FORM, et laisser les enfants occuper leur place naturelle.

Bonjour,

Je ne comprends pas ta remarque.

Le FORM est un bloc qui par défaut occupe 100 % de la largeur disponible.
La largeur de TABLE dépend de la taille de la police, c'est bien elle que je dois mesurer.
12/04/2015, 20h18
NoSmoking

Si tu opte pour cette solution, il te faut réajuster le parent, ta FORM, et laisser les enfants 'block' prendre la place normale qu'ils doivent occuper.
12/04/2015, 21h58
boteha

Bonjour,

Merci de ton intérêt.

Je n'ai pas été assez clair.

Dans cette histoire, la variable qui m'intéresse est la largeur dynamique de la TABLE.

Est-ce que tu me conseilles de mesurer cette largeur et de l'appliquer au FORM parent plutôt qu'au DIV frère ?

Si tu veux dire que je dois attribuer au FORM une largeur qui va s'appliquer aux enfants dont la TABLE, je ne peux pas le faire sans avoir mesuré TABLE.

Autrement, quand une page passe sur Chrome, Firfox et IE et que seul Safari ne comprend pas je pense pouvoir dire qu'il y a un bug de Safari.
C'est d'ailleurs intéressant à savoir et facile à corriger si l'on peut toucher à la structure.
13/04/2015, 21h46
NoSmoking

Citation:

Est-ce que tu me conseilles de mesurer cette largeur et de l'appliquer au FORM parent plutôt qu'au DIV frère ?

oui cela me paraît plus judicieux, même si, de souvenir, la structure de ta FORM me semblait englober toute la partie centrale dont une multitude d'éléments qui n'ont pas grand chose à faire dans cette FORM justement.

Citation:

Autrement, quand une page passe sur Chrome, Firfox et IE et que seul Safari ne comprend pas je pense pouvoir dire qu'il y a un bug de Safari.

Il serait intéressant d'avoir le code qui ne fonctionne pas, car dans certains cas les moteurs de rendu font des prouesses et cela ne veut pas dire que certains sont buggés!
13/04/2015, 22h05
boteha

Bonjour,

Encore merci de ton intérêt.

J'ai supprilmé les liens car ils étaient sur mon site de test qui est un peu confidentiel.

Effectivement, le FORM dont tu parles est le containeur de la partie principale de la page.
Je n'aime pas multiplier les balises de structure.

J'ai déjà décrit le bug de la vieille version Safari. En gros, aucun élément ne doit avec de sélecteur id entre le bloc à mesurer et le bloc où appliquer la largeur. Dis-moi s'il faut plus d'explications.

Fuseau horaire GMT +2. Il est actuellement 19h10.