Un div dans un autre

**Shr3ck** · 27/11/2009, 01h46

Bonjour tout le monde,

Comme le titre l'indique je cherche à mettre un div dans un autre. J'en explique la raison :

J'ai besoin d'afficher dans un tableau un barre de progression. J'ai trouvé via Google le code suivant :

Code php :

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
 
<?php
 
 function Initialize($gauche,$haut,$largeur,$hauteur,$bord_col,$txt_col,$bg_col)
 {
 $tailletxt=$hauteur-10;
 echo '<div id="pourcentage" style="position:absolute;top:'.$haut;
 echo ';left:'.$gauche;
 echo ';width:'.$largeur.'px';
 echo ';height:'.$hauteur.'px;border:1px solid '.$bord_col.';font-family:Tahoma;font-weight:bold';
 echo ';font-size:'.$tailletxt.'px;color:'.$txt_col.';z-index:1;text-align:center;">0%</div>';
 
 echo '<div id="progrbar" style="position:absolute;top:'.($haut+1); //+1
 echo ';left:'.($gauche+1); //+1
 echo ';width:0px';
 echo ';height:'.$hauteur.'px';
 echo ';background-color:'.$bg_col.';z-index:0;"></div>';
 
 }
 function ProgressBar($indice)
 {
 echo "\n<script>";
 echo "document.getElementById(\"pourcentage\").innerHTML='".$indice."%';";
 echo "document.getElementById('progrbar').style.width=".($indice*2).";\n";
 echo "</script>";
 flush(); 
 }
 
 ?> 
 
 
 
 <html>
 <body>
 <?php
 
 include ("progressbar.php");
 
 //Initialize(x,y,largeur,hauteur,'couleur bordure','couleur du pourcentage','couleur de la barre de progression');
 Initialize(50,60,200,30,'#000000','#FFCC00','#006699'); // initialisation de la barre de progression
 for ($i=0;$i<=100;$i++)
 {
 ProgressBar($i); // réaffichage de la barre avec le nouvel indice
 //***********************
 // ici on mets notre code
 for ($j=0;$j<=100000;$j++) {$p=1;} // dans cette exemple, j'ai une boucle de retardement
 //**************************
 }
 ?>
 </body>
 </html>

Pour ce qui se demanderai quel est le but d'une barre de progression en php je vais leur expliquer un peu le but du site. C'est un jeu ou il faut effectuer un certain nombre de tâche par semaine et une fois ces tâche effectué des calculs sont fais le week-end. Cette barre permettra à chaque joueur de voir sa position par rapport à son objectif. Donc cette barre est immobile toute la semaine.

Revenons au sujet :

J'ai donc un tableau qui affiche une ligne par objectif et des colonnes dont dans la dernière devra se trouver cette barre de progression.

J'ai du modifier le code pour l'adapter à mon cas, dont supprimer la position:absolute sinon la barre est en dehors de mon tableau.

Mon soucis est qu'à leur actuelle quelque soit ce que je fait je me retrouve avec "progrbar" en dessous de "pourcentage" au lieu d'être à l'intérieur de cette dernière. Si je laisse position:absolute "progrbar" est bien dans "pourcentage" mais à l'extérieur de mon tableau.

J'ai trouvé ces deux solutions :

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
   parent = document.getElementById('container');
   premier_fils = parent.firstChild;
   parent.insertBefore(mon_nouveau_div , premier_fils);
 
   //ET
 
var myctn = document.getElementById('container');
var mynewdiv = myctn.insertBefore(document.createElement("div" ),myctn.firstChild);

Résultat : RIEN ^^.

Donc si quelqu'un avait une solution à ce problème je suis preneur. Que ce soit une solution à ce problème ou une méthode qui permettrai le même résultat

Pour info je début en javascript.

Je vous remercie d'avance.

**E.Bzz** · 27/11/2009, 09h28

Bonjour,
avant toute autre chose, il faudrait voir comment tu définis mon_nouveau_div ...

Même s'il est correct, si tu le crées sans rien dedans, la création peut avoir marcher sans que tu le vois ...
En effet, suivant ses dimensions, un div vide ne modifiera pas l'affichage. Et comme les modif de la page faites en JS n'en modifie pas le "code source" ...

A+

**Shr3ck** · 27/11/2009, 11h55

avant toute autre chose, il faudrait voir comment tu définis mon_nouveau_div ...

Comme dis dans le premier poste, je ne fais que débuter en javascript et donc je ne savais même pas qu'il fallait définir le nouveau div...

Personnellement je l'avais comme cela :

Code javascript :

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

1
2
3
 
 var myctn = document.getElementById('pourcentage');
 var mynewdiv = myctn.insertBefore(document.createElement("progrbar" ),myctn.firstChild);

Qui était toutes les deux créés avant la création de ces deux variables.

Je vais mettre l'ensemble pour être plus claire :

Code javascript :

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
 
function ProgressBar($gauche,$haut,$largeur,$hauteur,$bord_col,$txt_col,$bg_col, $indice)
	 {
		$tailletxt=$hauteur-10;
		echo '<div id="pourcentage" style="position:;'; 
		echo ';left:'.$gauche;
		echo ';width:'.$largeur.'px';
		echo ';height:'.$hauteur.'px;border:1px solid '.$bord_col.';font-family:Tahoma;font-weight:bold';
		echo ';font-size:'.$tailletxt.'px;color:'.$txt_col.';z-index:1;text-align:center;">0%</div>';
 
		echo '<div id="progrbar" style="position:;'; //+1
		echo ';left:'.($gauche+1); //+1
		echo ';width:'.$indice.'px';
		echo ';height:'.$hauteur.'px';
		echo ';background-color:'.$bg_col.';"></div>';
 
		echo "\n<script>";
		echo "document.getElementById(\"pourcentage\").innerHTML='".$indice."%';";
		echo "document.getElementById('progrbar').style.width=".($indice).";\n"; 
		var myctn = document.getElementById('pourcentage');
                var mynewdiv = myctn.insertBefore(document.createElement("progrbar" ),myctn.firstChild);"
;
		echo "</script>";
		flush();
	 }

Avec dans mon tableau entre <td> ProgressBar(50,60,100,20,'#000000','#FFCC00','#20F675', 50); </td>

(Ne vous fiez pas au possible erreur de syntaxe ayant fait des tests je viens de le retaper et je dois avouer que tout en noir on a du mal à s'y retrouver ^^)

Je suppose donc qu'il doit y avoir un problème dans la position de mon second div par rapport au code javascript.

**Shr3ck** · 27/11/2009, 18h21

Veuillez excuser le double poste.

J'ai trouvé en grand partie la solution à mon problème. (Merci le livre que je viens d'acheter ^^)

Le script corrigé est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
echo "\n<script>";
 
		echo "document.getElementById('pourcentage').innerHTML='".$indice."%';";
		echo "document.getElementById('pourcentage').style.width=".($indice).";\n";
		echo"  parent = document.getElementById('progrbar');
				premier_fils = parent.firstChild;
				parent.insertBefore(document.getElementById('pourcentage') , premier_fils);";
 
 
		echo "</script>";

Comme cela ça fonctionne sans soucis, enfin presque.

En effet le problème viens maintenant du fait que le script ne semble s'exécuter qu'une seule fois. J'effectue une requête SQL puis avec une boucle
j'ajoute une ligne tant qu'il y a des données dans la requête. J'ai donc mon appel de fonction entre balise <td>.
Le résultat est bon dans la première mais dans les autres, 'progrbar' se trouve de nouveau sous le cadre de 'pourcentage'.

Est-ce du au fait que les div ont tous le même nom et de ce fait qu'il ne s'exécute que pour le premier ? ou est-ce totalement autre chose ?

Un div dans un autre

JavaScript

Discussions similaires

Partager

Partager