Div apparition fun

Soyez le premier à donner votre avis sur cette source.

Vue 16 582 fois - Téléchargée 1 211 fois

Télécharger le projet
Commenter

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
Télécharger le projet

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
6 févr. 2008 à 18:55
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
6 févr. 2008 à 18:53
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 1
6 févr. 2008 à 18:52
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
6 févr. 2008 à 18:44
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 1
6 févr. 2008 à 18:19
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
S'inscrire maintenant

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.

Du même auteur (abdoulax)