JeuWeb Créez votre jeu par navigateur !

keke · 30-06-2010, 12:27 AM

Coucou,

J'ai mis à jour mon script pour essayer d'afficher les éléments les uns à la suite des autres ...
Mon but est dans une situation nominale donnée à savoir : 2 divs. le div 1 et le div 2. Div 1 donne des informations sur un joueur,Div 2 donne des informations sur le joueur suivant.

Sachant cela, mon objectif est de :
1°/ faire disparaitre Div 1 doucement (fonction slideUp).
2°/ Comme Div 1 a disparu, on peut modifier le texte qui le compose. Il prend ainsi les valeurs de Div 2.
3°/ On désaffiche dans un temps très cours Div 2 et on affiche Div1 à la place (pratiquement invisible à l'oeil nu).
4°/ On modifie le texte de Div 2 pour prendre les informations sur le joueur suivant.
5°/ On affiche doucement le Div 2 pour se remettre dans la situation nominal (fonction fadeIn)

Je me retrouve face à un comportement étrange à savoir :
Au premier passage, la div 1 est aplatie normalement. Mais au deuxième passage, elle reste apparente. Puis au troisième passage, elle est applatie. au quatrième passage elle reste apparente.
Ce qui est vraiment étrange, c'est que la fin de la boucle se termine par
$("#premier_element").show() ;
Qui devrait donc toujours afficher le premier div.

Si vous aviez une idée de là ou réside mon erreur ? Et du pourquoi, une fois sur 2, mon code ne se comporte pas correctement.

kéké
PS : un bout de code : // permet d'éviter un appel systèmatique à AJAX'
a été rajouté pour que l'AJAX ne soit solicité qu'une fois à chaque refresh de la page. Ce bout de code disparaitra par la suite ...
PS : j'affiche aussi le bout de code pour y réfléchir demain à tête reposée ^^.

La page de test n'a pas changée :
http://www.magdales.com/test_jquery_et_json.php

code côté client

Code PHP :
<?php 

<!doctype html>

<html>

  <head>

    <script type="text/javascript" src="./scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="./scripts/jquery.timers-1.2.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var compteur = -1;

    var nb_distinction = 5;

//    var texte_id_distinction = "";

    var tableau_data = new Array();

    tableau_data[0] = 'test'; // Pourquoi devons nous initier cette variable ??? En tous les cas firebug semble pas apprecier sans.

    // Cette boucle tourne toutes les 5 secondes. Son but, afficher une liste de joueur avec des distinctions. Les données sont récupéré au début via de l'AJAX. Lorsque toutes les informations sont affichées, on va rechercher de la nouvelle donnée.'

    $(document).everyTime(5000, function() { // 5000 = 5 secondes

        if (compteur >= nb_distinction) // permet d'éviter un appel systèmatique à AJAX'

        {

            compteur = 0;

        }

        if (compteur == -1 || compteur >= nb_distinction)

        {

            $.getJSON("ajax_liste_distinction_desc.php", {}, function(data) {

                // format result

                texte_id_distinction = "";

                tableau_data = data;

/*                texte_id_distinction = tableau_data.nb ;

                i = 2;

                texte_id_distinction = tableau_data[i].id_distinction_joueur ;*/

                nb_distinction = tableau_data.nb ;

                // ce message est à titre informatif ... il disparaitra par la suite

                $("#tableau_dynamique").html('<br>' + compteur + ' vs ' + nb_distinction + ' Recherche Information via AJAJSON . Nb résultat = ' +  tableau_data.nb + ' test = ' + tableau_data[0].id_distinction_joueur);

                compteur = 0;

                $("#premier_element").html('<BR> ori 1 Le sage : ' + tableau_data[compteur].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur].nom_distinction + '<br>');

                $("#deuxieme_element").html('<BR> ori 2 Le sage : ' + tableau_data[compteur+1].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur+1].nom_distinction + '<br>');

                $("#premier_element").show() ;

                $("#deuxieme_element").show() ;

                compteur =1 ;

            }

            );

        }

        else

        {

            $("#tableau_dynamique").html('<br> Traitement des données ! ' + compteur + ' vs ' + nb_distinction + ' Le sage : ' + tableau_data[compteur].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur].nom_distinction );

            $("#premier_element").slideUp(1000);

            $(document).delay(1000);

            $("#premier_element").hide() ;

            // Premier élément prend le texte du 2eme.

            $("#premier_element").html('<BR> 1 numéro ' + tableau_data[compteur].id_distinction_joueur  + ' Le sage  : ' + tableau_data[compteur].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur].nom_distinction + '<br>');

            // on échange la position de 1 et 2

            $("#premier_element").show() ;

//            $("#deuxieme_element").hide() ;

            // maintenant que 2 est caché, on écrit du texte dedans :

            if ( (compteur + 1) < nb_distinction)

            {

                $("#deuxieme_element").html('<BR> 2 numéro ' + tableau_data[compteur+1].id_distinction_joueur  + ' Le sage : ' + tableau_data[compteur+1].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur+1].nom_distinction + '<br>');

                // on affiche 2 tout doucement ...

                $("#deuxieme_element").fadeIn(2000);

                $("#deuxieme_element").delay(2000);

//                $("#premier_element").stop();

            }

            else

            {

                $("#deuxieme_element").html('<BR> Fin compteur !!! <br>');

            }

            compteur ++ ;

        }

    }); 

});

</script>

</head>

<body>

<h1>Page de test AJAX</h1>

<div id="tableau_dynamique">Info : Les quelques premières lignes seront pré-chargée en PHP. Ce bloc sera remplacé par Javascript dans quelques secondes.</div>

<div id="premier_element">toto a truc</div>

<div id="deuxieme_element">titi a chose</div>

</body>

</html>

**Ter Rowan** · 30-06-2010, 04:23 AM

n'utilisant pas jquery je ne peux pas tester mais t'es sûr que ce n'est pas simplement dû à tes différents timers ?

je m explique :

ta fonction se réalise toutes les 5000

au sein de ta fonction tu consommes des timers supérieurs à 5000 (enfin si j'ai bien compris les fonctions jquery qui ressemblent à ce que j'utilise) :

$("#premier_element").slideUp(1000);
$(document).delay(1000);
$("#deuxieme_element").fadeIn(2000);
$("#deuxieme_element").delay(2000);

soit 6000 ==> Tu n as pas fini la première fonction que tu en démarres une seconde (ou pas), dans tous les cas probable effet de bord visuel

maintenant, personnellement j'aurais créé autant de div que de distinction (a voir même pour en faire des <li> d'ailleurs si les effets sont possibles) et je les aurais afficher (avec ton aspect visuel) les uns après les autres. L'intérêt étant, en particulier avec la cible de Magdales, de pouvoir afficher toutes les données dans le cas des DV avec une bonne syntaxe (liste des distinctions) et de ne pas se prendre la tête avec le tour de passe passe entre 1 et 2 (mais bon si le nombre de distinction est important c'est pas mal aussi de ne garder que deux div pour éviter une multiplication d'éléments dynamiques dans le dom)

keke · 30-06-2010, 07:45 AM

Coucou Ter Rowan,

J'ai ré-essayé en réduisant les temps :
$("#premier_element").slideUp(1000);
$(document).delay(1000);
$("#deuxieme_element").fadeIn(1000);
$("#deuxieme_element").delay(1000);

Mais le problème reste inchangé.
J'avais par ailleurs mis les delay on imaginant que les effets ne se produisait pas séquentiellement. Ainsi, il me semble que javascript n'attend pas la fin du slideup pour lancer le delay.

Concernant les <li> j'ai eu la même reflexion. mettre 200 éléments masqués n'est pas la meilleur solution car justement le DV devra les passer un à un pour lire la suite ce qui n'a pas d'intérêt je pense. Par ailleurs les DV n'ont pas forcément de soucis avec les affichages qui s'automodifie, si c'est correctement fait.

Bon, merci pour la proposition.

kéké

**Sephi-Chan** · 30-06-2010, 10:07 AM

Ta solution réside plus dans l'utilisation des callbacks des effets. Exemple avec jQuery.slideToggle().
Dans le callback d'un masquage, tu affiches l'autres et tu remplaces le courant.

J'enrichis si besoin à mon retour.

Sephi-Chan

keke · 30-06-2010, 10:30 AM

(30-06-2010, 10:07 AM)Sephi-Chan a écrit : J'enrichis si besoin à mon retour.

Je veux bien. Je ne peux pas tester du boulot ...

La fonction call back permet de lancer (si j'ai bien compris) une autre animation à la fin de la première.
Le problème que je rencontre c'est que ces fonctions doivent se lancer à la fin de l'animation d'un autre élément. Je ne sais pas (au regard de la doc) si je peux le faire avec call back. Je testerais ce que j'en ai compris ce soir ^^. (c'est ma copine qui va me faire la gueule ...=)

* keke a réussi à faire garder une de ses filles jusqu'à Vendredi soir ^^ Youpi !

atra27 · (Modification du message : 30-06-2010, 10:34 AM par atra27.)

J'y pensait justemet, pourquoi ne pas faire apeller en callback les fonctions suivantes?

Code :
function prems() {

$("#premier_element").slideUp(1000,delayprems());

}

function delayprems() {

$(document).delay(1000,deus());

}

function deus(){

$("#deuxieme_element").fadeIn(1000,delaydeus());

}

function delaydeus(){

$("#deuxieme_element").delay(1000, ???);

}

prems();

C'est tapé a l'arrache, penser a mettre des noms de fonctions plus explicites...

keke · 30-06-2010, 11:22 AM

Ca pourrait marcher ... Je vous dirais ça ce soir.

Je viens de passer la matinée à lire un peu de documentation ... mais j'ai rien trouvé de plus probant que le bout de code que tu as mentionnés.

Je vous tiendrais évidement au courant. Par contre, je trouve dommage qu'il n'y ai pas une option qui dise ne pas passer à la commande suivante tant que l'animation n'a pas fini.

T'imagine si la programmation en général faisait pareil ? moi oui ^^, exemple ... :
Je veux faire une addition puis une multiplication :
$x = 3
$y = 4
$z = 0;

$z = $x + $y
$resultat = $z * 2

echo $resultat

Et hop, au lieu du résultat attendu = 14, on afficherait $resultat = 0. Ben oui, car l'addition $x + $y a pris trop de temps, alors on est passé à la ligne suivant $resultat = 0 * 2.

Ca serait vraiment désagréable ... Mais bon, passons. Je vous tiendras bien évidement au courant.

kéké
PS : je devrais peut-être scinder mon post ?

atra27 · (Modification du message : 30-06-2010, 11:56 AM par atra27.)

Peut étre qu'un découpage de sujet ferai pas de mal en effet car la on part plutot sur de la prog plutot qu'une réfléxion sur le language...

Et ensuite bah le javascript est pas orienté pour faire du procédural il me semble...
D'ou l'utilisation de nombreux callbacks dans les fonctions Jquery...

**Ter Rowan** · 30-06-2010, 01:50 PM

tu illustres très négativement ton affaire keke ^^

moi, je me dis plutôt que tu utilises des méthodes jquery qui peuvent, utilisées d'une certaine manière, te permettre de paralléliser peu ou prou différentes actions

c'est un peu le principe de l'ajax, la page n'est pas figée même si le chargement n'est pas terminé (asynchrone quoi)

$z=0;
$z = appelAjax($x) + appelAjax($y);
$z *= 2;
alert($z);

ouinnnn ça affiche 0

... ou pas si tu rend ton code synchrone.

Anthor · (Modification du message : 30-06-2010, 01:59 PM par Anthor.)

(30-06-2010, 11:22 AM)keke a écrit : Je viens de passer la matinée à lire un peu de documentation ... mais j'ai rien trouvé de plus probant que le bout de code que tu as mentionnés.

Je vous tiendrais évidement au courant. Par contre, je trouve dommage qu'il n'y ai pas une option qui dise ne pas passer à la commande suivante tant que l'animation n'a pas fini.

T'imagine si la programmation en général faisait pareil ? moi oui ^^

Oui mais jQuery n'est pas Javascript ^^ Et PHP n'est pas vraiment prévu pour faire de l'événementiel.

Par contre jQuery prend très bien en compte les queues d'animations, il faut juste utiliser la fonction animate au lieu d'utiliser les alias.

EDIT: La queue est par défaut alias ou pas, voir : http://api.jquery.com/queue/

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Un essai pour éviter la triche pour les jeux en javascript	Ter Rowan	20	9 473	04-03-2012, 09:30 PM Dernier message: Angelblade
	[Résolu][Rails] Utilisation de classe personnalisée pour la composition	Maz	13	6 206	29-09-2011, 08:21 PM Dernier message: Maz
	Sprite Cow pour simplifier l'utilisation de sprites CSS	Sephi-Chan	1	2 866	22-06-2011, 02:56 AM Dernier message: php_addict
	[ok]Javascript : utilisation des chaines de caractères	V1nc3	3	2 679	06-11-2007, 06:30 PM Dernier message: V1nc3