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

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

Encore merci.

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

Je te tiens au courant.

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

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

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

MERCI pour le lien NoSmoking,
Je me retire.
Je suivrai les réponses avec intérêt.

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.

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>

---

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 ?

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.

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.

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.

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.

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!

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.