Manipuler la propriété top d'un div

**Manak** · 13/09/2010, 10h47

Salut tous,

Voilà j'aimerai modifier dynamiquement la coordonnée y d'un div pour le centrer verticalement sur l'écran.

Mon html:

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ma page</title>
<script type='text/javascript' src='script.js'></script> 
</head>
 
 
<body>
<div id="monDiv" style="position: absolute;"><img src="arrow.gif"/></div>
</body>
 
</html>

Mon fichier script.js:

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
 
function getWindowHeight() {
    var h = 0;
    if (typeof(window.innerHeight) == 'number') { // Netscape
        h = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        h = document.documentElement.clientHeight;
    } else if (document.body && document.body.offsetHeight) { //client
        h = document.body.offsetHeight;
    }
    return h;
}
 
 
var postop = getWindowHeight()/2;
 
 
document.getElementById('monDiv').style.top = postop+"px";

Evidemment, cela ne fonctionne pas!

Même en faisant fi de la fonction getWindowHeight() et en assignant
juste un chiffre quelconque à postop, rien ne passe.

Si quelqu'un peut m'aider, ce serait chouette!

Manak.

**kalash_jako** · 13/09/2010, 11h01

Bonjour,

votre code est en fait correct, par contre le javascript s'exécute trop tôt!

En effet celui ci est sûrement exécuté alors que le div n'a pas été pris en compte par votre navigateur,

Code :

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

document.getElementById('monDiv')

doit probablement être null.

Vous pouvez contourner ce problème de cette manière :

Code :

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

1
2
3
4
function initDivPos()
{
    document.getElementById('monDiv').style.top = (getWindowHeight() / 2) + "px";
}

Code :

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

<body onload="initDivPos()">

Manipuler la propriété top d'un div

JavaScript

Discussions similaires

Partager

Partager