Salut !
Alors, j'ai un peu avancé mais ça marche toujours pas ! J'ai un peu modifié le code alors je redonne tout :
Voici le fichier index.html pour tester :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script LANGUAGE="Javascript" src="pop-in.js"></script>
<h1>First page</h1>
<p>Launching of the pop-in...</p>
<p>laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />
SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />
SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />SCROLL<br />
</p>
</body>
</html>
Voici le fichier pop-in.js pour afficher la pop-in:
document.write('<div "id="popin">');
document.write('content of my pop-in');
document.write('</div>');
var wtx = (document.body.clientWidth);
var htx = (document.body.clientHeight);
var wtx2=((wtx-325)*0.5);
var htx2= ((htx-400)*0.5);
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all :d.layers ;
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;
this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX("popin", -wtx2, htx2).floatIt();
//JSFX("popin", -wtx2*1.7, -htx2*5.5).floatIt();
Voici le fichier style.css pour donner un style à la pop-in :
#popin
{
position : absolute ;
border : 2px solid red;
background-color : blue ;
margin:0;
width : 325px ;
height : 400px ;
}
Pour rappel, je veux que ma pop-in arrive avec une animation, qu'elle soit centrée (et toujours centrée, même en redimmensionnant la fenêtre du navigateur).
La dernière ligne du fichier pop-in.js, c'est là où est le problème et donc peut-être la solution. Quand je change les deux dimensions, c'est là qu'on observe des changements. L'appel de la fonction comme ceci : JSFX("popin", -wtx2, htx2).floatIt(); a l'air de plus ou moins marcher mais ma pop-in n'est pas centré ! Par contre elle reste toujours aux mêmes positions du navigateur, peu importe si on le redimmensionne ou pas. Et si on met wtx2 et pas -wtx2, là la pop-in est centrée, mais pas quand je redimmensionne.
Voilà où j'en suis. Alors, si quelqu'un arrive à la fois à la centrer, même en cas de redimmensionnement, et avec l'animation, je suis preneur !
Romain
Modifié par rom117 (09 May 2010 - 22:45)
!