popup et div centrées

**Tdeny** · 30/07/2007, 15h55

Bonjour,

J'ai un script qui sert doublement à ouvrir une popup centrée, ainsi que de centrer une div. Ceci quelquesoit la résolution.
Ça marche très bien sous IE, mais pas sous OPERA.
Sous firefox, je ne sais pas, je ne l'ai pas...
Pouvez-vous me dire pourquoi...?

Merci.

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
<html> 
<head>
<script type="text/javascript">
var centre = null;
var posX = null;
var posY = null;
var larg = 70;
var haut = 60;
larg = Math.ceil(screen.availWidth * (larg/100)*(1024/screen.width));
haut = Math.ceil(screen.height * (haut/100));
posX=Math.ceil((screen.availwidth - larg)/2);
posY=Math.ceil((screen.avalHeight - haut)/2)-50;
function ow(theURL,larg0,haut0) {
//----ça c'est le calcul de la position centrale de la fenetre---->
larg0 = Math.ceil(screen.availWidth * (larg0/100)*(1024/screen.width));
haut0 = Math.ceil(screen.availHeight * (haut0/100));
posX0=Math.ceil((screen.width - larg0)/2);
posY0=Math.ceil((screen.height - haut0)/2);
//------------------------- on ouvre centre  ------------------------------->
			centre = window.open(theURL,"inf2","scrollbars=yes,menubar=yes,location=yes,resizable=yes,width="+ larg0 +",height="+ haut0 +",top="+posY0+"px,left="+posX0+"px");
			centre.focus();
}
</script> 
<head>
<body>
<div><a href="#" onClick="ow('http://www.developpez.net/',60,50);">http://www.developpez.net/</a></div>
<script type="text/javascript">
document.write("<div style='position:absolute;width:"+larg+";height:"+haut+";top:"+posY+";left:"+posX+";border:1px solid black;padding:5px'>div 1</div>");
</script>
</body>
</html>

Fort possible que ce soit dû à l'écriture du style en js.

**E.Bzz** · 30/07/2007, 16h01

Bonjour,
essaye en ajoutant l'unité pour les coordonnées (top et left) et les tailles (height et width)

Code :

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

"...width:"+larg+"px;..."

A+

**Tdeny** · 30/07/2007, 16h21

Merci, mais non, ça ne marche pas.

**E.Bzz** · 30/07/2007, 16h37

Mets ton div directement en HTML (sans faire de document.write() ).
Tu lui attributs un ID et tu pourras ensuite modifier les caractéristiques en dynamique

Code :

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

1
2
document.getElementById('id_du_div').style.width = larg+"px";
...

A+

**Tdeny** · 30/07/2007, 16h37

J'ai trouvé...
C'est intéressant à savoir.
Ça marche quand on remplace les availWidth et availHeight par width et height tout court.
Apparemment Opera ne connait pas, ou l'a supprimé l'availWidth et le prend par défaut dans le width.
J'ai mis -100 pour la position de la div et -50 pour la popup.[
CODE]<html>
<head>
<script type="text/javascript">
var centre = null;
var posX;
var posY;
var larg = 70;
var haut = 60;
larg = Math.ceil(screen.width * (larg/100)*(1024/screen.width));
haut = Math.ceil(screen.height * (haut/100));
posX=Math.ceil((screen.width - larg)/2);
posY=Math.ceil((screen.height - haut)/2)-100;
function ow(theURL,larg0,haut0) {
//----ça c'est le calcul de la position centrale de la fenetre---->
larg0 = Math.ceil(screen.width * (larg0/100)*(1024/screen.width));
haut0 = Math.ceil(screen.height * (haut0/100))-100;
posX0=Math.ceil((screen.width - larg0)/2);
posY0=Math.ceil((screen.height - haut0)/2)-50;
//------------------------- on ouvre centre ------------------------------->
centre = window.open(theURL,"inf2","scrollbars=yes,menubar=yes,location=yes,resizable=yes,width="+larg0+"px,height="+haut0+"px,top="+posY0+"px,left="+posX0+"px");
centre.focus();
}
</script>
<head>
<body>
<div><a href="#" onClick="ow('http://www.developpez.net/',60,50);">http://www.developpez.net/</a></div>
<script type="text/javascript">
document.write("<div style='position:absolute;width:"+larg+"px;height:"+haut+"px;top:"+posY+"px;left:"+posX+"px;border:1px solid black;padding:5px'>div 1</div>");
</script>
</body>
</html>
[/CODE]

popup et div centrées

JavaScript

Vue hybride

Discussions similaires

Partager

Partager