td et height

ASM

26/06/2007 à 12:20

Bonjour,

Peut-on connaître la valeur de la propriété 'height' d'un élément 'td',
quand cette valeur n'est pas spécifiée explicitement au navigateur ?

Je ne sais pas mais je pense que non.

En tous cas je ne vois pas comment on peut faire ... la hauteur d'un TD,
même si spécifiée, pourra varier en fonction de son contenu.
Ainsi si l'utilisateur demande à son brouteur d'agandir l'affichage, la
hauteur du TD pourra varier en fonction de ce choix.

C'est pour quoi faire ?

--
Stephane Moriaux et son (moins) vieux Mac

Thomas Huguet

26/06/2007 à 13:23

Peut-on connaître la valeur de la propriété 'height' d'un élément 'td',
quand cette valeur n'est pas spécifiée explicitement au navigateur ?

Je ne sais pas mais je pense que non.

En tous cas je ne vois pas comment on peut faire ... la hauteur d'un TD,
même si spécifiée, pourra varier en fonction de son contenu.
Ainsi si l'utilisateur demande à son brouteur d'agandir l'affichage, la
hauteur du TD pourra varier en fonction de ce choix.
C'est pour quoi faire ?

Merci pour la réponse.

A la suite de modifications dynamiques de contenus dans des cellules de
tableau, j'aimerais avoir des infos sur la nouvelle taille de la ligne de
cellules concernée.
Mais aussi dès l'initialisation de la page par le navigateur.

Un exemple de code, typique du problème auquel je suis confronté :
<html>
<head>
<script>
function go()
{
document.getElementById('B').innerHTML =
"document.getElementById('A').width=" + document.getElementById('A').width;
document.getElementById('C').innerHTML =
"document.getElementById('A').height=" +
document.getElementById('A').height;
}
</script>
</head>
<body onLoad="go();">
<table>
<tr>
<td id="A" width="400"
style="background-color:lightsalmon;">Texte<br/>Texte</td>
</tr>
<tr>
<td id="B" style="background-color:lightyellow;"></td>
</tr>
<tr>
<td id="C" style="background-color:lightblue;"></td>
</tr>
</table>
</body>
</html>
Dans l'élément 'td' tel que 'id="A"', la propriété 'width' existe, mais la
propriété 'height' semble ne pas exister.
Pourtant, elle est bien quelque part dans le navigateur...

:-)

Thomas Huguet

ASM

26/06/2007 à 16:03

Merci pour la réponse.

A la suite de modifications dynamiques de contenus dans des cellules de
tableau, j'aimerais avoir des infos sur la nouvelle taille de la ligne de
cellules concernée.

Et je repose la question : Pour quoi faire ?

Un exemple de code, typique du problème auquel je suis confronté :
(snip)

Dans l'élément 'td' tel que 'id="A"', la propriété 'width' existe,

ben oui ... tu l'as donnée toi-même !
<td id="A" width="400"

mais la propriété 'height' semble ne pas exister.

Ben non ... en effet on ne la voit nulle part dans le code.

Pourtant, elle est bien quelque part dans le navigateur...

Ben non !
ou peut-être ?
Il a certainement ajusté la hauteur quand il en a eu besoin pour
afficher, mais qui sait s'il l'a mémorisée ?

--
Stephane Moriaux et son (moins) vieux Mac

Olivier Miakinen

26/06/2007 à 16:30

Peut-on connaître la valeur de la propriété 'height' d'un élément 'td',
quand cette valeur n'est pas spécifiée explicitement au navigateur ?

En principe, c'est 'auto', c'est-à-dire que la hauteur dépend à la fois
de son contenu et des hauteurs calculées pour les autres cellules de la
même ligne, voire pour la ligne elle-même.

Olivier Miakinen

26/06/2007 à 16:35

Peut-on connaître la valeur de la propriété 'height' d'un élément 'td',
quand cette valeur n'est pas spécifiée explicitement au navigateur ?

En principe, c'est 'auto', c'est-à-dire que la hauteur dépend à la fois
de son contenu et des hauteurs calculées pour les autres cellules de la
même ligne, voire pour la ligne elle-même.

Oups, pardon, je viens de voir qu'on est sur fclj et qu'en réalité c'est
la hauteur calculée qui t'intéresse plutôt que la propriété 'height'.

Essaye donc d'aller faire un tour par là :
http://www.google.fr/search?q=javascript+%22hauteur+calcul%C3%A9e%22
http://www.google.fr/search?q=javascript+%22computed%20height%22

ASM

26/06/2007 à 17:59

Oups, pardon, je viens de voir qu'on est sur fclj et qu'en réalité c'est
la hauteur calculée qui t'intéresse plutôt que la propriété 'height'.

Bon, allez un bon geste, voici qui fonctionne avec mon FF :

document.getElementById('A').clientHeight

Tout est ici :
http://www.quirksmode.org/js/elementdimensions.html#top

--
Stephane Moriaux et son (moins) vieux Mac

Thomas Huguet

28/06/2007 à 13:24

Bonjour,

A la suite de modifications dynamiques de contenus dans des cellules de
tableau, j'aimerais avoir des infos sur la nouvelle taille de la ligne de
cellules concernée.
Et je repose la question : Pour quoi faire ?

Pour présenter un ensemble de textes sous deux colonnes (ou en
multi-colonnes...).
Chacun de ces textes se présente sous la forme d'une succession de
paragraphes qui ne doivent pas être scindés.
La colonne de gauche doit être plus grande que la colonne de droite, mais la
plus petite possible.

Après une première moulinette, les 2 colonnes arrivent à peu près
équilibrées en longueur.
Mais je me pose la question de fignoler, lorsque c'est possible, en faisant
fonctionner quelques lignes en javascript.

Merci pour les informations qui me permettent d'abourir à une solution
possible (ci-dessous).

Thomas Huguet

<html>
<head>
<style type="text/css">
div { margin-bottom:5px; }
</style>
<script>
function go()
{
alert("Avant !");
while (document.getElementById('Col2').offsetHeight >
document.getElementById('Col1').offsetHeight)
{
var child = document.getElementById('Col2').firstChild;
if ( child.nodeName == "DIV" )
document.getElementById('Col1').appendChild(child);
else
document.getElementById('Col2').removeChild(child);
}
alert("Après !");
}
</script>
</head>
<body onLoad="go();">
<table>
<tr>
<td width="400" style="background-color:lightsalmon;
vertical-align:top;">
<div id ="Col1"></div>
</td>
<td width="400" style="background-color:lightyellow;
vertical-align:top;">
<div id ="Col2">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non risus.</div>
<div>Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non,

mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat.</div>
<div>Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim.</div>
<div>Pellentesque congue. Ut in risus volutpat libero pharetra
tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
Praesent blandit odio eu enim. Pellentesque

sed dui ut augue blandit sodales.</div>
<div>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
pellentesque fermentum. Maecenas adipiscing

ante non diam sodales hendrerit.</div>
<div>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.
Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce
varius, ligula non tempus aliquam, nunc turpis

ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus
nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam.
Integer quis metus vitae elit lobortis egestas.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>Morbi vel erat non mauris convallis vehicula. Nulla et
sapien.</div>
<div>Integer tortor tellus, aliquam faucibus, convallis id,
congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue
non elementum posuere, metus purus iaculis lectus,

et tristique ligula justo vitae magna. Aliquam convallis sollicitudin
purus.</div>
<div>Praesent aliquam, enim at fermentum mollis, ligula massa
adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at
sapien. Vivamus leo. Aliquam euismod libero eu

enim. Nulla nec felis sed leo placerat imperdiet.</div>
<div>Aenean suscipit nulla in justo. Suspendisse cursus rutrum
augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus
faucibus, felis magna fermentum augue, et

ultricies lacus lorem varius purus. Curabitur eu amet.</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Bonjour,

A la suite de modifications dynamiques de contenus dans des cellules de
tableau, j'aimerais avoir des infos sur la nouvelle taille de la ligne de
cellules concernée.
Et je repose la question : Pour quoi faire ?

Pour présenter un ensemble de textes sous deux colonnes (ou en
multi-colonnes...).
Chacun de ces textes se présente sous la forme d'une succession de
paragraphes qui ne doivent pas être scindés.
La colonne de gauche doit être plus grande que la colonne de droite, mais la
plus petite possible.

Après une première moulinette, les 2 colonnes arrivent à peu près
équilibrées en longueur.
Mais je me pose la question de fignoler, lorsque c'est possible, en faisant
fonctionner quelques lignes en javascript.

Merci pour les informations qui me permettent d'abourir à une solution
possible (ci-dessous).

Thomas Huguet

<html>
<head>
<style type="text/css">
div { margin-bottom:5px; }
</style>
<script>
function go()
{
alert("Avant !");
while (document.getElementById('Col2').offsetHeight >
document.getElementById('Col1').offsetHeight)
{
var child = document.getElementById('Col2').firstChild;
if ( child.nodeName == "DIV" )
document.getElementById('Col1').appendChild(child);
else
document.getElementById('Col2').removeChild(child);
}
alert("Après !");
}
</script>
</head>
<body onLoad="go();">
<table>
<tr>
<td width="400" style="background-color:lightsalmon;
vertical-align:top;">
<div id ="Col1"></div>
</td>
<td width="400" style="background-color:lightyellow;
vertical-align:top;">
<div id ="Col2">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non risus.</div>
<div>Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non,

mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat.</div>
<div>Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim.</div>
<div>Pellentesque congue. Ut in risus volutpat libero pharetra
tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
Praesent blandit odio eu enim. Pellentesque

sed dui ut augue blandit sodales.</div>
<div>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
pellentesque fermentum. Maecenas adipiscing

ante non diam sodales hendrerit.</div>
<div>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.
Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce
varius, ligula non tempus aliquam, nunc turpis

ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus
nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam.
Integer quis metus vitae elit lobortis egestas.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>Morbi vel erat non mauris convallis vehicula. Nulla et
sapien.</div>
<div>Integer tortor tellus, aliquam faucibus, convallis id,
congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue
non elementum posuere, metus purus iaculis lectus,

et tristique ligula justo vitae magna. Aliquam convallis sollicitudin
purus.</div>
<div>Praesent aliquam, enim at fermentum mollis, ligula massa
adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at
sapien. Vivamus leo. Aliquam euismod libero eu

enim. Nulla nec felis sed leo placerat imperdiet.</div>
<div>Aenean suscipit nulla in justo. Suspendisse cursus rutrum
augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus
faucibus, felis magna fermentum augue, et

ultricies lacus lorem varius purus. Curabitur eu amet.</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

Bonjour,

A la suite de modifications dynamiques de contenus dans des cellules de
tableau, j'aimerais avoir des infos sur la nouvelle taille de la ligne de
cellules concernée.
Et je repose la question : Pour quoi faire ?

Pour présenter un ensemble de textes sous deux colonnes (ou en
multi-colonnes...).
Chacun de ces textes se présente sous la forme d'une succession de
paragraphes qui ne doivent pas être scindés.
La colonne de gauche doit être plus grande que la colonne de droite, mais la
plus petite possible.

Après une première moulinette, les 2 colonnes arrivent à peu près
équilibrées en longueur.
Mais je me pose la question de fignoler, lorsque c'est possible, en faisant
fonctionner quelques lignes en javascript.

Merci pour les informations qui me permettent d'abourir à une solution
possible (ci-dessous).

Thomas Huguet

<html>
<head>
<style type="text/css">
div { margin-bottom:5px; }
</style>
<script>
function go()
{
alert("Avant !");
while (document.getElementById('Col2').offsetHeight >
document.getElementById('Col1').offsetHeight)
{
var child = document.getElementById('Col2').firstChild;
if ( child.nodeName == "DIV" )
document.getElementById('Col1').appendChild(child);
else
document.getElementById('Col2').removeChild(child);
}
alert("Après !");
}
</script>
</head>
<body onLoad="go();">
<table>
<tr>
<td width="400" style="background-color:lightsalmon;
vertical-align:top;">
<div id ="Col1"></div>
</td>
<td width="400" style="background-color:lightyellow;
vertical-align:top;">
<div id ="Col2">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non risus.</div>
<div>Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non,

mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat.</div>
<div>Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim.</div>
<div>Pellentesque congue. Ut in risus volutpat libero pharetra
tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
Praesent blandit odio eu enim. Pellentesque

sed dui ut augue blandit sodales.</div>
<div>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
pellentesque fermentum. Maecenas adipiscing

ante non diam sodales hendrerit.</div>
<div>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.
Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce
varius, ligula non tempus aliquam, nunc turpis

ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus
nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam.
Integer quis metus vitae elit lobortis egestas.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>Morbi vel erat non mauris convallis vehicula. Nulla et
sapien.</div>
<div>Integer tortor tellus, aliquam faucibus, convallis id,
congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue
non elementum posuere, metus purus iaculis lectus,

et tristique ligula justo vitae magna. Aliquam convallis sollicitudin
purus.</div>
<div>Praesent aliquam, enim at fermentum mollis, ligula massa
adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at
sapien. Vivamus leo. Aliquam euismod libero eu

enim. Nulla nec felis sed leo placerat imperdiet.</div>
<div>Aenean suscipit nulla in justo. Suspendisse cursus rutrum
augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus
faucibus, felis magna fermentum augue, et

ultricies lacus lorem varius purus. Curabitur eu amet.</div>
</div>
</td>
</tr>
</table>
</body>
</html>

td et height

7 réponses

Veuillez sélectionner un problème