11550 sujets

JavaScript, DOM et API Web HTML5

[resolu] getElementById("monobjet"+i).style.left probleme

Bonjour,
J'ai un problème de positionnement dynamique d'images sur ma page voici le code (simple pourtant):


<head>
<style type=text/css>

#volL0 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff;}
#volL1 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff;}
#volL2 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff;}
#volL3 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
#volL4 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
#volL5 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
#volL6 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
#volL7 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
#volL8 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
#volL9 {  position:absolute; width:20px; height:62px; z-index:2; background-color:#fff; }
</style>
<script src="js/jquery-1.2.6.min.js"  type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" >

function getSize() {
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) { //Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	var tmp;

	for (var i=0; i<10; i++) {

		document.getElementById("volL"+i).style.left = (myWidth+(32+i*20))/2;
		document.getElementById("volL"+i).style.top = (myHeight-31)/2;


	}
}

</script>
</head>
<body onload="getSize()" onresize="getSize()">
<div id="volL9"></div>
    <div id="volL8"></div>
    <div id="volL7"></div>
    <div id="volL6"></div>
	<div id="volL5"></div>
    <div id="volL4"></div>
    <div id="volL3"></div>
    <div id="volL2"></div>
<div id="volL1"></div>    
    <div id="volL0"></div>
</body>

A priori les différentes images devraient être alignées par rapport au centre de la fenêtre. Mais il n'en est rien, elles restent désespérément en haut à gauche de l'écran.

une idée ?
Modifié par anatalsceo (06 Feb 2009 - 15:41)
Sujet clos
Aller à