Position de DIV aléatoire

Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
- - Dernière réponse : Magiciens
Messages postés
3
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
3 mars 2011
- 3 mars 2011 à 09:43
Bonjour à tous !
Je ne sais pas si ce que j'aimerai faire est réalisable en html et css mais je demande quand même au cas où.

Pour l'explication en détail je suis chargé de la réalisation d'un portail multi annonceurs.
Sur la première page de ce portail il y a des divs sous forme de bloc contenant une image de fond et du texte. 1 bloc est égal à 1 annonceur. Etant donné qu'il y a plus de blocs que le permet une résolution de 1024x768 certains annonceurs se retrouvent en bas de page et l'internaute est obligé de scroller pour voir les derniers. A long terme les annonceur apparaissant en haut de page auront logiquement plus de visites que les autres.

Et donc, pour éviter celà j'aimerai faire un sorte que l'ordre des divs soit aléatoire à chaque connexion sur le portail.
Je suppose qu'il faut faire appel à du Dhtml et/ou javascript peut être. Enfin bref, si quelqu'un possède une solution je suis preneur.

Merci par avance
Afficher la suite 

15 réponses

Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
0
Merci
Imaginons un tableau de 5div par exemple.
On prend trois ordres prédéfinis.
On tire un de ces trois ordres au sort.
On l'applique au divs.



<script>
var $=function(id){return document.getElementById(id)};
var ordre=[];
ordre[0]=["Pub1","Pub2","Pub3","Pub4","Pub5"];
ordre[1]=["Pub5","Pub4","Pub3","Pub2","Pub1"];
ordre[2]=["Pub3","Pub3","Pub1","Pub5","Pub2"];
var divs=ordre[Math.round(Math.random()*2)];

for(i=0;i
script>

Voilà. mais je suis pas sur.

document.write("Stfou");
//C'est en programmant que l'on devient programmeur
Commenter la réponse de stfou
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
0
Merci
Ok, merci à tous les 2 :
-
)


Bultez : J'ai essayé de taper une recherche "ordre aléatoire" mais je n'ai rien trouvé de concluant.
J'essaie à nouveau avec "fonction recherche".

Stfou : Merci pour ce bout de code, je comprends la logique mais je n'aurai pas été capable de rendre l'apparition aléatoire avec la ligne "
var
divs=ordre[
Math
.round(
Math

.random()*2)];" ... J'essaie et je te tiens au courant.

@pluche
Commenter la réponse de skullo
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
0
Merci
Derien, mais au fait, la ligne :






var divs= ordre[Math.round(Math.random()*2)];





le "*2", c'est parcequ'il y a 3 ordres, mais si tu veux plus d'ordre que ça (ça m'ettonnerait que ta page n'ait que 5 pubs), remplace par ça :






var divs =ordre[Math.round(Math.random()*ordre.length)];











Salut

<hr />

Le travail n'a jamais tué personne, mais pourquoi prendre le rique ?


document.write("Stfou");
//C'est en programmant que l'on devient programmeur.
Commenter la réponse de stfou
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
0
Merci
Re ! et merci pour ton dernier poste :)

Cependant je viens d'essayer et... rien ne se apsse au rafrîchissement de la page :( ...
J'ai beau chercher (enfin pas trop quand même, je suis vite largué...) je n'arrive pas à trouver le problème.

Ci-dessous mon code :

<head>
<title>Test</title>
<script>
var $=function(id){return document.getElementById(id)};
var ordre=[];
ordre[0]=["Pub1","Pub2","Pub3","Pub4","Pub5"];
ordre[1]=["Pub5","Pub4","Pub3","Pub2","Pub1"];
ordre[2]=["Pub3","Pub3","Pub1","Pub5","Pub2"];
var divs=ordre[Math.round(Math.random()*ordre.length)];

for(i=0;i

</head>

1

2

3

4

5

</html>

Si tu penses pouvoir me donner un petit coup de main ça serait sympa.
Merki d'avance !
Commenter la réponse de skullo
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
0
Merci
Tu as essayé d'actualiser la page très vraiment super beaucoup de fois ?
Normalement ça devrait changer.
Sinon attend un peu, je pense que je vais sortir une source qui permet de mélanger un tableau.

<hr />Stfou
Commenter la réponse de stfou
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
0
Merci
Euh non en fait attend je crois que je vais pas sortir de source...
Sinon ya ça pour mélanger (source de jesusonline un peu simplifiée) :
var tab=["Pub1","Pub2","Pub3","Pub4","Pub5"];
tab.sort(function() { return Math.floor( (3*Math.random()) - 1 );};

Et puis tu rajoute mon code :
var $=function(id){return document.getElementById(id)};
for(i=0;i<tab.length;i++){
$(i).innerHTML=tab[i]
}

Voilà.

<hr />Le travail n'a jamais tué personne, mais pourquoi prendre le rique ?
document.write("Stfou");

//C'est en programmant que l'on devient programmeur.
 

PensezRéponse Acceptée</gras>
Commenter la réponse de stfou
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
0
Merci
... ça ne marche toujours pas pour moi :(
Commenter la réponse de skullo
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
B
onjour...
Je viens de déposer une source sur le RANDOM d'un TABLEAU
Cela peut t'intéresser...
;0)
Commenter la réponse de PetoleTeam
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
0
Merci
Merci pour le tuto PetoleTeam :)

Je vais essayer de voir si je peux adapter ton tuto mais pour le moment il y a 2 nuances avec ce que je souhaite faire :
J'aimerai l'appliquer à des Div et je voudrais également que la fonction se lance au chargement de la page et non au clic du bouton.

Je fais des tests de mon et si je m'avère être trop mauvais -_-' je reviens vers toi.
Commenter la réponse de skullo
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
B
onjour...
je te livre un exemple d'intégration de Rand_Tableau pour ton cas...

<html>
<head>
<title>POSITION-DIV-ALEATOIRE</title>
<style type="text/css">
div {
  position : absolute;
  border : 1px solid #ffcc88;
  left : 100px;
  top : -1000px;
  height : 30px;
  width : 100px;
}
</style>
<script type="text/javascript">
//-- Declaration des ID de tes DIV Logos
var Tab = new Array('DIV_1', 'DIV_2', 'DIV_3', 'DIV_4', 'DIV_5', 'DIV_6', 'DIV_7', 'DIV_8', 'DIV_9', 'DIV_10');
//-------------------------------
// entree : le tableau a randommer
// sortie : le tableau randomme
//-------------------------------

function Rand_Tableau( tab_){
  var i;
  var Num;
  var Nbr = tab_.length;
  var Tab = new Array();
  //-- Copie le contenu
  Tab = Tab.concat(tab_);
  //-- Lance la boucle
  while( Nbr> 0){
    //-- Recup nombre aleatoire
    Num = Math.floor(Math.random() * Nbr);
    //-- 1 de moins a traiter
    Nbr--;
    //-- Stock element tire
    szTmp = Tab[Num];
    //-- Decalage les valeur du tableau
    for( i= Num; i < Nbr; i++)
      Tab[i] = Tab[i+1]
    //-- Stock l'element tire en fin
    Tab[ Nbr] = szTmp;
  }
  //-- On peut remettre dans l'ordre du tirage
  Tab.reverse();
  //-- Retourne resultat
  return( Tab);
}
//----------------
function Replace(){
  var T = Rand_Tableau(Tab);
  var PosY =  0; // Position Y d'affichage
  //-- On replace les DIVs Tries
  for( var i=0; i< T.length; i++){
    var Obj = document.getElementById(T[i]);
    Obj.style.top = PosY +'px';
    //-- Recup la hauteur du dernier place
    PosY += Obj.offsetHeight;
  }
}
</script>
</head>

[javascript:Replace(); Replace]

DIV_1

DIV_2

DIV_3

DIV_4

DIV_5

DIV_6

DIV_7

DIV_8

DIV_9

DIV_10

</html>

Voila à toi de jouer...
;0)
Commenter la réponse de PetoleTeam
Messages postés
3
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
3 mars 2011
0
Merci
Bonjour,

Ce matin, après avoir lu ça et là des intégrations de Div aléatoires, je me suis arrêté sur le script de Petole Team qui est juste au-dessus.

Et ben, ca marche mais les div se touchent et ne sont pas disposés à leur place car ils sont collé tout en haut.

Voilà le résultat ici :

-http://www.magicien-magie.com/paris/div-aleatoire.html

et la vraie page que j'aimerais voir bouger

-http://www.magicien-magie.com/paris/close-up.html

Si quelqu'un aurait une idée d'où cela vient.

Par rapport au code au-dessus voilà ce qui a été fait :
-copié/collé du code au-dessus dans la source du site entre balise <head> </head> et
-Et changement de la ligne des DIV par les miennes
var Tab = new Array('DIV_1', 'DIV_2', 'DIV_3', 'DIV_4', 'DIV_5', 'DIV_6', 'DIV_7', 'DIV_8', 'DIV_9', 'DIV_10');
var Tab = new Array('Magicien-site1', 'Magicien-site2', 'Magicien-site3', 'Magicien-site4', 'Magicien-site5', 'Magicien-site6');

Si une bonne âme venait à passer par là.

Merci
Commenter la réponse de Magiciens
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
0
Merci
Slt Magiciens,

Je viens de voir le code source de ta page + CSS et ma conclusion est la suivante:
Les divs sont collés tout en haut aprceque ton code est super cracra ;)
Je te conseil de :
1: Virer toutes les positions absolues de ton CSS
2: Utiliser des class ".class" et non des ID "#ID" lorsque tu retrouve plusieurs fois cet élément dans ta page
2: Refaire ta page plus simplement et proprement comme ça par example :

<!-- "Wrapper" est le div qui englobe tout les autres, celui que tu centre et dont tu défini la taille -->


 

     



<!-- "Maincontent" est le div qui englobe tes différents articles, sans absolu il n'y a pas de raison qu'il change de place -->

     


          


          


          



     




Commenter la réponse de skullo
Messages postés
3
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
3 mars 2011
0
Merci
Merci pour la réponse.

Suis pas un pro du codage. Cela a été fait avec dreamweaver.
Je vais essayer de déchiffrer ce que tu expliques.
Commenter la réponse de Magiciens
Messages postés
3
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
3 mars 2011
0
Merci
Bon, on j'ai galéré pendant 2h , et effectivement. Tout doit être une question de relative comme m'a précisé skullo
car j'ai fait un petit exemple avec
-http://www.magicien-magie.com/paris/div-aleatoire2.html

et les 3 div de couleurs sont en absolue et ils sont collés les uns sous les autres, faut les passer en relatif et là ca marcher peut-être.

L'absolu est tellement plus simple.

Y a pas un étudiant qui recherche un petit job pour mettre intégrer les div aléatoire sur cette page en passant au relative. Si oui, MP .
Commenter la réponse de Magiciens
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26
-1
Merci
Bonjour,

    CodesSources en dhtml/javascript c'est près de 2000 codes aujourd'hui.
    Ceux qui causent d'aléatoire pour afficher quelque chose sont légion.
    Une petite recherche dans ces codes devrait apporter une foultitude de
        réponses, la "fonction recherche" ne fonctionnant pas si mal que ça.
    Après si tu as des soucis pour mettre en oeuvre, adapter...

<hr />


Cordialement            Bul        
Commenter la réponse de cs_bultez