Div apparition fun

Soyez le premier à donner votre avis sur cette source.

Vue 16 212 fois - Téléchargée 1 181 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

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
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
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...
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.
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
Afficher les 19 commentaires

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.