[Chrome] Positionnement d'un calque

**hedgehog** · 28/05/2009, 10h35

Bonjour à tous,

J'ai un petit soucis de compatibilité de mon code Javascript sous Google Chrome (il fonctionne très bien sous IE et Firefox) pour le positionnement d'un calque.

Résultat sous IE :

Résultat sous Chrome :

Le calque blanc est calé à gauche (un document.getElementById('uploadLayer').offsetWidth me retourne la même taille qu'un document.body.offsetWidth)

Fonction Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
function setToTheCenterOfTheScreen(objectId)
{
	var screenWidth = document.body.offsetWidth;
	var screenHeight = document.body.offsetHeight;
	var objectWidth = document.getElementById(objectId).offsetWidth;
	var objectHeight = document.getElementById(objectId).offsetHeight;
	document.getElementById(objectId).style.left = ((screenWidth / 2) - (objectWidth / 2)) + 'px';
	document.getElementById(objectId).style.top = ((screenHeight / 2) - (objectHeight / 2)) + 'px';
}

Calque concerné :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="uploadLayer" class="uploadLayer">
<table align="center">
   <tr>
      <td>Fichier : </td>
         <td><input type="file" name="uploadFile" /></td>
   </tr>
   <tr>
      <td colspan="2" height="15"> </td>
   </tr>
   <tr>
      <td colspan="2"><input type="submit" value="Envoyer" /></td>
   </tr>
</table>
</div>

CSS du calque :

Code :

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

1
2
3
4
5
6
7
8
9
10
.uploadLayer
{
	position: absolute;
	visibility: visible;
	background-color: #FFFFFF;
	z-index: 1;
	top: 0px;
	left: 0px;
	text-align: center
}

Pouvez-vous me donner un petit coup de main ?

Merci d'avance

**le_chomeur** · 28/05/2009, 11h41

le problème viens d'ailleurs ... :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.uploadLayer
{
	position: absolute;
	visibility: visible;
	background-color: #FFFFFF;
	z-index: 1;
	text-align: center;
	background-color:red;
}
		</style>
	</head>
	<body>
 
		<div id="uploadLayer" class="uploadLayer">
<table align="center">
   <tr>
      <td>Fichier : </td>
         <td><input type="file" name="uploadFile" /></td>
   </tr>
   <tr>
      <td colspan="2" height="15"> </td>
   </tr>
   <tr>
      <td colspan="2"><input type="submit" value="Envoyer" /></td>
   </tr>
</table>
</div>
		<script type="text/javascript">
 
			function setToTheCenterOfTheScreen(objectId)
{
	var screenWidth = document.body.offsetWidth;
	var screenHeight = document.body.offsetHeight;
	var objectWidth = document.getElementById(objectId).offsetWidth;
	var objectHeight = document.getElementById(objectId).offsetHeight;
	document.getElementById(objectId).style.left = ((screenWidth / 2) - (objectWidth / 2)) + 'px';
	document.getElementById(objectId).style.top = ((screenHeight / 2) - (objectHeight / 2)) + 'px';
}
setToTheCenterOfTheScreen('uploadLayer');
		</script>
	</body>
</html>

même rendu sous ie/FF/Chrome

**hedgehog** · 28/05/2009, 12h04

Effectivement :/

Merci de ton aide.

[Chrome] Positionnement d'un calque

JavaScript

Discussions similaires

Partager

Partager