IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

fonction pour message d'alerte


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut fonction pour message d'alerte
    Salutation a tous

    je me fabrique une ptite fonction pour faire un display des évènements dans un intranet (sauvegarde, chargement ect ect ect ...)

    Comme je veut que le message apparaisse en haut a droite, et que si plusieurs message viennent en 'même' temps, ceux-si ce décale vert le bas

    j'arrive pratiquement au résultat voulut ... mais...

    Lors de l'apparition d'un nouveau message 'décalé', le mouvement des supérieurs premier s'arrête.
    De plus j'ai mis un timeout pour que le message disparaisse au bout de 2 sec .. et .. il faut bien disparaitre le dernier, mais fais une erreur ensuite .. et les supérieurs reste ...

    voici mon code ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
     
    var    flyingSpeed = 2;
    var    yTop=0;
    var    xRight=-170;
    var xTarget=-20;
    var oAlert = {
        creat:function(msg){
            var oBox = document.createElement('DIV');
            var eBox = oBase.get('.alerte');
            oBox.className = 'alerte';
            oBox.id = 'a'+Math.round(Math.random()*10000);
            if(eBox.length > 0){
                oBox.style.top = (eBox.length * 20) +'px';
            }
            else{
                oBox.style.top = yTop+'px';
            }
            oBox.style.position = 'absolute';
            oBox.style.right = xRight+'px';
            oBox.style.display = 'block';
            oBox.innerHTML = msg;
            document.body.appendChild(oBox);
            moving = xRight;
            oAlert.display(oBox.id);
        },
        display:function(id){
            var mBox = oBase.get('#'+id)[0];
            var moving = parseInt(mBox.style.right.split("p")[0]) + flyingSpeed;
            mBox.style.right = moving + 'px';
            if(moving > xTarget){
                box = id;
                setTimeout("oAlert.destruct(box)",2000);
            }
            else if(oBase.get('#'+id)[0].style.display=='block'){
                box = id;
                setTimeout("oAlert.display(box)",5);
            }
        },
        destruct:function(dBox){
            document.body.removeChild(dBox);
        }
    };
    Merci de prendre un peu de temps pour m'aider


    edit : balise code

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    essaye :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    box = id;
                setTimeout("oAlert.display("+box+")",5);

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    essaye :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    box = id;
                setTimeout("oAlert.display("+box+")",5);
    non ... marche pas.... la bouche de déplacement ne s exécute même plus

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    quels sont les messages d'erreurs que tu as sous FF ou ie ??

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    http://www.cds-profil.ch/test/alerte.cfm

    surement plus simple a comprendre lorsque l'on vois de quoi l'on parle.

    Les 2 problèmes majeur sont l'arrêt des messages lorsque l'on lance plusieurs fois la fonction...
    (cliquer sur le lien plusieurs fois)

    Et après 2000ms les messages devraient disparaitre ... mais la ... seul le dernier disparait (avec le timeout du premier) et après il y a une erreur qui dit en gros .. qu'il trouve pas ce qu'il doit supprimer.

    Donc en fait .. il semble que chaque fois que l'on lance la fonction, il utilise la même 'session' mais avec un nouvel objet div ... je suis pas un champion du monde de JS, mais je croit avoir cerner le problème comme ça ..
    maintenant pour le résoudre .. plus dur.

    merci

  6. #6
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    tout a fait tu as plutot bien cerné le problème ,
    solution :
    créer une instance de ton objet a chaque appel , et les stockées dans un tableau avec un identifiant unique pour toute les 2000ms pouvoir parcourir ton tableau et les supprimer.

    à la création de ton objet , tu devra appeler SA méthodes et non la méthode globale pour lancer une alert

    j'espère avoir été clair , sinon je te ferais un exemple assez simple que tu pourras utiliser , sur la gestion objet en javascript

  7. #7
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    tout a fait tu as plutot bien cerné le problème ,
    solution :
    créer une instance de ton objet a chaque appel , et les stockées dans un tableau avec un identifiant unique pour toute les 2000ms pouvoir parcourir ton tableau et les supprimer.

    à la création de ton objet , tu devra appeler SA méthodes et non la méthode globale pour lancer une alert

    j'espère avoir été clair , sinon je te ferais un exemple assez simple que tu pourras utiliser , sur la gestion objet en javascript
    Bien, je suis content d'avoir cerné le problème ...
    Maintenant, je suis preneur d'un exemple de creation et d'utilisation d'instance d'objet, je ne sais vraiment pas du tout comment faire cela ..
    Mais j'apprends vite .. un exemple basic m'aiderais bien
    merci

  8. #8
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
    	var Voiture = function (couleur){
    		this.couleur = couleur;
    		this.id = couleur; // pour l'exemple simple on utilisera la couleur comme id ;)
    		this.QuelleCouleur = function (){
    			alert('la voiture est : ' + couleur);
    		}
    	}
     
    	var MonTableau = new Array(); // le tableau qui contiendra les objets
    	//JE suis plutôt partisant de créer une méthode qui gère une collection plutôt qu'un simple tableau mais bon
    	//ce n'est pas le propos de l'exemple donc nous verrons cela peut-être plus tard :)
     
    	//création d'un nouvel objet :
    	MonTableau.push(new Voiture('jaune'));
    	MonTableau.push(new Voiture('rouge'));
    	//On vérifit la taille du tableau 
    	alert(MonTableau.length);
     
    	//On affiche la couleur des voitures 
    	for(var i = 0 , l = MonTableau.length; i < l ; i++){
    		//Appel de la méthode 'QuelleCouleur' de l'objet voiture
    		var VoitureTemp = MonTableau[i] ;
    		VoitureTemp.QuelleCouleur() ;
    	}
     
    </script>
    </head>
     
    <body>
    </body>
    </html>
    pour générer des id unique tu peux utiliser la fonction time.
    pour gèrer tes timers une fois les objets créés de cette façon il seront tous unique a l'objet et tu n'auras donc plus de problème

  9. #9
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    pour générer des id unique tu peux utiliser la fonction time.
    pour gèrer tes timers une fois les objets créés de cette façon il seront tous unique a l'objet et tu n'auras donc plus de problème
    Huu .. bon bon bon .. j'essai

  10. #10
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    Aie aie aie ..
    Je suis totalement dans les choux ..
    Je ne parvient pas a adapter mon script la dessus ...

    J'ose te demander un peu d'aide la dessus ?

    mon dernier script 'qui fonctionne en date :
    http://www.cds-profil.ch/test/alerte.cfm

  11. #11
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    je pense que tu devrais changer ta méthode de suppression et de création

    => une méthode de suppression de tous tes objets ( en passant un le tableau d'objet )
    => méthode de suppression propre a l'objet

    ici tu appels a chaque fois la méthode create de ton unique objet , crée une "collection" :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    //!Important ! variable globale
    var TableauMesObjets = new Array();
     
    var oAlert = {
    	creat:function(msg){
    		var oBox = document.createElement('DIV');
    		var eBox = oBase.get('.alerte');
    		oBox.className = 'alerte';
    		oBox.id = 'a'+Math.round(Math.random()*10000);
    		oBox.style.top = (eBox.length * 20) +'px';
    		oBox.style.position = 'absolute';
    		oBox.style.width = '0px';
    		oBox.style.display = 'block';
    		oBox.innerHTML = msg;
    		document.body.appendChild(oBox);
    		oAlert.display(oBox.id);
    	},
    	display:function(id){
    		var mBox = oBase.get('#'+id)[0];
    		var groving = parseInt(mBox.style.width.split("p")[0]) + 10;
    		mBox.style.width = groving + 'px';
    		mBox.style.right = '0px';
    		if(groving > 150){
    			box = id;
    			setTimeout("oAlert.destruct(box)",1000);
    		}
    		else{
    			box = id;
    			setTimeout("oAlert.display(box)",1);
    		}
    	},
    	destruct:function(id){
    		var i;
    		var eBox = oBase.get('.alerte');
    		for (i=0;i<eBox.length;i++){
    			document.body.removeChild(eBox[i]);
    		}
    	}
    };
     
    function CreateObjet(){
    	//Ajout de l'objet dans le tableau
    	TableauMesObjets.push(new oAlert);
    	//Récupération de celui-ci
    	var dernierObjet = TableauMesObjets[TableauMesObjets.length];
    	//Appel de la méthode pour créer l'alert
    	dernierObjet.creat('coucou'+TableauMesObjets.length);
    }
    basé sur ton code actuel

    il reste quand même le problème de la suppression puisque ici :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setTimeout("oAlert.destruct(box)",1000);
    tu fais appel a la méthode destruct "globale" tu ne référencie pas la méthode destruct de ton objet , il faudrait soit créer une méthode externe a ton objet qui permet de parcourir le tableau "TableauMesObjets" et appeler la méthode destruct de chaque objet !
    sois supprimer uniquement l'objet lui même ! dans la méthode destruct ce qui ferait que chaque obet créé aurai une durée de vide de 1 secondes ...

    voila voila

  12. #12
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    je vais me pencher la dessus avec bonheur

    merci .. je te redit dans pas long

  13. #13
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    Bien ..
    Je crois que je suis a moiter bon ..
    mais je vois pas de résolution de mon problème ...

    Ou me trompe-je ?

    http://www.cds-profil.ch/test/alerte2.cfm

    merci encore

  14. #14
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    ^^

    ta méthode de gestion d'objet doit être externe !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    	function nouveauMessage(msg){
    		aMsg.push(new oAlert);
    		var lMsg = aMsg[aMsg.length];
    lMsg.build(msg);
    		document.body.appendChild(lMsg);
    		lMsg.display(lMsg);
    	}
    a peu prèss ...
    je te ferais un exemple complet demain , mais , il te faut une méthode globale pour gérer des objets, la tu essayes de gérer tout a partir d'un seul objet et ce n'est pas possible

  15. #15
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut
    j'apprends au fur et a mesure des besoin

    une méthode globale dit-tu ?

    Bon oui, d'accord, moi je veut bien ...
    Du moment que ça fais ce que j'ai besoin

    merci de prendre ce temps pour moi, je me réjouit de voir ça demain

  16. #16
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    et voila , il m'a fallut 1h30 pour te pondre cet exemple complet fonctionnel
    j'ai un peu commenté le code , il n'est pas très complexe a comprendre , basé sur les timer , les objets , ainsi que les "collections" en javascript je pense qu'il pourrait aider certaines personnes

    on pourrait améliorer la gestion du timer que je ne stoppe pas pour chaque objet mais bon la gestion des objets fonctionne , a voir si tu souhaites mettre le nez dedans

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
     
    // ##########  Mon objet ##########
    function MonObjet(){
    		this.timer = null ;
    		this.couleur = null;
    		this.dureeDeVie = null;
    		this.id = new Date().getTime();
     
    		this.AddDiv = function (){
    			var d = document;
    			var NewDiv =	d.createElement('div');
    			//( un peu barbare mais bon  ;) )
    			NewDiv.style.backgroundColor = this.couleur;
    			NewDiv.style.width = "200px";
    			NewDiv.innerHTML = "Durée de vie restante : " + this.dureeDeVie;//this.dureeDeVie ;
    			NewDiv.id = this.id ;
    			var contener  = document.getElementById('MesObjets');
    			//On ajoute l'item en tout premier
    			contener.appendChild(NewDiv);
    		}
     
    		this.Destruction = function (){
    					var contener  = document.getElementById('MesObjets');
    					if(document.getElementById(this.id)){
    						var aSupprimer  = document.getElementById(this.id);
    						contener.removeChild(aSupprimer);		
    						document.getElementById('debug').innerHTML += "<br /> Objet : "  + this.id + " vient d'être tué :'( ";
    					}
    					else{
    						document.getElementById('debug').innerHTML += "<br /> Objet : "  + this.id + " est déja mort :'( ";
    					}
    		}
     
    		this.autoDestruction = function (){
    				if(this.dureeDeVie == 0){
    					this.Destruction();
    				}
    				else{
    					this.dureeDeVie -= 1;
    					var moiDiv  = document.getElementById(this.id);
    					var moiObjet = this ;
    					moiDiv.innerHTML = "Durée de vie restante : " + this.dureeDeVie;
    					setTimeout(function(moiObjet) { moiObjet.autoDestruction(); },1000,this);
    				}
    		}
     
    		this.Initialiser = function (MaCouleur, MaDureeDeVie, AutoDestruct){
    			this.timer = null ;
    			this.couleur = MaCouleur;
    			this.dureeDeVie = MaDureeDeVie;
    			//alert(this.id);
    			this.AddDiv();
    			//Si l'objet est en autodestruction
    			if(AutoDestruct){
    				this.autoDestruction();
    			}
    		}
     
     
    }
    // ##########  Fin de mon objet ##########
     
    //Ma collection d'objets
    var MesObjetsCollection = new Array();
    var TimeLimit = null;
    var timerGlobale = null;
    //Fonction permettant de gérer ma collection
    function AjouterObjetCollection(couleur,dureeVie,autodestruction){
    	MesObjetsCollection.push(new MonObjet());
    	var ObjetTemp = MesObjetsCollection[MesObjetsCollection.length-1] //Forcément le dernier ^^
    	ObjetTemp.Initialiser(couleur,dureeVie,autodestruction);
    	//Si pas d'autodestruction on appel la méthode DestrucAll()
    	if(!autodestruction){
    		TimeLimit = dureeVie;
    		clearTimeout(timerGlobale);
    		DestructAll();
    	}
    }
     
    //Fonction permettant de supprimer tous les objets a un interval donné quelque soit leur durée de vie
    function DestructAll(){
    	if(TimeLimit == 0){
    		//alert("La destruction globale commence \n"+"Nombre d'objet à détruire : "+MesObjetsCollection.length);
    		var contener  = document.getElementById('MesObjets');
     
    		for(i = 0,  l = MesObjetsCollection.length ; i < l ; i++){
     
    			var ObjetTemp = MesObjetsCollection[i] //Forcément le dernier ^^
    			if(ObjetTemp.dureeDeVie != 0){
    				ObjetTemp.dureeDeVie = 0 ;
    				ObjetTemp.Destruction();
     
    			}
    		}
    	}
    	else{
    		TimeLimit--;
    		document.getElementById('TimeLimite').innerHTML = TimeLimit;
    		timerGlobale = setTimeout('DestructAll()',1000);
    	}
    }
     
    </script>
    </head>
     
    <body>
    <div id="MesObjets" style="width:300px; text-align:center; border:1px solid red;position:relative;">
    <div id="TimeLimite" style="position:absolute;top:1px;right:-35px; border:1px solid green;width:30px;height:30px;">
    </div>
    </div>
     
    <div id="debug" style="width:300px; position:absolute;right:10px;top:10px; border:1px solid #666">
    </div>
     
    <h4>Objet en auto destruction INDIVIDUELLE</h4>
    <a href="#" onclick="AjouterObjetCollection('red',5,true)">Ajouter un objet rouge ( 5 secondes )</a><br />
    <a href="#" onclick="AjouterObjetCollection('green',10,true)">Ajouter un objet vert ( 10 secondes )</a><br  />
    <a href="#" onclick="AjouterObjetCollection('yellow',20,true)">Ajouter un objet jaune ( 20 secondes )</a><br />
    <hr />
    <a href="#" onclick="alert(MesObjetsCollection.length);">Combien d'objets?</a><br />
    <h4>Objet en auto destruction Globale <br /><span style="font-size:9px">(On prend comme durée de vie celle du dernier objet créé)</span></h4>
    <a href="#" onclick="AjouterObjetCollection('red',5,false)">Ajouter un objet rouge ( 5 secondes )</a><br />
    <a href="#" onclick="AjouterObjetCollection('green',10,false)">Ajouter un objet vert ( 10 secondes )</a><br  />
    <a href="#" onclick="AjouterObjetCollection('yellow',20,false)">Ajouter un objet jaune ( 20 secondes )</a><br />
    </body>
    </html>

  17. #17
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut Whaooo
    Alors la .. mille merci ..
    Je me plonge dedans de suite ..
    et je te redit comme j'ai 'adapter' cela a mon cas dans .. j espere aujourd'hui si je comprend tout

  18. #18
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    juste une précision envoyé par spaffy , il y a des bug sous ie6 du a la gestion du settimeout je regarderais cet apm

  19. #19
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    voila les modifications : testé ie6/7 et FF

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
     
    // ##########  Mon objet ##########
    function MonObjet(){
    		this.timer = null ;
    		this.couleur = null;
    		this.dureeDeVie = null;
    		this.id = new Date().getTime();
     
    		this.AddDiv = function (){
    			var d = document;
    			var NewDiv =	d.createElement('div');
    			//( un peu barbare mais bon  ;) )
    			NewDiv.style.backgroundColor = this.couleur;
    			NewDiv.style.width = "200px";
    			NewDiv.innerHTML = "Durée de vie restante : " + this.dureeDeVie;//this.dureeDeVie ;
    			NewDiv.id = this.id ;
    			var contener  = document.getElementById('MesObjets');
    			//On ajoute l'item en tout premier
    			contener.appendChild(NewDiv);
    		}
     
    		this.Destruction = function (){
    					var contener  = document.getElementById('MesObjets');
    					if(document.getElementById(this.id)){
    						var aSupprimer  = document.getElementById(this.id);
    						contener.removeChild(aSupprimer);		
    						document.getElementById('debug').innerHTML += "<br /> Objet : "  + this.id + " vient d'être tué :'( ";
    					}
    					else{
    						document.getElementById('debug').innerHTML += "<br /> Objet : "  + this.id + " est déja mort :'( ";
    					}
    		}
     
    		this.autoDestruction = function (){
    				if(this.dureeDeVie == 0){
    					this.Destruction();
    				}
    				else{
    					this.dureeDeVie -= 1;
    					var moiDiv  = document.getElementById(this.id);
    					var moiObjet = this ;
     
    					moiDiv.innerHTML = "Durée de vie restante : " + this.dureeDeVie;
    					setTimeout(Get_RefFonction(moiObjet,"autoDestruction"),1000);
    				}
    		}
     
    		this.Initialiser = function (MaCouleur, MaDureeDeVie, AutoDestruct){
    			this.timer = null ;
    			this.couleur = MaCouleur;
    			this.dureeDeVie = MaDureeDeVie;
    			//alert(this.id);
    			this.AddDiv();
    			//Si l'objet est en autodestruction
    			if(AutoDestruct){
    				this.autoDestruction();
    			}
    		}
     
     
    }
    // ##########  Fin de mon objet ##########
     
    function Get_RefFonction( objet, fonction){
    	return( function(){objet[fonction]()});
    }
     
    //Ma collection d'objets
    var MesObjetsCollection = new Array();
    var TimeLimit = null;
    var timerGlobale = null;
    //Fonction permettant de gérer ma collection
    function AjouterObjetCollection(couleur,dureeVie,autodestruction){
    	MesObjetsCollection.push(new MonObjet());
    	var ObjetTemp = MesObjetsCollection[MesObjetsCollection.length-1] //Forcément le dernier ^^
    	ObjetTemp.Initialiser(couleur,dureeVie,autodestruction);
    	//Si pas d'autodestruction on appel la méthode DestrucAll()
    	if(!autodestruction){
    		TimeLimit = dureeVie;
    		clearTimeout(timerGlobale);
    		DestructAll();
    	}
    }
     
    //Fonction permettant de supprimer tous les objets a un interval donné quelque soit leur durée de vie
    function DestructAll(){
    	if(TimeLimit == 0){
    		//alert("La destruction globale commence \n"+"Nombre d'objet à détruire : "+MesObjetsCollection.length);
    		var contener  = document.getElementById('MesObjets');
     
    		for(i = 0,  l = MesObjetsCollection.length ; i < l ; i++){
     
    			var ObjetTemp = MesObjetsCollection[i] //Forcément le dernier ^^
    			if(ObjetTemp.dureeDeVie != 0){
    				ObjetTemp.dureeDeVie = 0 ;
    				ObjetTemp.Destruction();
     
    			}
    		}
    	}
    	else{
    		TimeLimit--;
    		document.getElementById('TimeLimite').innerHTML = TimeLimit;
    		timerGlobale = setTimeout('DestructAll()',1000);
    	}
    }
     
    </script>
    </head>
     
    <body>
    <div id="MesObjets" style="width:300px; text-align:center; border:1px solid red;position:relative;">
    <div id="TimeLimite" style="position:absolute;top:1px;right:-35px; border:1px solid green;width:30px;height:30px;">
    </div>
    </div>
     
    <div id="debug" style="width:300px; position:absolute;right:10px;top:10px; border:1px solid #666">
    </div>
     
    <h4>Objet en auto destruction INDIVIDUELLE</h4>
    <a href="#" onclick="AjouterObjetCollection('red',5,true)">Ajouter un objet rouge ( 5 secondes )</a><br />
    <a href="#" onclick="AjouterObjetCollection('green',10,true)">Ajouter un objet vert ( 10 secondes )</a><br  />
    <a href="#" onclick="AjouterObjetCollection('yellow',20,true)">Ajouter un objet jaune ( 20 secondes )</a><br />
    <hr />
    <a href="#" onclick="alert(MesObjetsCollection.length);">Combien d'objets?</a><br />
    <h4>Objet en auto destruction Globale <br /><span style="font-size:9px">(On prend comme durée de vie celle du dernier objet créé)</span></h4>
    <a href="#" onclick="AjouterObjetCollection('red',5,false)">Ajouter un objet rouge ( 5 secondes )</a><br />
    <a href="#" onclick="AjouterObjetCollection('green',10,false)">Ajouter un objet vert ( 10 secondes )</a><br  />
    <a href="#" onclick="AjouterObjetCollection('yellow',20,false)">Ajouter un objet jaune ( 20 secondes )</a><br />
    </body>
    </html>

  20. #20
    Candidat au Club
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2008
    Messages : 13
    Points : 2
    Points
    2
    Par défaut Et bien j'y suis presque
    HÉ HÉ c'est du grand art ce que tu m'as fais ...
    merci mille fois ...

    me reste un 'petit' soucis dans ce que je fais ...
    http://www.cds-profil.ch/test/alerte3.cfm

    Comme tu peu le voir .. le texte ne suit pas la boite ...

    Une idée ?

    Pour le reste .. j'ai mis 2-3 heures a tout décortiquer pour comprendre comment ça marche ... maintenant .. je pense que j'ai compris

    Bien sur si tu vois une faute grossière ... hésite pas.

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Appeler une fonction pour lancer une alerte javascript
    Par beegees dans le forum Langage
    Réponses: 1
    Dernier message: 09/01/2009, 16h10
  2. Message d'alerte que pour les gens connecté sur le portail
    Par oudrhiri dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 04/04/2008, 15h31
  3. Réponses: 2
    Dernier message: 25/05/2006, 13h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo