11525 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour,

Je lutte sur un scroll ...

J'ai une liste composée de n div class=monDiv

Je souhaite faire descendre les div un par un pour faire apparaitre le suivant par le haut.

J'ai bien trouvé du jQuery mais :

1. Je dois pouvoir afficher plusieurs div dans le div global
2. Cela doit aller VERS LE BAS
3. Je ne pux connaitre à l'avance la hauteur de mes div monDiv

Je n'arrive pas à adapter ça Smiley decu

Merci pour votre aide.
Pour compléter ma question, ma fonction est ok (enfin quasi lol). Mes div descendent bien.

Mais pas dans le bon ordre !!!

En fait, il descend le dernier, puis l'avant dernier, puis l'avant avant dernier, etc. Mais sans descendre EN MEME TEMPS à nouveau le dernier, l'avant dernier, etc. Ce qui fait qu'ils sont tout les uns au dessus des autres ...

Voici ma fonction :

<script type="text/javascript">
    var UnFlux_count;
    var current_UnFlux=0;

    $(document).ready(function(){
      UnFlux_count = $("div.UnFlux").size();
      $("div.UnFlux:eq("+current_UnFlux+")").css('top', '5px');
      setInterval(UnFlux_rotate,2000); //time in milliseconds
    });

    function UnFlux_rotate() {
      old_UnFlux = current_UnFlux % UnFlux_count;
      new_UnFlux = ++current_UnFlux % UnFlux_count;
      $("div.UnFlux:eq(" + old_UnFlux + ")").css('marginTop', '+=50px');
      $("div.UnFlux:eq(" + new_UnFlux + ")").show().animate({top: '+=50'},"slow");     
    }
    </script>


Je pense qu'il ne manqua pas grand chose ...
Bonjour scots,

"Scots" a écrit :
Je lutte sur un scroll ...
tu voulais dire contre un TROLL ! Smiley biggol

J'avais le même problème avec les pages glissantes. J'ai placé toutes mes boites dans un conteneur mais pour me positionner sur une boite en particulier, je procédais de la façon suivante :
deplace: function (node)
{
	var xx = document.getElementById("boite" + node.toString());

	this.suivX = xx.offsetLeft;
	this.suivY = xx.offsetTop;

	window.scrollTo(this.suivX, this.suivY);

}
Le "node" est une numéro allant de 1 à 9 dans mon cas. Donc chaque boite ou je devrais plutôt dire chaque <div id="boitex"> est identifié par le nom boite1 ... boite9.

Je récupère les offsetWidth et offsetHeight de la boite et j'utilse la fonction scrollTo pour me positionner. Et puis ça marche !

@+
Modifié par Artemus24 (24 Jun 2011 - 22:23)
vu ... un Troll yes ! Smiley cligne

Mais toi, tu connaissais à l'avance le nombre de div que tu allais afficher si je pige bien ...

Pas moi ... Et c'est bien là mon soucis ...

Donc pour moi pas de div mais une class.

Ca fonctionne mais tout ne descend pas en même temps.

il descend 1, 2, 3, 4, etc. puis descend d'un nouveau cran 1, 2, 3, 4 etc. Ce qui fait que mes div sont toujours par dessus les uns des autres.

Je voudrais que TOUT descende d'un cran ...

Bien entendu tout ceci est dans un DIV global.

Code de mon DIV GLOBAL :


                        <div id="flux-contenu">
                            <asp:Repeater id="DlFlux" runat="server" DataSourceID="SQLFlux">
                                <ItemTemplate>
                                    <%# AfficheFlux(Eval("media"), Eval("id"), Eval("source"), Eval("date_insertion"), Eval("titre"), Eval("texte"), Eval("chapeau"), Eval("url"), Eval("user"))%>
                                </ItemTemplate>
                            </asp:Repeater>
                            <asp:SqlDataSource id="SQLFlux" runat="server" ProviderName="<%$ ConnectionStrings:medCS.ProviderName %>" SelectCommandType="StoredProcedure" ConnectionString="<%$ ConnectionStrings:medCS %>" SelectCommand="flux_de">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="nomLabel" DefaultValue="" Name="personnage" PropertyName="Text" Type="String" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                        </div>


Bien entendu tout mon code fonctionne. En sachant que en outre, il faudrait que ça boucle et ça va être dans un updatepanel pour recharger la requête Smiley cligne etc. etc.

Ma class "UnFlux" est le DIV global du HTML que je génère en c# (fonction AfficheFlux).
Bonjour Scots,

je suis encore débutant en WEB. Petite remarque me concernant, je ne connais que le Javascript !

Je récapitule ta demande pour bien formuler le problème :

1) toutes les boites que tu désires manipuler sont identifiées par "class="monDiv".
2) toutes les boites ont une largeur et hauteur spécifique qu'il faut conserver.
3) tu désires placer chaque boite dans un conteneur global "class="global".
4) tu désires placer la nouvelles boites (????) au sommet de l'affichage et décaler vers le bas les autres boites.
5) tu désires appliquer de nouveaux styles.

J'envisage le traitement suivant :

a) une fonction déplacer() sera appelée lors de la détection d'un nouveau div de class="monDiv".
b) au départ la div globale est vide, et à chaque fois, tu viendras écraser le contenu de la div globale.
c) tu rempliras la div class="global" avec toutes les div class="monDiv".
d) et le must, les dernières div class"=monDiv" seront placées au début. Autrement dit, on tri les class="monDiv" en sens inverse de l'ordre de présentation dans la class="global".
e) pour bien illustrer la remise à zéro de la class="global", la fonction deplace_bis() vient insérer une div class="autre" juste pour la supprimer ensuite.

Je pense que j'ai résolu ton problème d'affichage. La solution : il faut passer par les fonctions natives appendChild, removeChild sinon cela ne fonctionne pas car j'ai fait le test.

Voici le code HTML pour cet exercice :
<html>
<head>
<title>test</title>
<style type="text/css">
body {		background-color		: grey;		}

/*---------------------------------------------------------------*/
/*     le conteneur "global" et les nouveaux styles "commun"     */
/*---------------------------------------------------------------*/

#global {
			background-color		: yellow;
			position				: absolute;
			top						: 50px;
			left					: 50px;
			width					: 1000px;
}

.commun {
			float					: left;
			display					: block;
}

/*-------------------------------------------------------*/
/*     les spécificités pour chaque boite à déplacer     */
/*-------------------------------------------------------*/

#ailleurs {	display					: none;		}

.monDiv {
			background-color		: red;

			margin					: 25px;
			border					: 3px solid black;
			padding					: 25px;
}

/*-------------------------------------------------*/
/*     les spécificités de la boite "nullpart"     */
/*-------------------------------------------------*/

#nullpart {	display					: none;		}

.autre {
			background-color		: green;

			margin					: 25px;
			border					: 3px solid black;
			padding					: 25px;
}


</style>

<script language="javascript" type="text/javascript">
window.onload = function ()
{
	deplace_bis();
	deplace();
}

/*=======================================================*/
/*     on insert une boite pour ensuite la supprimer     */
/*=======================================================*/

function deplace_bis()
{
	var nodeFather = document.getElementById("global");
	var nodeChild  = document.getElementsByClassName("autre");

/*--------------------------------------------*/
/*     Extraction de la div class="autre"     */
/*--------------------------------------------*/

	var k = nodeChild.length - 1;

	for (var j=k; j>=0; j--)
	{
		nodeFather.appendChild(nodeChild.item(k));

		nodeFather.lastChild.className = "autre commun";
	}
}

/*===========================================================*/
/*     on déplace les boites de "ailleurs" vers "gloval"     */
/*===========================================================*/

function deplace()
{
	var nodeFather = document.getElementById("global");
	var nodeChild  = document.getElementsByClassName("monDiv");

/*---------------------------------------------------*/
/*     Remise à zéro du conteneur class="global"     */
/*---------------------------------------------------*/

	while (nodeFather.firstChild)
	{
	nodeFather.removeChild(nodeFather.firstChild);
	}

/*---------------------------------------------*/
/*     Extraction de la div class="monDiv"     */
/*---------------------------------------------*/

	var k = nodeChild.length - 1;

	for (var j=k; j>=0; j--)
	{
		nodeFather.appendChild(nodeChild.item(k));

		nodeFather.lastChild.className = "monDiv commun";
	}
}
</script>

<body>
<div id="global"></div>

<div id="ailleurs">
	<div class="monDiv"><h1>Boite un</h1><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite deux</h1><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite trois</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite quatre</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite cinq</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite six</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite sept</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite huit</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite neuf</h1><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p><p>bla bla bla</p></div>
</div>

<div id="nullpart">
	<div class="autre"><h1>boite zero</h1><p>bla bla bla</p></div>
	<div class="autre"><h1>boite null</h1><p>bla bla bla</p></div>
</div>
</body>
</html>


Ah oui, je n'ai pas fait cela en cinq minutes, mais c'était un bon exercice de manipulation des fonctions natives que je ne connaissais pas.

@+
Modifié par Artemus24 (25 Jun 2011 - 18:40)
Superbe !

Je vais tester cela asap Smiley smile

Par contre, une correction :

Dans ton point 2) : Ma largeur est fixe mais la hauteur de mes boites n'est quasiment JAMAIS le même ...

Ton code fonctionnera t'il ?

Je te dirais ça après mes tests Smiley cligne
Bon, désolé, mais ça ne marche pas chez moi Smiley decu même en rajoutant le </head> qui manquait lol.

Je n'ai qu'un grand bloc jaune avec des boites rouges en "fer à cheval" ouvert à gauche Smiley decu
bonsoir scots,

j'ai fait les tests sur mozilla firefox ! Sur les autres navigateurs cela fonctionne aussi.

Mais pas sur MSIE 8.0. J'ai, sous ce navigateur, le même résultat sans JS/Script.js

Le cœur du traitement repose sur les fonctions removeChild() et appendChild() qui respectivement supprime un enfant et ajout en fin de tableau un enfants.

Ici les enfants sont les boites de class="monDiv".

mais tu utilises quel navigateurs ?

@+
Modifié par Artemus24 (25 Jun 2011 - 21:07)
Une erreur de ; à la colonne 1863 ... J'ai un peu de mal à cette heure à le trouver lol ...

Juste AVANT le f de function pour moi (j'ai ton code sur une ligne arghh !)

function deplace_bis() {     var nodeFather = document.getElementById("global");     var nodeChild  = 
Bonsoir Scots,

je viens de corriger les anomalies sous MSIE 8.0. En fait il s'agit du getElementByClassName qui ne fonctionne pas sous MSIE 8.0.

Je t'explique un peu le fonctionnement de cette exercice.

Au départ, le conteneur "global" est vide. Je place dedans les boites venant du conteneur "nullpart" ayant comme class="autre". On dira que c'est la situation précédente avant l'apparition d'une nouvelle boite de class="monDiv".

Je détruis le contenu du conteneur "global". C'est la fonction suppress() qui réalise cela !

Ensuite, comme je pars d'un conteneur "global" vide, ce sera plus propre pour la suite.

Je recopie depuis le conteneur "ailleurs" toutes les boites de class="monDiv". Mais l'ordre est inversée. Dans le conteneur ailleurs, l'ordre va de boite1 vers boite9. Le résultat dans le conteneur "global" sera de boite9 vers boite1 afin d'avoir le plus récent en haut de la liste.

Maintenant pourquoi a-t-on une présentation en fer à cheval ?

Ce n'est pas une erreur. Les boites du conteneur "ailleurs" ont toutes des tailles différentes car c'est fait exprès. Le conteneur "global" contient un alignement qui va de gauche à droite et de haut en bas. Si tu ne désire pas cela, alors le changement est simple à faire. Voici le style de la propriété class="commun" avant la modification :
.commun {
			float					: left;
			display					: block;
}


et après la modification :
.commun {
			display					: block;
}


Et maintenant le code javascript que j'ai adapté aussi à MSIE 8.0. J'espère que cela va fonctionner aussi sous MSIE 9.0 .
window.onload = function ()
{
	deplace("autre",  "global");
	suppress("global");
	deplace("monDiv", "global");
}

/*===========================================================*/
/*     Suppression des boites dans le conteneur "global"     */
/*===========================================================*/

function suppress(tag)
{
	var nodeFather = document.getElementById(tag);

	while (nodeFather.firstChild)
	{
		nodeFather.removeChild(nodeFather.firstChild);
	}
}

/*==============================*/
/*     Insertion des boites     */
/*==============================*/

function deplace(depuis, vers)
{
	var nodeFather = document.getElementById(vers);
	var nodeChild  = document.getElementsByTagName("div");

/*----------------------------------------------------*/
/*     Extraction de toutes les div class="autre"     */
/*----------------------------------------------------*/

	while (true)
	{
		var test = false;

		for (var j=(nodeChild.length - 1); j>=0; j--)
		{
			if (nodeChild.item(j).className == depuis)
			{
				nodeFather.appendChild(nodeChild.item(j));

				nodeFather.lastChild.className = depuis + " commun";
				test = true;
				break
			}
		}

		if (!test) break;
	}
}


Désolé si j'ai mis autant de temps, je suis encore débutant en la matière.

Maintenant, j'espère que tu sauras adapter cet exemple à ton code jquery !

@+
Modifié par Artemus24 (25 Jun 2011 - 23:00)
Bon, j'ai corrigé mais j'ai toujours du mal à piger Smiley smile

Je crois qu'il est un peu tard et je regarderais demain matin à la fraiche Smiley cligne

Je te tiens au courant. Merci bien en tout cas.
Well, bonjour bonjour ...

Bon, la page est au carré, plus d'erreur sous IE9 ou FF4.

Par contre, j'ai un peu de mal à voir comment animer tout ça. Faire descendre les blocs ensemble suivant un delay et que ça boucle.

Si tu as une piste. En tout cas, ton code est bien propre.
Bonjour Scots,

as-tu passé une bonne nuit sur ton problème ?

Bon ! Maintenant, nous avons déplacé toutes les boites dans un conteneur qui se nomme "global". Nous avons une liste (des boites) inversée par rapport au conteneur d'origine.

J'ai un doute ! As-tu besoin d'une liste inversée ? E qu'est-ce que tu entends par "animer" et faire "boucler" ?

As-tu une petite fenêtre où tu désires afficher disons trois boites verticalement et par la suite, disons quelques secondes plus tard afficher les trois suivantes et ainsi de suite jusqu'en bas de ta liste, et puis recommencer ainsi de suite ?

Ça ressemble a un carrousel de diapositives mais appliqué à des boites.

Est-ce cela ?

@+
Bien dormi et toi ?

Quasi un carousel. Un fil news plutot.

Ma boite 1 s'affiche en haut puis 2 secondes (exemple) plus tard, la boite 2 descend en "poussant vers le bas" la 1, puis la 3 descend en poussant la 1 et la 2 vers la bas, etc. jusqu'à la plus récente.

L'idée étant que la 1 revienne après la plus récente car sur certaines pages je n'aurais que très peu de boites et sur d'autres un grand nombre.

Tu vois l'idée ?
compris le "bug" ...

J'ai mis ça :


<script type="text/javascript">
    $(document).ready(function() {
        $('#monDiv').delay(2000).animate({marginTop:'+=50px'},{duration:2000});
    });   
</script>


Mais cela ne peut s'appliquer qu'à un ID et non à une classe.

En tout cas, je ne sais pas faire Smiley decu
Bonjour Scots,

j'ai fait ce que j'ai pu, mais je ne suis pas arrivé à faire un manège (carousel in english) au niveau d'un div. Je ne sais même pas si on peut le faire car je n'ai pas trouvé la fonction "scrollTo" ailleurs qu'au niveau "window". Donc le manège reste au niveau de la "body".

Bon j'arrête là car je suis à cours d'idées pour poursuivre. Voici les trois codes mise à jour et définitif de mon intervention :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
<script language="javascript" type="text/javascript" src="JS/Show_Props.js"></script>
<script language="javascript" type="text/javascript" src="JS/Script.js"></script>
</head>

<body>
<div id="global"></div>

<div id="ailleurs">
	<div class="monDiv"><h1>Boite un</h1>		<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite deux</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite trois</h1>	<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite quatre</h1>	<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite cinq</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite six</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite sept</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite huit</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
	<div class="monDiv"><h1>Boite neuf</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p>
												<p>bla bla bla</p></div>
</div>

<div id="nullpart">
	<div class="autre"><h1>boite zero</h1>		<p>bla bla bla</p></div>
	<div class="autre"><h1>boite null</h1>		<p>bla bla bla</p>
												<p>bla bla bla</p></div>
</div>
</body>
</html>
html {		overflow				: hidden;	}
body {		background-color		: grey;		}

/*---------------------------------------------------------------*/
/*     le conteneur "global" et les nouveaux styles "commun"     */
/*---------------------------------------------------------------*/

#global {
			background-color		: yellow;
			position				: absolute;
			top						: 50px;
			left					: 50px;
			width					: 1000px;
			height					: 5000px;
}

.commun {	display					: block;	}

/*-------------------------------------------------------*/
/*     les spécificités pour chaque boite à déplacer     */
/*-------------------------------------------------------*/

#ailleurs {	display					: none;		}

.monDiv {
			background-color		: red;

			margin					: 25px;
			border					: 3px solid black;
			padding					: 25px;
}

/*-------------------------------------------------*/
/*     les spécificités de la boite "nullpart"     */
/*-------------------------------------------------*/

#nullpart {	display					: none;		}

.autre {
			background-color		: green;

			margin					: 25px;
			border					: 3px solid black;
			padding					: 25px;
}
window.onload = function ()
{
	/*----------------------------------------------*/
	/*     le Remplissage du conteneur "global"     */
	/*----------------------------------------------*/

	deplace("nullpart", "autre",  "global");
	suppress("global");
	deplace("ailleurs", "monDiv", "global");

	/*-----------------------------------------------*/
	/*     Initialisation et Lancement du Manège     */
	/*-----------------------------------------------*/

	manege.init(5, 9, 1000);
	manege.lancer();
};

/********************************/
/*                              */
/*     Le Manège des Boites     */
/*                              */
/********************************/

var manege = {

delay: null,
time: 0,

posit: 0,
nbBoite: 0,

/*========================*/
/*     Initialisation     */
/*========================*/

init: function (rang, nbr, temps)
{
	this.posit		= parseInt(rang);
	this.nbBoite	= parseInt(nbr);
	this.time		= parseInt(temps);
},

/*===============================*/
/*     on affiche les boites     */
/*===============================*/

afficher: function ()
{
	var xx = document.getElementById('global').getElementsByTagName('div');

	/*----------------------------------------------------*/
	/*     Positionnement en haut de la boite 'posit'     */
	/*----------------------------------------------------*/

	for (var i=0; i < xx.length; i++)
	{
		if (xx.item(i).className.substring(0,6) == "monDiv")
		{
			if (this.posit == i)
			{
				var posX = xx.item(i).offsetLeft;
				var posY = xx.item(i).offsetTop;

				window.scrollTo(posX, posY);
			}
		}
	}

	/*--------------------------------------*/
	/*     On passe à la boite suivante     */
	/*--------------------------------------*/
	
	this.posit++;
	if (this.posit > this.nbBoite)	this.posit = 0;	
},

/*===================================*/
/*     on fait tourner le manège     */
/*===================================*/

lancer: function ()
{
	window.clearInterval(this.delay);
	this.delay = window.setInterval("manege.afficher()", this.time);
},

/*=============================*/
/*     on arrete le manège     */
/*=============================*/

stopper: function ()
{
	window.clearInterval(this.delay);
	this.delay = null;
}

};

/*===========================================================*/
/*     Suppression des boites dans le conteneur "global"     */
/*===========================================================*/

function suppress(tag)
{
	var nodeFather = document.getElementById(tag);

	while (nodeFather.firstChild)
	{
		nodeFather.removeChild(nodeFather.firstChild);
	}
}

/*==============================*/
/*     Insertion des boites     */
/*==============================*/

function deplace(de, par, vers)
{
	var nodeFather = document.getElementById(vers);
	var nodeChild  = document.getElementById(de).getElementsByTagName('div');

/*----------------------------------------------------*/
/*     Extraction de toutes les div class="autre"     */
/*----------------------------------------------------*/

	for (var j=(nodeChild.length - 1); j>=0; j--)
	{
		if (nodeChild.item(j).className == par)
		{
			nodeFather.appendChild(nodeChild.item(j));
			nodeFather.lastChild.className = par + ' commun';
		}
	}
}


J'espère que tu trouveras la solution à ton problème !

Bonne chance.
Artemus24.
En fait, ça fonctionne si je mets un "id="PlusRecent" sur la dernière boite (la plus récente).

Mais comme je ne connais pas à l'avance le nombre de boites ...

Ou ajouter une boite "en dur" avec juste du vide ?..

En tout cas ça ne fera pas boucler Smiley decu
Merci beaucoup pour ton aide même si je sèche encore Smiley decu

Tu inclus deux fichiers JS, où puis-les trouver ?
Purée !!!

Yes ton dernier code marche !!! T trop fort Smiley smile

Par contre, si tu peux me dire ou on paramètre le sens de l'affichage ?..

En fait c'est nickel mais dans l'autre sens lol
Pages :