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

Vue hybride

Discussions similaires

Partager

Partager