Générer des div dynamiquement

**maxwel56** · 06/05/2012, 13h28

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

**Mell** · 06/05/2012, 13h54

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.

**maxwel56** · 06/05/2012, 14h05

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

**Mell** · 06/05/2012, 14h31

Pour commencer, voila un javascript qui fonctionne.

Code :

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

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 :

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
<?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

**maxwel56** · 06/05/2012, 15h35

Voici mon code en entier :

Code :

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
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.

**Auteur** · 07/05/2012, 13h52

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 javascript :

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

1
2
 
maDivZone.className = "Zone".id;

curieuse syntaxe

Code javascript :

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

1
2
3
4
5
 
    maDivZone.style.width = width;
    maDivZone.style.height = height;
    maDivZone.style.marginTop = marginTop;
    maDivZone.style.marginLeft = marginLeft;

précise les unités :

Code javscript :

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

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

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

**utopman** · 08/05/2012, 05h10

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 :

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
<?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>

Générer des div dynamiquement

JavaScript

Discussions similaires

Partager

Partager