Affichage aléatoire de 4 div

**Erwan31** · 14/02/2012, 12h59

Bonjour,
je souhaiterais afficher 4 div aléatoirement (à chaque nouveau chargement de page) parmi 16 div.
Y a-t-il une fonction JS qui puisse faire ça? Un tuto?

**ticroch** · 14/02/2012, 13h51

ba ce serait plus cote serveur que tu fais ca, tu sélectionne tes 4 divs aléatoirement et tu les écrit sur l'output.

Sinon en JavaScript, il faut que tu caches tous tes divs sauf les 4 que tu choisis aléatoirement... pas génial comme méthode je trouve ..

**javatwister** · 14/02/2012, 14h26

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
<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
 
<style type="text/css">
 
div.alea {
	float:left;
	width:40px;
	height:40px;
	font-weight:bold;
	font-size:30px;
	text-align:center;
	border:1px solid;
	background-color:red;
}
 
#cadre {
	margin:100px;
}
 
</style>
 
 
 
</head>
<body>
 
<div id="cadre"></div>
 
<script type="text/javascript">
 
var tab=[], tab2=[], h, d;
 
for(j=0;j<16;j++){
	tab[j]=j
}
 
for(i=0;i<4;i++){
 
	h=Math.floor(Math.random()*tab.length);
	tab2[i]=tab[h];
	tab.splice(h,1)
	d=document.createElement("div");
	d.className="alea";
	d.appendChild(document.createTextNode(tab2[i]));
	document.getElementById("cadre").appendChild(d)
}
 
 
 
 
</script>
 
</body>
</html>

**Erwan31** · 14/02/2012, 18h07

Envoyé par javatwister

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
<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
 
<style type="text/css">
 
div.alea {
	float:left;
	width:40px;
	height:40px;
	font-weight:bold;
	font-size:30px;
	text-align:center;
	border:1px solid;
	background-color:red;
}
 
#cadre {
	margin:100px;
}
 
</style>
 
 
 
</head>
<body>
 
<div id="cadre"></div>
 
<script type="text/javascript">
 
var tab=[], tab2=[], h, d;
 
for(j=0;j<16;j++){
	tab[j]=j
}
 
for(i=0;i<4;i++){
 
	h=Math.floor(Math.random()*tab.length);
	tab2[i]=tab[h];
	tab.splice(h,1)
	d=document.createElement("div");
	d.className="alea";
	d.appendChild(document.createTextNode(tab2[i]));
	document.getElementById("cadre").appendChild(d)
}
 
 
 
 
</script>
 
</body>
</html>

Ok, merci c'est sympa mais ça ne fonctionne qu'avec des chiffre générés dynamiquement ici.
Or il se trouve que j'ai 16 LI (te non pas div) chacun avec un contenu unique (image+ texte). C'est à quel niveau que je dois agir? (je suis novice en JS)

PS: je ne peux faire ça qu'en JS et pas côté serveur.

**javatwister** · 14/02/2012, 18h28

par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("cadre").getElementsByTagName("li")[tab2[i]].style.display="block";

à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
d=document.createElement("div");
d.className="alea";
d.appendChild(document.createTextNode(tab2[i]));
document.getElementById("cadre").appendChild(d)

sachant que tes li sont tous écrits en dur dans le cadre "cadre", avec un display:none;

**Erwan31** · 15/02/2012, 01h45

Merci mais ça n'affiche aucun li. J'ai mis le display:none dans une CSS externe mais a priori je pense pas que le problème vienne de là?

J'ai essayé avec un autre 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
var randNum, boucle = 0;
 
var listImgLength = $('#temoi li').length;
 
 
 
while (boucle != 4) {
 
	randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
 
	if ($('#temoi li').eq(randNum-1).css('display') == 'none' ) {
 
		$('#temoi li').eq(randNum-1).show();
 
		boucle++;
 
	}
 
}

Mais ça marche pas non plus !

**javatwister** · 15/02/2012, 09h26

Merci mais ça n'affiche aucun li.

eh oui... ce sont des choses qui arrivent;

et tu veux vraiment pas montrer le html?

**Erwan31** · 15/02/2012, 10h16

Si voila

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
<!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" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15;charset=iso-8859-15" />
<meta name="description" content="" />
<link rel="stylesheet" href="http://portal.buzzee.fr/css/common.css" media="screen" />
<link rel="stylesheet" href="../css/screen.css" media="screen" />
<script type="text/javascript">
 
 var nbimage = 4;
 
	var listImgLength = $('#temoi li').length;
 
 
 
	while ($('#temoi li:visible').length <= nbimage)
 
	{
 
		var randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
 
		if( $('#temoi li').is(':hidden') )
 
		{
 
			$('#temoi li').eq(randNum-1).css('display','block');
 
		}
 
	}
 
/*var randNum, boucle = 0;
 
var listImgLength = $('#temoi li').length;
 
 
 
while (boucle != 4) {
 
	randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
 
	if ($('#temoi li').eq(randNum-1).css('display') == 'none' ) {
 
		$('#temoi li').eq(randNum-1).show();
 
		boucle++;
 
	}
 
}
 */
 
 
</script>
<style type="text/css" media="screen"></style>
</head>
 
<body id="features" class="corp">
<div id="wrapper">
	<div id="content">
		<div id="sidecol">
			<ul id="temoi">
				<li> <img src="../images/daniel.jpg" width="63" height="63" alt="" /> <b>Franchisé meilleurtaux.com</b> <span>Monsieur Daniel Barrafranca</span> <q> Buzzee : la gestion facile au quotidien. Avant d'utiliser Buzzee, je travaillais avec outlook que je ne trouvais pas très efficace en tant qu'outil&hellip; </q> <a href="/fr/temoignages/Barrafranca.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/abib.jpg" width="63" height="63" alt="" /> <b> Entreprise de services</b> <span>Mademoiselle Aziza Abib</span> <q> Gr&acirc;ce a Buzzee tout le monde travaille plus vite et mieux. Bien que nous ne soyons que 5, la mise en place de Buzzee dans notre entreprise a &eacute;t&eacute;&hellip; </q> <a href="/fr/temoignages/Abib.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/ircar.jpg" width="63" height="63" alt="" /> <b>Formation en management</b> <span>Monsieur Marc Roussel</span> <q> Ce que j'ai trouv&eacute; chez Buzzee France c'est une &eacute;coute du client qui se donne les moyens de rendre le client enthousiaste&hellip; </q> <a href="/fr/temoignages/Roussel.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/vanier.jpg" width="63" height="63" alt="" /> <b>Concepteur de média golf</b> <span>Monsieur Jean-Philippe Vanier</span> <q> Buzzee : l'outil parfait et indispensable Je d&eacute;veloppe mon business et je pensais initialement que mon site Internet serait suffisant pour&hellip; </q> <a href="/fr/temoignages/Vanier.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/descazeaux.jpg" width="63" height="63" alt="" /> <b>Communication et signalétique</b> <span>Monsieur Jean-Marc Descazeaux</span> <q> Avec Buzzee, j'ai trouv&eacute; un outil de CRM externalis&eacute; fiable, permettant un travail collaboratif intense et utilisable par l'ensemble&hellip; </q> <a href="/fr/temoignages/Descazeaux.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/falce.jpg" width="63" height="63" alt="" /> <b>Droit social</b> <span>Madame Odile Falce</span> <q> Je n'aurais jamais imagin&eacute;, pour ce prix, avoir une solution rendant autant de services ! Nous &eacute;tablissons des payes et charges sociales pour des&hellip; </q> <a href="/fr/temoignages/Falce.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/fouquat.jpg" width="63" height="63" alt="" /> <b>TéléSecrétariat</b> <span>Madame Anne-Gaëlle Fouquat</span> <q> Buzzee est un produit tr&egrave;s performant, g&eacute;r&eacute; par une &eacute;quipe de professionnels tr&egrave;s &agrave; l'&eacute;coute. Je travaille sur Mac et mes collaboratrices&hellip; </q> <a href="/fr/temoignages/Fouquat.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/fradet.jpg" width="63" height="63" alt="" /> <b>Camping international</b> <span>Monsieur Rolland Fradet</span> <q> Buzzee : une plate-forme commune de communication et de formation, un esp&eacute;ranto dans une entreprise. Buzzee nous a permis de&hellip; </q> <a href="/fr/temoignages/Fradet.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/fregonese.jpg" width="63" height="63" alt="" /> <b>Laboratoire en cosmétologie</b> <span>Madame Alexandra Fregonèse</span> <q> Buzzee : Le pivot de ma soci&eacute;t&eacute;. En 2005, je n'&eacute;tais pas particuli&egrave;rement en recherche d'un nouvel outil, mais quand j'ai re&ccedil;u le mail&hellip; </q> <a href="/fr/temoignages/Fregonee.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/gonzales.jpg" width="63" height="63" alt="" /> <b>Laboratoire cosmétique</b> <span>Madame Laurence Gonzalez</span> <q> Buzzee a consid&eacute;rablement am&eacute;lior&eacute; ma qualit&eacute; de vie. Avant d'utiliser Buzzee je rentrai fr&eacute;quemment apr&egrave;s 23h tous les soirs. Maintenant&hellip; </q> <a href="/fr/temoignages/Gonzalez.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/jardin.jpg" width="63" height="63" alt="" /> <b>Artiste textile</b> <span>Madame Martine Jardin</span> <q> Buzzee France : Une &eacute;quipe de professionnels qui sait se mettre &agrave; ma port&eacute;e pour me permettre de mieux travailler. Je ne suis pas une entreprise&hellip; </q> <a href="/fr/temoignages/Jardin.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/kadobjet.jpg" width="63" height="63" alt="" /> <b>Objets publicitaires</b> <span>Madame Sandrine Balaguer</span> <q> Buzzee : Un formidable outil de gestion et de suivi commercial Lorsque nous avons re&ccedil;u l'emailing de Buzzee, nous &eacute;tions en recherche d'un&hellip; </q> <a href="/fr/temoignages/Balaguer.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/lemoine.jpg" width="70" height="70" alt="" /> <b>Consultant Marketing</b> <span>Monsieur Georges Lemoine</span> <q> Buzzee est LA solution dont j'ai toujours r&ecirc;v&eacute; et que j'attendais depuis des ann&eacute;es. Au fil du temps, je me suis retrouv&eacute; avec des centaines&hellip; </q> <a href="/fr/temoignages/Lemoine.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/rachard.jpg" width="63" height="63" alt="" /> <b>Produits signal&eacute;tique</b> <span>Monsieur Pascal Rachard</span> <q> Buzzee nous a apport&eacute; un confort extraordinaire pour le suivi client. Cet outil r&eacute;actif est devenu un des socle de notre soci&eacute;t&eacute;, il est le premier&hellip; </q> <a href="/fr/temoignages/Rachard.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/rault.jpg" width="63" height="63" alt="" /> <b>Restaurateur</b> <span>Monsieur Jo&euml;l Rault</span> <q> Buzzee : Une fiabilit&eacute; et un gain de temps consid&eacute;rables.  En 2005 je me pr&eacute;occupais de faire &eacute;voluer mon entreprise vers des outils crm et, un email&hellip; </q> <a href="/fr/temoignages/Rault.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/roche.jpg" width="63" height="63" alt="" /> <b>Equipement de manutention</b> <span>Monsieur Florian Roche</span> <q> Buzzee : un outil du 21&egrave;me si&egrave;cle vraiment efficace dans la mise en place d'une d&eacute;marche de progr&egrave;s et d'efficacit&eacute;. Buzzee combine 2 fonctions&hellip; </q> <a href="/fr/temoignages/Roche.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/tulle.jpg" width="63" height="63" alt="" /> <b>Imprimerie</b> <span>Monsieur Sébastien Tulle</span> <q> Le couple Buzzee et eBay c'est de la bombe ! J'ai compl&egrave;tement relanc&eacute; mon activit&eacute; d'imprimerie en proposant mes services sur eBay&hellip; </q> <a href="/fr/temoignages/Tulle.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/william.jpg" width="63" height="63" alt="" /> <b>École Internationale</b> <span>Monsieur William Rubinstein</span> <q> Buzzee a redynamis&eacute; ma soci&eacute;t&eacute; en me faisant faire des &eacute;conomies. Lorsque j'ai d&eacute;couvert Buzzee, j'ai tout de suite &eacute;t&eacute; s&eacute;duit par l'approche&hellip; </q> <a href="/fr/temoignages/Rubinstein.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

**javatwister** · 15/02/2012, 11h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("temoi").getElementsByTagName("li")[tab2[i]].style.display="block";

aucune raison que tes li restent invisibles

**Willpower** · 15/02/2012, 11h48

Envoyé par Erwan31

Si voila

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
<!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" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15;charset=iso-8859-15" />
<meta name="description" content="" />
<link rel="stylesheet" href="http://portal.buzzee.fr/css/common.css" media="screen" />
<link rel="stylesheet" href="../css/screen.css" media="screen" />
<script type="text/javascript">
 
 var nbimage = 4;
 
	var listImgLength = $('#temoi li').length;
 
 
 
	while ($('#temoi li:visible').length <= nbimage)
 
	{
 
		var randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
 
		if( $('#temoi li').is(':hidden') )
 
		{
 
			$('#temoi li').eq(randNum-1).css('display','block');
 
		}
 
	}
 
/*var randNum, boucle = 0;
 
var listImgLength = $('#temoi li').length;
 
 
 
while (boucle != 4) {
 
	randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
 
	if ($('#temoi li').eq(randNum-1).css('display') == 'none' ) {
 
		$('#temoi li').eq(randNum-1).show();
 
		boucle++;
 
	}
 
}
 */
 
 
</script>
<style type="text/css" media="screen"></style>
</head>
 
<body id="features" class="corp">
<div id="wrapper">
	<div id="content">
		<div id="sidecol">
			<ul id="temoi">
				<li> <img src="../images/daniel.jpg" width="63" height="63" alt="" /> <b>Franchisé meilleurtaux.com</b> <span>Monsieur Daniel Barrafranca</span> <q> Buzzee : la gestion facile au quotidien. Avant d'utiliser Buzzee, je travaillais avec outlook que je ne trouvais pas très efficace en tant qu'outil&hellip; </q> <a href="/fr/temoignages/Barrafranca.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/abib.jpg" width="63" height="63" alt="" /> <b> Entreprise de services</b> <span>Mademoiselle Aziza Abib</span> <q> Gr&acirc;ce a Buzzee tout le monde travaille plus vite et mieux. Bien que nous ne soyons que 5, la mise en place de Buzzee dans notre entreprise a &eacute;t&eacute;&hellip; </q> <a href="/fr/temoignages/Abib.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/ircar.jpg" width="63" height="63" alt="" /> <b>Formation en management</b> <span>Monsieur Marc Roussel</span> <q> Ce que j'ai trouv&eacute; chez Buzzee France c'est une &eacute;coute du client qui se donne les moyens de rendre le client enthousiaste&hellip; </q> <a href="/fr/temoignages/Roussel.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/vanier.jpg" width="63" height="63" alt="" /> <b>Concepteur de média golf</b> <span>Monsieur Jean-Philippe Vanier</span> <q> Buzzee : l'outil parfait et indispensable Je d&eacute;veloppe mon business et je pensais initialement que mon site Internet serait suffisant pour&hellip; </q> <a href="/fr/temoignages/Vanier.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/descazeaux.jpg" width="63" height="63" alt="" /> <b>Communication et signalétique</b> <span>Monsieur Jean-Marc Descazeaux</span> <q> Avec Buzzee, j'ai trouv&eacute; un outil de CRM externalis&eacute; fiable, permettant un travail collaboratif intense et utilisable par l'ensemble&hellip; </q> <a href="/fr/temoignages/Descazeaux.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/falce.jpg" width="63" height="63" alt="" /> <b>Droit social</b> <span>Madame Odile Falce</span> <q> Je n'aurais jamais imagin&eacute;, pour ce prix, avoir une solution rendant autant de services ! Nous &eacute;tablissons des payes et charges sociales pour des&hellip; </q> <a href="/fr/temoignages/Falce.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/fouquat.jpg" width="63" height="63" alt="" /> <b>TéléSecrétariat</b> <span>Madame Anne-Gaëlle Fouquat</span> <q> Buzzee est un produit tr&egrave;s performant, g&eacute;r&eacute; par une &eacute;quipe de professionnels tr&egrave;s &agrave; l'&eacute;coute. Je travaille sur Mac et mes collaboratrices&hellip; </q> <a href="/fr/temoignages/Fouquat.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/fradet.jpg" width="63" height="63" alt="" /> <b>Camping international</b> <span>Monsieur Rolland Fradet</span> <q> Buzzee : une plate-forme commune de communication et de formation, un esp&eacute;ranto dans une entreprise. Buzzee nous a permis de&hellip; </q> <a href="/fr/temoignages/Fradet.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/fregonese.jpg" width="63" height="63" alt="" /> <b>Laboratoire en cosmétologie</b> <span>Madame Alexandra Fregonèse</span> <q> Buzzee : Le pivot de ma soci&eacute;t&eacute;. En 2005, je n'&eacute;tais pas particuli&egrave;rement en recherche d'un nouvel outil, mais quand j'ai re&ccedil;u le mail&hellip; </q> <a href="/fr/temoignages/Fregonee.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/gonzales.jpg" width="63" height="63" alt="" /> <b>Laboratoire cosmétique</b> <span>Madame Laurence Gonzalez</span> <q> Buzzee a consid&eacute;rablement am&eacute;lior&eacute; ma qualit&eacute; de vie. Avant d'utiliser Buzzee je rentrai fr&eacute;quemment apr&egrave;s 23h tous les soirs. Maintenant&hellip; </q> <a href="/fr/temoignages/Gonzalez.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/jardin.jpg" width="63" height="63" alt="" /> <b>Artiste textile</b> <span>Madame Martine Jardin</span> <q> Buzzee France : Une &eacute;quipe de professionnels qui sait se mettre &agrave; ma port&eacute;e pour me permettre de mieux travailler. Je ne suis pas une entreprise&hellip; </q> <a href="/fr/temoignages/Jardin.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/kadobjet.jpg" width="63" height="63" alt="" /> <b>Objets publicitaires</b> <span>Madame Sandrine Balaguer</span> <q> Buzzee : Un formidable outil de gestion et de suivi commercial Lorsque nous avons re&ccedil;u l'emailing de Buzzee, nous &eacute;tions en recherche d'un&hellip; </q> <a href="/fr/temoignages/Balaguer.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/lemoine.jpg" width="70" height="70" alt="" /> <b>Consultant Marketing</b> <span>Monsieur Georges Lemoine</span> <q> Buzzee est LA solution dont j'ai toujours r&ecirc;v&eacute; et que j'attendais depuis des ann&eacute;es. Au fil du temps, je me suis retrouv&eacute; avec des centaines&hellip; </q> <a href="/fr/temoignages/Lemoine.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/rachard.jpg" width="63" height="63" alt="" /> <b>Produits signal&eacute;tique</b> <span>Monsieur Pascal Rachard</span> <q> Buzzee nous a apport&eacute; un confort extraordinaire pour le suivi client. Cet outil r&eacute;actif est devenu un des socle de notre soci&eacute;t&eacute;, il est le premier&hellip; </q> <a href="/fr/temoignages/Rachard.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/rault.jpg" width="63" height="63" alt="" /> <b>Restaurateur</b> <span>Monsieur Jo&euml;l Rault</span> <q> Buzzee : Une fiabilit&eacute; et un gain de temps consid&eacute;rables.  En 2005 je me pr&eacute;occupais de faire &eacute;voluer mon entreprise vers des outils crm et, un email&hellip; </q> <a href="/fr/temoignages/Rault.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/roche.jpg" width="63" height="63" alt="" /> <b>Equipement de manutention</b> <span>Monsieur Florian Roche</span> <q> Buzzee : un outil du 21&egrave;me si&egrave;cle vraiment efficace dans la mise en place d'une d&eacute;marche de progr&egrave;s et d'efficacit&eacute;. Buzzee combine 2 fonctions&hellip; </q> <a href="/fr/temoignages/Roche.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/tulle.jpg" width="63" height="63" alt="" /> <b>Imprimerie</b> <span>Monsieur Sébastien Tulle</span> <q> Le couple Buzzee et eBay c'est de la bombe ! J'ai compl&egrave;tement relanc&eacute; mon activit&eacute; d'imprimerie en proposant mes services sur eBay&hellip; </q> <a href="/fr/temoignages/Tulle.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
				<li> <img src="../images/william.jpg" width="63" height="63" alt="" /> <b>École Internationale</b> <span>Monsieur William Rubinstein</span> <q> Buzzee a redynamis&eacute; ma soci&eacute;t&eacute; en me faisant faire des &eacute;conomies. Lorsque j'ai d&eacute;couvert Buzzee, j'ai tout de suite &eacute;t&eacute; s&eacute;duit par l'approche&hellip; </q> <a href="/fr/temoignages/Rubinstein.htm" onclick="return hs.htmlExpand (this,{objectType: 'iframe', width: 550, height: 550} )"> <img src="../images/LireSuite.png" width="80" height="69" alt="Lire la suite" /></a> </li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

le code de la page ne semble pas complet, tu utilises jQuery et il n'est défini nulle part ?

sinon si ton code est proche de ce que tu nous montres, il manque évidemment le window.onload (ou document.body.onload) pour que le javascript placé avant le DOM (html/body) puisse accèder aux éléments (qui n'existent pas encore au moment de l’interprétation du javascript que tu as placé avant)

l'équivalent de window.onload en jQuery est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(function);

ton code devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var nbimage = 4;
	var listImgLength = $('#temoi li').length;
	while ($('#temoi li:visible').length <= nbimage)	{
		var randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
		if( $('#temoi li').is(':hidden') ){
			$('#temoi li').eq(randNum-1).css('display','block'); 
		}
	}
});
</script>

qui semble fonctionner à merveille d'après mes tests.

**Erwan31** · 15/02/2012, 12h03

Envoyé par Willpower

qui semble fonctionner à merveille d'après mes tests.

Super !

Merci beaucoup ça marche (bien que ça affiche 5 div mais j'ai remplacé 4 par 3 et c'est bon)

**Willpower** · 15/02/2012, 12h07

Envoyé par Erwan31

Super !

Merci beaucoup ça marche (bien que ça affiche 5 div mais j'ai remplacé 4 par 3 et c'est bon)

laisse 4 mais remplace "<=" par "<" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#temoi li:visible').length < nbimage

et la solution n'est pas terrible, car ça affiche un LI parmi tous les LI tant qu'on en a pas assez.... mais ça ne précise pas de le choisir parmi les cachés, il se pourrait donc avec un manque de pot considérable que ton programme tente à l'infini d'afficher des LI déjà visible et ne finisse jamais la boucle.

bon je dois reconnaître que les pc's sont suffisamment puissant pour que ce cas de figure (boucle trop longtemps) arrive aussi souvent que tu ne gagneras au loto. mais par principe j'aurai opté pour une solution comme celle proposé par jt.

**Erwan31** · 15/02/2012, 12h38

EDIT C'est bon merci ça marche

Affichage aléatoire de 4 div

JavaScript

Discussions similaires

Partager

Partager