8721 sujets

Développement web côté serveur, CMS

Affichage aléatoire de div

Salut à tous,

Sur une page de mon site, il y a grosso modo :
- la partie gauche qui affiche les données du membre
- et sur le coté droite : des div comprenant des résumé des membres de la même catégorie, des pub ou autres. Que je vais appeler div1, div2, div3 (pour être compréhensible).

Ce que je souhaiterais faire c'est donner l'impression que la page est différente si on navigue d'un membre à l'autre.
Dans mes div "dynamique", j'ai fait un (order by rand()) et évidemment les infos affichées sont différentes et ne sont jamais dans le même ordre. Là c'est ok.

Or ce que je souhaiterais faire (le principe) c'est aller plus loin et faire que les div (qui ont des contenus indépendants) s'affichent de manière aléatoire ?
Exemple :
1/ je suis sur la fiche de "Toto", sur le coté droit, la div1 apparait en premier, la div2 en second etc...
2/ Je clique pour voir la fiche d'un autre membre (donc la même page Smiley smile ) et cette fois-ci la div2 est en premier, la div3 en second, la div1 en 3ème etc...

Un affichage aléatoire des div, en somme...
Est-ce possible, avez-vous une idée de comment je peux faire ?

Merci d'avance Smiley smile
@plus
Zedbar
Salut,

Un peu de jQuery et le tour est joué, pas besoin de php ici (même si tu peux le faire également) : http://jsfiddle.net/mUrkk/2/ (Clic sur RUN en haut pour simuler un F5 du navigateur)

Si tu veux tester le code de ton coté, voici une page test :


<html>
<head>
	<title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        
    </style>
</head>
<body>	
	<div class="container">
        <div style="background-color:yellow;">Jaune</div>
        <div style="background-color:red;">Rouge</div>
        <div style="background-color:blue; color:white">Bleu</div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var collection = $("div.container div").get();
        collection.sort(function() {
            return Math.random()*10 > 5 ? 1 : -1;
        });
        $.each(collection,function(i,el) {
            $(el).appendTo( $(el).parent() );
        });
    });
    </script>
</body>
</html>

Modifié par Apoooo (22 Jul 2013 - 09:18)
Sujet clos
Aller à