(/me pense que la programmation évènementiel ne lui pose pas de problème conceptuel particulier, mais il peut se tromper)
Coucou Ter Rowan,
Dans notre cas, pas d'interférence avec d'autres évènements ... car il n'y a que mon traitement ^^.
par ailleurs, j'ai essayé de mieux comprendre :
Je me suis basé sur des fonctionnalités simple offerte par la documentation.
Ainsi, j'ai repris le code souflé précédement:
http://api.jquery.com/queue/
auquel j'ai rajouté 2 élément pour modifier le contenu du Html.
Ce qui m'avait bien surpris, c'est que le code html est interprété immédiatement, alors que le animation sont traités séquentiellement dans une file d'attente. En utilisant des fonctions, on constate alors des phénomènes assez étranges :
Bref ... il faut que je trouve une autre méthode pour gérer mon texte.
Je pense que finalement, je vais faire 1 div par distinctions, que j'afficherais les uns à la suite des autres ... Je vois pas comment contourner mon problème.
Dommage ^^.
kéké, toujours la volonté d'avancer...
Coucou,
j'ai finalement opté pour la dernière solution, malgré le mal que j'en disais. le code est plus simple, plus beau certains diront. Il est fonctionnel.
Je reste néanmoins sur un sentiment d'echec ... bha, ça ne fera qu'un apriori de plus la prochaine fois que je ferais du javascript ^^.
Peut-être manque-t-il juste une animation qui modifierait le html d'un objet du DOM ?
Je ne sais pas ... mais il faut que j'avance sur mon jeu ... arf.
Si certains veulent des commentaires sur la manière dont j'ai traité le sujet, ca sera avec plaisir ^^.
kéké
Coucou Ter Rowan,
Dans notre cas, pas d'interférence avec d'autres évènements ... car il n'y a que mon traitement ^^.
par ailleurs, j'ai essayé de mieux comprendre :
Je me suis basé sur des fonctionnalités simple offerte par la documentation.
Ainsi, j'ai repris le code souflé précédement:
http://api.jquery.com/queue/
Code :
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; } </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").html("debut du test");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").html("fin du test");
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>auquel j'ai rajouté 2 élément pour modifier le contenu du Html.
Ce qui m'avait bien surpris, c'est que le code html est interprété immédiatement, alors que le animation sont traités séquentiellement dans une file d'attente. En utilisant des fonctions, on constate alors des phénomènes assez étranges :
Code :
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; } </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow", deux() );
}
function deux() {
$("div").html("debut du test");
$("div").animate({left:'+=200'},2000, trois() );
}
function trois() {
$("div").slideToggle(1000, quatre() );
}
function quatre() {
$("div").slideToggle("fast", cinq() );
}
function cinq() {
$("div").animate({left:'-=200'},1500, six() );
}
function six() {
$("div").hide("slow", sept() );
}
function sept() {
$("div").show(1200, huit() );
}
function huit() {
$("div").html("fin du test");
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>Bref ... il faut que je trouve une autre méthode pour gérer mon texte.
Je pense que finalement, je vais faire 1 div par distinctions, que j'afficherais les uns à la suite des autres ... Je vois pas comment contourner mon problème.
Dommage ^^.
kéké, toujours la volonté d'avancer...
Coucou,
j'ai finalement opté pour la dernière solution, malgré le mal que j'en disais. le code est plus simple, plus beau certains diront. Il est fonctionnel.
Code :
<!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.
var liste_div = '';
// 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(3000, function() { // 5000 = 5 secondes
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 ;
liste_div = '';
// pour chaque élément, on créé un div
for (i = 0; i < nb_distinction; i ++ )
{
liste_div += '<div id="num_distinction'+i+'" style="display:none;" >Ligne'+i + ' : Le sage : ' + tableau_data[i].nom_joueur + ' a reçu la distinction ' + tableau_data[i].nom_distinction + '</div>';
}
// ce message est à titre informatif ... il disparaitra par la suite
$("#tableau_dynamique").html(liste_div);
$("div#num_distinction0").show(500);
for (i = 1; i < nb_distinction; i ++ )
{
// $("div#num_distinction"+i).hide(500);
}
compteur = 0;
}
);
}
else
{
if (compteur + 1 < nb_distinction )
{
$("div#num_distinction"+(compteur+1)).show(500);
$("div#num_distinction"+compteur).delay(1000);
$("div#num_distinction"+compteur).hide(500);
}
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>
</body>
</html>Je reste néanmoins sur un sentiment d'echec ... bha, ça ne fera qu'un apriori de plus la prochaine fois que je ferais du javascript ^^.
Peut-être manque-t-il juste une animation qui modifierait le html d'un objet du DOM ?
Je ne sais pas ... mais il faut que j'avance sur mon jeu ... arf.
Si certains veulent des commentaires sur la manière dont j'ai traité le sujet, ca sera avec plaisir ^^.
kéké