Div apparition fun

Soyez le premier à donner votre avis sur cette source.

Vue 16 149 fois - Téléchargée 1 173 fois

Description

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

karimflashmx
Messages postés
16
Date d'inscription
jeudi 9 février 2006
Statut
Membre
Dernière intervention
6 février 2008
-
non le php est juste pour le renvoi de donné j'ai pas utilisé ce code en php , c'est une application a part
de toute facon ca marche enfin , merci
karimflashmx
Messages postés
16
Date d'inscription
jeudi 9 février 2006
Statut
Membre
Dernière intervention
6 février 2008
-
good ca marche maintenant avec chargement merci bp abdoulax de votre aide et de ce sympa code
bravo
abdoulax
Messages postés
875
Date d'inscription
samedi 17 mai 2003
Statut
Membre
Dernière intervention
22 juin 2012
-
Oula mais ce tu veux faire ne doit pas être fait en php !! Tu dois utiliser JS...
karimflashmx
Messages postés
16
Date d'inscription
jeudi 9 février 2006
Statut
Membre
Dernière intervention
6 février 2008
-
oui ca marche bien merci abdoulax
mais il me reste le probleme de flush je croi, parceque dans php j'ai arreter l'exuction de code pendant 1 seconde pour apparaitre l'effet de chargement d'une petite image gif avant l'affichage de mes donneés , mais dans ce cas pas de chargement, il ya un affichage directe c'est comme etant la fonction sleep(1) de php n'a pas etés prise en charge.
abdoulax
Messages postés
875
Date d'inscription
samedi 17 mai 2003
Statut
Membre
Dernière intervention
22 juin 2012
-
Tu vires ton onload du body et tu fais:

window.onload = function() {
if ( obj=document.getElementById("JsLogin") )
{
ObjLogin=new anim1("ObjLogin", "JsLogin",400,300);
}
ShowPage("mes parmetre");
}

Sa devrai marcher...

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.