Générer des div dynamiquement

Version imprimable

06/05/2012, 13h28
maxwel56

Générer des div dynamiquement

Bonjour tout le monde, je me pose un certain nombre de question par rapport a ce que je voudrais faire. Tout est possible en programmation, mais j'avoue que je ne sais pas trop comment m'y prendre sur ce coup là. J'aimerais donc avoir des conseils de la part de personnes plus expérimentées que moi.

Je m'explique : Je voudrais générer des balises div dynamiquement en précisant les propriétés suivantes :
- class
- margin-top
- margin-left
- hauteur
- largeur

Je pense que je dois faire cela en javascript, à moins que quelqu'un me dit qu'on peut le faire en css avec une feuille de style dynamique.

Après avoir générer ces div dynamiquement, je voudrais les afficher :

Voilà un extrait de mon code ça vous aidera certainement à mieux comprendre.

http://collabedit.com/xrnb2
06/05/2012, 13h54
Mell

je ne vois d'extrait de ton code ?
Mais sinon il faut que tu précises dans quel contexte tu veux gérer dynamiquement tes div ?
Sinon oui c'est possible, en javaScript ou même en jQuery je pense.
06/05/2012, 14h05
maxwel56

effectivement avec le lien c'est mieux, désolé, je l'ai rajouté dans mon messag d'origine.

Pour commencer, voila un javascript qui fonctionne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function generate_div(id, width, height, marginTop, marginLeft) {
    maDiv = document.createElement("div");
    maDiv.className = id;
    maDiv.style.width = width;
    maDiv.style.height = height;
    maDiv.style.marginTop = marginTop;
    maDiv.style.marginLeft = marginLeft;
    maDiv.style.backgroundColor = "#FFF";
    document.body.appendChild(maDiv);
}
</script>

Tu n'as pas besoin des int, ce sont des paramètres.
Tu ne dois pas non plus mettre de tiret dans tes variables.
et ton background il manquait des " ".

Et voici pour le php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
        $zones = array(
                array("Titre",4,10, 50, 180),
                array("Description",50, 40, 100, 200)
        );
 
        foreach($zones as $zone){
                echo '<script>generate_div("'.$zone[0].'", '.$zone[3].', '.$zone[2].', '.$zone[1].', '.$zone[4].');</script>'; ?>
		<div class="<?php echo $zone[0];?>" title="Click to flip">
			<div class="zoneFlip">
			</div>
			<div class="zoneData">
				 <div class="zoneDescription">
					  <?php echo $zone[0];?>
				 </div>
		   </div>
		   </div>
		<?php }
 
        ?>

Je l'ai un peu plus modifié qu'il ne le fallait, mais en gros, reprend ce qu'il te manque dans ton code.
C'est à dire pour l'appelle de ta fonction javascript

Voici mon code en entier :

Code:

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
88
89
90
91
92
93
 
<!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">
	<?php include('css/style.php'); ?>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
 
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function generate_div(id, width, height, marginTop, marginLeft) {
    maDivZone = document.createElement("div");
    maDivZone.className = "Zone".id;
    maDivZone.style.width = width;
    maDivZone.style.height = height;
    maDivZone.style.marginTop = marginTop;
    maDivZone.style.marginLeft = marginLeft;
    maDivZone.style.backgroundColor = "#FFF";
    maDivZone.style.position = "absolute";
    maDivZone.style.cursor = "pointer";
    document.body.appendChild(maDivZone);
 
    maDivZoneFlip = document.createElement("div");
    maDivZoneFlip.className = "ZoneFlip".id;
    maDivZoneFlip.style.position = "absolute";
    maDivZoneFlip.style.left = 0;
    maDivZoneFlip.style.top = 0;
    maDivZoneFlip.style.width = "100%";
    maDivZoneFlip.style.height = "100%";
    maDivZoneFlip.style.border = "1px solid #ddd";
    maDivZoneFlip.style.background = "url('img/background.jpg') no-repeat center center #f9f9f9";
 
    /*maDivZoneFlip.style.hover.border = "1px solid #999";
    maDivZoneFlip.style.hover.moz-box-shadow = "0 0 30px #999 inset";
    maDivZoneFlip.style.hover.webkit-box-shadow = "0 0 30px #999 inset";
    maDivZoneFlip.style.hover.box-shadow = "0 0 30px #999 inset";*/
    document.body.appendChild(maDivZoneFlip);
 
    maDivZoneData = document.createElement("div");
    maDivZoneData.className = "ZoneData".id;
    maDivZoneData.style.display = "none";
    document.body.appendChild(maDivZoneData);
 
    maDivZoneDescription = document.createElement("div");
    maDivZoneDescription.className = "zoneDescription".id;
    maDivZoneDescription.style.fontSize = "11px";
    maDivZoneDescription.style.padding = "10px 10px 20px 20px";
    maDivZoneDescription.style.fontStyle = "italic";
    document.body.appendChild(maDivZoneDescription);
}
</script>
</head>
 
<body>
   <div id="wrapper">
         <div id="status_bar">   
		 </div>
		 <div class="navigationbar_filter">
		 </div>
		 <div class="navigationbar_background">
			   <p>Titre</p>
		 </div>
 
		 <div class="content">		 
 
		 </div>
		 <?php
        $zones = array(
                array("Titre",4,10, 50, 180),
                array("Description",50, 40, 100, 200)
        );
 
        foreach($zones as $zone){
                echo '<script>generate_div("'.$zone[0].'", '.$zone[4].', '.$zone[3].', '.$zone[2].', '.$zone[1].');</script>'; ?>
		<div class="<?php echo 'Zone'.$zone[0];?>" title="Click to flip">
			<div class="<?php echo "ZoneFlip".$zone[0];?>">
			</div>
			<div class="<?php echo 'ZoneData'.$zone[0];?>">
				 <div class="<?php echo 'ZoneDescription'.$zone[0];?>">
					  <?php echo $zone[0];?>
				 </div>
		   </div>
		   </div>
	<?php }?>
   </div>
 
</body>
</html>

Cela ne fonctionne pas.

07/05/2012, 13h52
Auteur
Citation:

Envoyé par Mell_

Sinon oui c'est possible, en javaScript ou même en jQuery je pense.

jQuery n'est pas un langage ! jQuery est une librairie javascript.
Code:

1 2 maDivZone.className = "Zone".id;
8O curieuse syntaxe
Code:

1 2 3 4 5 maDivZone.style.width = width; maDivZone.style.height = height; maDivZone.style.marginTop = marginTop; maDivZone.style.marginLeft = marginLeft;
:arrow: précise les unités :

Code:

maDivZone.style.marginLeft = marginLeft + "px";

et puis pourquoi mélanger PHP avec javascript ?? C'est se compliquer la vie pour rien.

Bonjour,

si tu veux afficher un truc du genre une liste d'articles, il faut vraiment que tu apprennes a faire du css propre, car afficher chaque élément en lui collant un css propre, c'est pas propre :p

sinon, ton code peut ressembler à ca :

Code:

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
<?php
    //access BDD
        $zones = array(
            array("Titre",4,10, 50, 180),
            array("Description",50, 40, 100, 200)
        );
 
?>
 
<html>
  <body>
    <?php
    foreach($zones as $z)
    {
 
        echo '<div id="'. $z[0] . '" style="background-color:grey;width:'. $z[3] . 'px;height:'. $z[2] . 'px;margin-top:'. $z[1] . 'px;margin-left:'. $z[4] . 'px;"></div>
            <div class="'.$z[0].'" title="Click to flip">
                <div class="zoneFlip">
                </div>
                <div class="zoneData">
                     <div class="zoneDescription">'.$z[0].'</div>
               </div>
           </div>';
           
    }
    ?>
  </body>
</html>