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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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.

Voir 40 message(s) de cette discussion en une page