calculer l'espace entre 2 <hr>

Version imprimable

30/11/2005, 16h33
pmartin8

calculer l'espace entre 2 <hr>

Bonjour

Dasn une page web j'ai 2 <hr> et j'aimerais calculer le nombre de pixel qui les sépare.

La page se crée a partir de du XSL donc le tout est dynamique et l'expace n'est pas toujorus le meme.

Merci
30/11/2005, 16h57
denisC

offsetTop te donne l'espacement par rapport au container précédent. En jouant la-dessus, tu arriveras à determiner la distance (ça va pas être cotton).

???
il est ou le piège Denis ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type='text/javascript'>
function distance(){
var pas=document.getElementsByTagName('hr')[1].offsetTop-document.getElementsByTagName('hr')[0].offsetTop+'px'
alert(pas)
}
 
 
</script>
</head>
 
<body onload='distance()'>
<hr>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<hr>
 
</body>
</html>

30/11/2005, 18h18
pmartin8

si tu calcul la distance sur le body onload la page n'est pas enre loadé alors c'Est impossible de connaitre quel sera la position final du dernier HR

pas vrai?
01/12/2005, 08h50
SpaceFrog

heu non pas vrai justement le onload est fait pour ça ...

maintenant si tu as des images qui prennent du temps à charger, il suffit de rajouter un teste de "complete" sur les images ...

tu peux aussi essayer de mettre l'appel de la focntion en dernière ligne de la page, mais je ne pense pas que ça change grand chose ...
01/12/2005, 16h03
denisC
Citation:

Envoyé par SpaceFrog

il est ou le piège Denis ?

Le piège (que je pressens) est que ça marche tout seul dans ton cas car les deux HR ont le même container parent. Si ce n'est pas le cas, il y aura de la recursion à faire.

Example, avec:
Code:

1 2 3 4 5 6 7 8 9 10 <body> <div> <hr /> <br /> <div> <br /> <hr /> </div> </body>
Je ne suis pas certain que ton code marche (mais j'ai pas le temps de tester pour le moment :? )
01/12/2005, 16h40
SpaceFrog

c'est ce que j'avais senti dans ton intervention et j'ai testé... mais le offsetTop retourne le top depuis le haut de page et ps depuis le parent donc ça focntionne ...
01/12/2005, 17h17
denisC

Citation:

Envoyé par SpaceFrog

c'est ce que j'avais senti dans ton intervention et j'ai testé... mais le offsetTop retourne le top depuis le haut de page et ps depuis le parent donc ça focntionne ...

Le offsetTop retourne la distance depuis le container parent (mais le container d'offset, pas le container HTML).

Apparement, (d'après MSDN):

Citation:

Most of the time the offsetParent property returns the body object.
Note : In Microsoft Internet Explorer 5, the offsetParent property returns the table object for the td object; in Internet Explorer 4.0 it returns the tr object. You can use the parentElement property to retrieve the immediate container of the table cell.

Donc ça marche avec IE6, mais il y aura des problèmes avec IE 5 et 4 dans certain cas....

Sous Mozilla:

Citation:

offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent.

Donc, en conclusion, ton code marche dans 90% des cas, mais il pourrait ne pas marcher :)
01/12/2005, 18h12
pmartin8

Merci a vous 2..

plsu j'avance.. plus je me rend compte que tout le monde gagnerait a se standardiser aux normes de w3c!