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)
