Voici un petit script que j'ai réalisé pour afficher le formulaire d'authentification sur un site qui va bientôt sortir.
Source / Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta name="author" content="abdoulax" />
<style>
#JsLogin{
background: #67A8EA;
position: absolute;
top: 0;
left:0;
border: 2px solid #296CB3;
overflow: hidden;
padding: 5px;
display: none;
}
#JsLogin #loginClose{
text-align: center;
background: #FFF;
color: #296CB3;
font-weight: bold;
float: right;
cursor: pointer;
border: 1px solid #296CB3;
width: 14px;
}
</style>
</head>
<body >
<div onclick='ObjLogin.start(); return false;'>Start</div>
<div id="JsLogin">
<div id='loginClose' onclick='ObjLogin.end(); return false;'>X</div>
<p><input type="text" name="login" id="jform3_login" value=""/></p>
<p><input type="text" name="login" id="jform3_login" value=""/></p>
<p><input type="text" name="login" id="jform3_login" value=""/></p>
</div>
<script type="text/javascript">
window.onload = function() {
if ( obj=document.getElementById("JsLogin") )
{
ObjLogin=new anim1("ObjLogin", "JsLogin",400,300);
//~ document.body.appendChild(obj);
}
}
function anim1(_myName, _id, _width, _height) {
//Variable de la classe
this.myName =_myName;
this.id =_id;
this.xCur =0;
this.yCur =0;
this.xEnd =0;
this.yEnd =0;
this.wCur =0;
this.hCur =0;
this.wEnd =_width;
this.hEnd =_height;
this.continu =false;
this.timer =null;
this.cmd ="";
//Méthode de la classe
this.start= function() {
if (document.all) {
winX=screen.width;
winH=screen.height;
}
else {
winX=window.innerWidth;
winH=window.innerHeight;
}
this.xEnd=((winX-this.wEnd)/2);
this.yEnd=((winH-this.hEnd)/2);
document.getElementById(this.id).style.display="block";
this.cmd ="";
this.startLoop();
};
this.end = function() {
this.cmd ='document.getElementById(this.id).style.display="none";';
this.endLoop();
};
this.startLoop = function() {
this.continu=false;
this.calc("wCur+", ( this.wCur < this.wEnd ));
this.calc("hCur+", ( this.hCur < this.hEnd ));
this.calc("xCur+", ( this.xCur < this.xEnd ));
this.calc("yCur+", ( this.yCur < this.yEnd ));
this.flush("startLoop");
};
this.endLoop = function () {
this.continu=false;
this.calc("wCur-", ( this.wCur > 0 ));
this.calc("hCur-", ( this.hCur > 0 ));
this.calc("xCur-", ( this.xCur > 0 ));
this.calc("yCur-", ( this.yCur > 0 ));
this.flush("endLoop");
};
this.flush = function (action) {
if ( this.continu )
{
document.getElementById(this.id).style.left=this.xCur + "px";
document.getElementById(this.id).style.top=this.yCur + "px";
document.getElementById(this.id).style.width=this.wCur + "px";
document.getElementById(this.id).style.height=this.hCur + "px";
this.timer=setTimeout(this.myName + "." + action + "()",20);
}
else
eval(this.cmd);
};
this.calc = function (action, cond) {
if ( cond )
{
eval(this.myName + "." + action + "=40");
this.continu=true;
}
};
}
</script>
</body>
</html>
Conclusion :
Have fun
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.