Différence de innerWidth /innerHeigth IE/firefox

**le_chomeur** · 01/02/2008, 10h01

salut a tous , la je sèche ...
je créer une div via un premier bouton qui s'occupe de la création et de la position premier problème la div n'est pas centrée sous IE7

Ensuite lors du déplacement , problème également ...

Voici le code ce sera plus simple :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
	body,html{
		width:100%;
		margin:0;
		padding:0;
	}
	.divContenu{
		width:400px;
		height:300px;
		border:1px solid #666;
		position:absolute;
		overflow:hidden;
	}
</style>
 
<script type="text/javascript">
 
	var compteur = null;
	var d = null ;
	var hauteurCalcule = null;
	var largeur = null;
	var position = null;
	var positionRight = null;
	var hauteurContenu  = null;
	var largeurContenu = null;
 
	function moins(){
		//création de la popup
		createPopup();
		//Positionnement au centre
		positionCenter();
	}
 
 
	function createPopup(){
		//création de la div qui contiendra la page appelante
		var divContenu = document.createElement('div');
		divContenu.setAttribute("class","divContenu");
		divContenu.setAttribute("className","divContenu"); //Compatibilité IE
		divContenu.id =  "titi";
		//Création du fond
		document.body.appendChild(divContenu);
	}
 
	function positionCenter(){
		try{
		//récupération de la largeur disponible
		//selon ie ou firefox
		hauteurContenu =document.documentElement.clientHeight ;
		largeurContenu = document.documentElement.clientWidth ;
		largeurPopup =  ($('titi').currentStyle) ? parseInt($('titi').currentStyle.width) : parseInt(window.getComputedStyle($('titi'),null).getPropertyValue('width'));
		hauteurPopup = ($('titi').currentStyle) ? parseInt($('titi').currentStyle.height) : parseInt(window.getComputedStyle($('titi'),null).getPropertyValue('height'));
 
		//Calcul pour positionner au centre : (largeur contenu / 2) - (largeur popup /2)
		positionLeft = parseInt(( largeurContenu / 2 )) - (largeurPopup / 2);
		positionTop = parseInt(( hauteurContenu / 2 )) - (hauteurPopup / 2);
		//on positionne à gauche
		$('titi').style.marginLeft = positionLeft + "px";
		//on positionne par rapport au top
		$('titi').style.marginTop = positionTop + "px";
		}
		catch(ErrorE){
			alert(ErrorE.message);
		}		
	}
 
	function $(idElement){
		return document.getElementById(idElement);
	}
 
	function retrecir(){
	var testtt = false ;
 
		if((positionLeft + largeurPopup) < (largeurContenu - 30)){
			positionLeft += 15 ;
			$('titi').style.marginLeft = positionLeft + "px";
		}
 
		if( positionTop >= 0 ){
			positionTop -= 15 ;
			$('titi').style.marginTop = positionTop + "px";
		}
 
		if(( (positionLeft + largeurPopup) <= largeurContenu) || ( positionTop >= 0 )){
			testtt = true;
		}
 
		if(testtt){
			compteur = setTimeout('retrecir()',1);
		}
		else{
			clearTimeout(compteur);
			alert("stop");
		}
	}
 
</script>
</head>
 
<body>
<div id="debug">
</div>
 
<input type="button" value="La replacer" onclick="retrecir()" />
<input type="button" value="Créer la div" onclick="moins()" />
 
</body>
</html>

merci ^^

**Auteur** · 01/02/2008, 19h29

bonjour,

si tu utilisais les pourcentages plutôt que les pixels pour positionner ton div ?

clientHeight et clientWidth ne correspondent pas aux dimensions de la page (qui est visuellement celle de ton écran) mais à la hauteur du document.

**le_chomeur** · 02/02/2008, 10h28

Le problème c'est que pour repositionner ma div en haut à droite par exemple , je ne pourrais pas calculer les % avec la largeur de la div en px

Mais j'ai peut-être trouvé une solution en positionnant la div en javascript a sa création ... je finis et je posterais mais si quelqu'un a une solution ...

Merci ^^

Différence de innerWidth /innerHeigth IE/firefox

JavaScript

Discussions similaires

Partager

Partager