begin process at 2012 02 11 05:12:27
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > DIV APPARITION FUN

DIV APPARITION FUN


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :13 726 / 1 015
Auteur : abdoulax

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent 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...

 Sources du même auteur

Source avec Zip MINI MOTEUR DE TEMPLATE
Source avec Zip BANNIÈRE, DIAPORAMA, FONDU, AJAX
Source avec Zip Source avec une capture VUE 360° SIMPLE
Source avec Zip Source avec une capture SIMPLE ACCUEIL ANIMÉ
Source avec Zip Source avec une capture MENU DYNAMIQUE DÉROULANT W3C
Toutes les sources de abdoulax

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture PUISSANCE 4 par 007Julien
Source avec Zip Source avec une capture DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES... par abdelaziz_info
Source avec Zip ANIMATION EN JAVA SCRIPT par abdelaziz_info

Commentaires et avis

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

Commentaire de mickaelpfr le 28/01/2008 11:35:06 10/10

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

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

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 ?

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

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

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

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

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

Commentaire de abdoulax le 06/02/2008 16:02:55

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

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

Commentaire de abdoulax le 06/02/2008 17:26:13

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

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

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

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

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.

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...

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

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...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 13,073 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)