Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DIV APPARITION FUN


Information sur la source

Catégorie :Trucs Amusants Classé sous : animation, apparition, fun, mouvement Niveau : Débutant Date de création : 25/01/2008 Date de mise à jour : 28/01/2008 17:06:11 Vu / téléchargé: 9 152 / 641

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note


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

  • <!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>
<!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
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

28 janvier 2008 17:06:12 :
Une version v2 dans le zip avec le clique à l'exterieur du div qui ferme la fenêtre. Mais c'est un peut du bricolage, donc j'ai laissé ma première source dans la zone source...

Commentaires et avis

signaler à un administrateur
Commentaire de Deny le 28/01/2008 08:39:39

Pas mal...
Ajoute une disparition en cliquant sur le fond d'écran.
Plus facile qu'en cliquant sur le X.

Note : 6

signaler à un administrateur
Commentaire de mickaelpfr le 28/01/2008 11:35:06 10/10

Effet super sympa :)
Code à améliorer mais pas mal :)

signaler à un administrateur
Commentaire de lassie14 le 28/01/2008 12:09:49

tres sympa petit script
mais il manque un peu de css pour etre plus jolie
et le clique ailleur pour fermer peut etre sympa aussi
sinon tres bon script

signaler à un administrateur
Commentaire de abdoulax le 28/01/2008 15:52:51

Pour le CSS, c'est à vous de le faire (sur le site pour lequel j'ai réalisé ce script, c'est très jolie :d). En effet je pourrais mettre un evenement lorsque l'on click à l'exterieur du div...

mickaelpfr, je veux bien améliorer le code mais en quoi ?

signaler à un administrateur
Commentaire de lassie14 le 28/01/2008 16:29:45

c'est vrai pour le css
mais pour le clique a l'exterieur je veut bien que tu l'implemente parceque perso j'aimerai bien mais je ne sais pas faire

signaler à un administrateur
Commentaire de abdoulax le 28/01/2008 17:18:18

Sa y'est j'ai fait un petit truc, mais un peu mal codé... Voir dans le zip

signaler à un administrateur
Commentaire de lassie14 le 29/01/2008 01:02:55

merci je vois que ça marche tres bien sous firefox mais pas sous ie
pourquoi dis tu que c'est du bricolage?
dommage que ça marche pas sous ie

signaler à un administrateur
Commentaire de abdoulax le 29/01/2008 08:39:56

En faite j'ai même pas essayé sous IE. Je dis que c'est du bricolage, car j'ai pas trop réfléchit en le faisant...

Have fun

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 15:50:15

j'utilise ajax pour chargement de quelques info sur ma page depuis la base de donné et j'utelise ce scripte dans la meme page mais cette instruction
this.flush = function (action)
me fait un grand souci , elle empêche le chargement de mes information. je sais pas comment sortire de ce probleme merci de votre aide

signaler à un administrateur
Commentaire de abdoulax le 06/02/2008 16:02:55

Il faudrait plus de détails pour t'aider!!

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 17:20:41

ok voila j'ai un div dans ma page qui permet via ajax d'afficher dés le chargement de la page des donné . et dans cette meme page j'ai un lien a droite qui me permet d'affichet une fenetre avec apparition fun en utilisant ce script , alors la dés que je charge la page je trouve pas mes donné qui s'affiche via ajax (ils ont pas chargé ) il ya une conffusion entre ce script et ajax
j'ai meme pas ni des variable ni des fonctions qui ont le meme nom entre ce script et mon script ajax pour evité de conflit.
je sais pas d'ou vien le probleme . si j'elimine ce script mes donné s'affiche de nouveau

signaler à un administrateur
Commentaire de abdoulax le 06/02/2008 17:26:13

t'as regardé window.onload... ?

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 17:32:52

logiquement le probleme ce vien de ca window.onload parceque mes doneés ce charge via un apel de la fonction ShowPage
<body onLoad="ShowPage("mes parmetre")>
j'ai pas bien compris le conflie

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 17:45:53

si je rendre cette partie de code comme commentaire
/*window.onload = function() {
if ( obj=document.getElementById("JsLogin") )
{
ObjLogin=new anim1("ObjLogin", "JsLogin",400,300);
}
}*/
il aura l'affichage de mes donnés mes la fenetre ne s'apparut pas
esque ce code s'execute avec le chargement de la page ?
comment faire svp je suis perdut

signaler à un administrateur
Commentaire de abdoulax le 06/02/2008 18:19:34

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

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 18:44:04

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.

signaler à un administrateur
Commentaire de abdoulax le 06/02/2008 18:52:57

Oula mais ce tu veux faire ne doit pas être fait en php !! Tu dois utiliser JS...

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 18:53:04

good ca marche maintenant avec chargement merci bp abdoulax de votre aide et de ce sympa code
bravo

signaler à un administrateur
Commentaire de karimflashmx le 06/02/2008 18:55:17

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

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Javascript - apparition du script lorsque l'internaute quitte le site - [ par Michette ] Hello,J'ai trouvé modifié un script de manière à adresser une formule de politesseà l'intenaute selon l'horaire de la journée (bonsoir, bonne soirée,. Apparition d'un message comme Messenger de hotmail (en javascript) ? [ par dragontn ] Bonjour à tous et à toutes,J'aimerais savoir si quelqu'un a en stock le code (en JavaScript) pour faire apparaitre un message à la manière du messenge chargement dans cadre différent à la fin d'une animation [ par zygene ] bonjour,je souahite charger un menu dans un cadre de gauche, une fois que l'animation flash du cadre principal est terminée...euh, comment faire? (sac du flash dans un fichier .JS [ par bernard09 ] Salut.Je cherche à inserer les lignes d'appel d'une animation flash dans un fichier .JS pour pouvoir ensuite lancer l'animation sur plusieurs page et animation flash [ par nico606 ] Slt g un problème g une animation flash sur mon mon site mais je n'ai pas le logiciel flash.Alors si vous l'avez je vous envoie mon fichier en fete je pbm avec window.open [ par matoo ] bonjour,j'ai une animation flash contenant des boutons, appelant des popup.swf à l'aide d'un : getURL("javascript:popup('anim1.swf','popup',',left Une [image] fixe qui suis la souris [ par ptitsky ] Bonjour à tous ,Mon pb :Je voudrai faire qu'une image suivent le mouvement de la souris, mais, que un bout de cette meme image reste au meme endroit.E lien html / flash ? [ par pistoff ] Voila mon problème:j'ai une animation flash qui commence dans une premiere page html... et j'aimerais qu'en passant sur une deuxieme page html la meme Passer des variables dans <param> ? [ par WhiteMagus ] Salut.Je fais un site en Flash, mais j'aimerai que l'animation se repoitionne avec une animation au centre de la page si celle-ci est redimensionnée. Class Defilement auto d'images avec animation [ par MeTh ] Je suis sur d'etre pret du but et je suis &#233;galement convaincu que ce script peut servir &#224; bcp de personne. Ceci ma premi&#232;re tentative


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,421 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.