calculer l'espace entre 2 <hr>

**pmartin8** · 30/11/2005, 16h33

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

**denisC** · 30/11/2005, 16h57

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

**SpaceFrog** · 30/11/2005, 17h14

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**pmartin8** · 30/11/2005, 18h18

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?

**SpaceFrog** · 01/12/2005, 08h50

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

**denisC** · 01/12/2005, 16h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

)

**SpaceFrog** · 01/12/2005, 16h40

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

**denisC** · 01/12/2005, 17h17

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):

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:

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

**pmartin8** · 01/12/2005, 18h12

Merci a vous 2..

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

calculer l'espace entre 2 <hr>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager