Effet toggle conteneur fermé à l'ouverture de la page

**polo42** · 27/09/2009, 10h42

Bonjour,

Je crois que tout est dans le titre. J'utilise l'effet toggle de script aculo us et je souhaite que le conteneur pour lequel l'effet s'applique soit fermé au chargement de la page.
Quelqu'un à des idées?

**Bovino** · 27/09/2009, 12h30

Oui, il doit falloir le préciser dans le code

Mais comme tu ne le montre pas, difficile d'en dire plus

**polo42** · 27/09/2009, 20h43

oui, mon code....
Si tu arrives a y comprendre quelque chose bravo!! car c'est un beau bordel
Pour expliquer un peu, c'est un blog. les messages sont stockés dans une bdd mysql. Je souhaite utiliser l'effet toggle sur les noeuds "nombre_comment" qui devraient être invisible à l'ouverture de la page donc le toggle qui doit être replié (j'ai mis le bout de code concerné en rouge). merci

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <link rel="stylesheet" type="text/css" href="styles2.css" />
  <link type="text/css" href="css/humanity/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
  <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
  <title>Le blog de Master Fry</title>
    
  <script language ="JavaScript" type = "text/javascript">
		djConfig = {parseOnLoad : true};
  </script>
  <script language ="JavaScript" type = "text/javascript" src= "js/dojotoolkit/dojo/dojo.js"></script>
  
    <script language ="JavaScript" type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
    
  <script language ="JavaScript" type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects" ></script>
  <!--<script type="text/javascript" src="js/Jquery/jquery-1.3.2.min.js"></script> -->
  <!--<script type="text/javascript" src="js/Jquery/jquery-ui-1.7.2.custom.min.js"></script> -->



  <script language ="JavaScript" type = "text/javascript">
        dojo.require("dijit.Dialog");
	dojo.require("dijit.form.Button");
  	function insertpiedpage(rows){
	    var parent_ppage = document.getElementById("pied_page");
	    suppr(parent_ppage);
	    var nbrpage = Math.ceil(rows/30);
	    var page_text = document.createElement("span");
	    page_text.innerHTML = "Page : ";
	    var fragment_pied_page = document.createDocumentFragment();
	    fragment_pied_page.appendChild(page_text);
		for (var j=1; j<nbrpage+1; j++){
		var num = document.createElement("span");
		num.setAttribute("class", "num_page");
		num.setAttribute("className", "num_page");
		num.setAttribute("id" , j);
		num.setAttribute("onclick", "chargement("+ j +")");
		var texte_num = document.createTextNode(j);
		num.appendChild(texte_num);
		fragment_pied_page.appendChild(num);
		}
	    parent_ppage.appendChild(fragment_pied_page);
	}

	function suppr(element){
	if (element != null){
	while(element.firstChild)
	    element.removeChild(element.firstChild);
	}
	}
	function ajout_comment(id){
	dijit.byId('dialog').show() 
	}
	function chargement(id){
			var proprietes = { url : "requete.php", handleAs : "xml",content : {"id":id}, load : function chargement(data, ioargs){
			var xmldoc = data;
			var racineresult = xmldoc.firstChild;
			var parent = document.getElementById("contenu");
			var fragment = document.createDocumentFragment();
			suppr(parent);
			var tableau = {};
			for( var i=0 ; i<racineresult.childNodes.length; i++){
			//La variable texte va contenir le texte du topic
			tableau[i] = racineresult.childNodes[i].childNodes[3].firstChild.nodeValue;
			var texte = document.createElement("div");
			texte.setAttribute("className","texte");
			texte.setAttribute("class", "texte");
			texte.setAttribute("id", "texte" + racineresult.childNodes[i].childNodes[3].firstChild.nodeValue);
			var texte_comment = document.createElement("div");
			texte_comment.setAttribute("className","texte_comment");
			texte_comment.setAttribute("class", "texte_comment");
			texte_comment.setAttribute("id", "texte_comment" + racineresult.childNodes[i].childNodes[3].firstChild.nodeValue);
			//Nous ajoutons une balise div permettant d'insérer le sujet, la date et l'heure
			var titre = document.createElement("div");
                        var titre_h1 = document.createElement("span");
                        var titre_h2 = document.createElement("span");
			titre_h1.setAttribute("className", "titre_h1");
			titre_h1.setAttribute("class", "titre_h1");
			titre_h2.setAttribute("className", "titre_h2");
			titre_h2.setAttribute("class", "titre_h2");
			titre.setAttribute("className", "titre");
			titre.setAttribute("class", "titre");
			titre.setAttribute("id", "titre" + i);
			titre.setAttribute("onclick", "Effect.toggle('texte"+ racineresult.childNodes[i].childNodes[3].firstChild.nodeValue +"', 'blind');");
			//titre.setAttribute("onmouseover", "Effect.Morph('titre"+i+"', 'background:#00ff00');return false;");
			titre.setAttribute("onmouseover", "$('titre"+i+"').morph('background:#be2b1c;', 2); return false;");
			titre.setAttribute("onmouseout", "$('titre"+i+"').morph('background:#292828;'); return false;");
			//Les commentaires seront ajoutés en bas du texte
			var commentaire = document.createElement("div");
			commentaire.setAttribute("id", "commentaire"+ racineresult.childNodes[i].childNodes[3].firstChild.nodeValue);
			commentaire.setAttribute("className", "comment");
			commentaire.setAttribute("class", "comment");
			//Nous traitons le fichier xml afin d'en sortir les informations relatives au sujet
			//var texte_principal = document.createTextNode(racineresult.childNodes[i].childNodes[2].firstChild.nodeValue);
			texte_comment.innerHTML=racineresult.childNodes[i].childNodes[2].firstChild.nodeValue;
			//Nous ajoutons le conteneur qui contiendra les commentaires
			var comment = document.createElement("div");
			comment.setAttribute("id", "comment"+ racineresult.childNodes[i].childNodes[3].firstChild.nodeValue);
			comment.setAttribute("className", "comment");
			comment.setAttribute("class", "comment");
			comment.setAttribute("display", "none");
			//Nous ajountons le texte permettant d'ajouter des commentaires
			var ajout_comment = document.createElement("span");
			ajout_comment.setAttribute("onclick", "ajout_comment("+racineresult.childNodes[i].childNodes[3].firstChild.nodeValue+")");
			ajout_comment.innerHTML="Ajouter un commentaire";
			ajout_comment.setAttribute("className", "ajout_comment");
			ajout_comment.setAttribute("class", "ajout_comment");
			//Nous ajoutons une petite image figurative pour les commentaires
			var image_comment = document.createElement("img");
			image_comment.setAttribute("src", "image/commentaire.png");
			image_comment.setAttribute("alt", "bulle de commentaire");
			image_comment.setAttribute("className", "bulle");
			image_comment.setAttribute("class", "bulle");
			//Nous ajoutons à la fin du message, le texte qui contiendra le nombre de commentaires
			var nombre_comment = document.createElement("span")
			var saut_ligne5 = document.createElement("br");
			var saut_ligne7 = document.createElement("br");
			nombre_comment.setAttribute("className", "nombre_comment");
			nombre_comment.setAttribute("class", "nombre_comment");
			nombre_comment.setAttribute("id", "nombre_comment"+racineresult.childNodes[i].childNodes[3].firstChild.nodeValue);
			var comment_texte = document.createTextNode("nombre de commentaire : 0")
			nombre_comment.setAttribute("onclick", "Effect.toggle('commentaire"+ racineresult.childNodes[i].childNodes[3].firstChild.nodeValue +"', 'slide');");
			nombre_comment.setAttribute("onload", "Effect.toggle('commentaire"+ racineresult.childNodes[i].childNodes[3].firstChild.nodeValue +"', 'slide');");
			nombre_comment.appendChild(comment_texte);
			//Nous inserons une barre pour marquer la fin du message
			var fin_message = document.createElement("hr");
			//Nous ajoutons à la fin du message, la possibilité d'appeller la boîte de dialogue ajout commentaire qui permettra d'ajouter
			//des commentaires à chaque sujet
			var sujet = document.createTextNode(racineresult.childNodes[i].childNodes[1].firstChild.nodeValue);
			var heure_ajout = document.createTextNode(racineresult.childNodes[i].childNodes[0].firstChild.nodeValue)
                        //texte.appendChild(texte_principal);
			//Nous ajoutons maintenant tous les éléments créés afin de pouvoir que notre page se structure
			comment.appendChild(saut_ligne5);
			comment.appendChild(image_comment);
			comment.appendChild(ajout_comment);
			comment.appendChild(nombre_comment);
			comment.appendChild(saut_ligne7);
                        titre_h2.appendChild(heure_ajout)
                        titre_h1.appendChild(sujet);
			titre.appendChild(titre_h1);
                        titre.appendChild(titre_h2);
			fragment.appendChild(titre);
			texte.appendChild(texte_comment);
			texte.appendChild(comment);
			texte.appendChild(commentaire);
			texte.appendChild(fin_message);
			fragment.appendChild(texte);
			}
			ajout_message(tableau);
			insertpiedpage(racineresult.childNodes[1].childNodes[4].firstChild.nodeValue);
			parent.appendChild(fragment);
			}
			}
			var xmldoc = dojo.xhrPost(proprietes);
			}
		 // tableau = {"1":"1", "2":"1"}
	function ajout_message(tableau){
	      var proprietes_id = { url : "commentaire.php", handleAs : "xml",content : tableau, load : function chargement(data, ioargs){
			var xmldoc = data;
			var racineresult_id = xmldoc.firstChild;
			
			for (var w=0 ; w<racineresult_id.childNodes.length; w++){
				var commentaire = document.getElementById("comment"+racineresult_id.childNodes[w].childNodes[3].firstChild.nodeValue)
				var texte_comment = document.createElement("span");
				var saut_ligne = document.createElement("br");
				var saut_ligne1 = document.createElement("br");
				var saut_ligne2 = document.createElement("br");
				var saut_ligne3 = document.createElement("br");
				var saut_ligne4 = document.createElement("br");
				var saut_ligne6 = document.createElement("br");
				var auteur_comment = document.createElement("span");
				var date_comment = document.createElement("span")
				auteur_comment.setAttribute("className","auteur_commentaire");
				auteur_comment.setAttribute("class", "auteur_commentaire");
				date_comment.setAttribute("className","date_commentaire");
				date_comment.setAttribute("class", "date_commentaire");
				texte_comment.setAttribute("className","commentaire");
				texte_comment.setAttribute("class", "commentaire");
				texte_comment.setAttribute("id",  racineresult_id.childNodes[w].childNodes[3].firstChild.nodeValue);
				var titre_auteur = document.createTextNode(racineresult_id.childNodes[w].childNodes[1].firstChild.nodeValue);
				var titre_date = document.createTextNode(racineresult_id.childNodes[w].childNodes[0].firstChild.nodeValue + " ");
				var texte_commentaire = document.createTextNode(racineresult_id.childNodes[w].childNodes[2].firstChild.nodeValue);
				var racine_texte = document.getElementById("commentaire"+racineresult_id.childNodes[w].childNodes[3].firstChild.nodeValue);
				//Nous modifions ici le nombre de commentaire par message
				var commentaire_modif_nombre = document.getElementById("nombre_comment"+racineresult_id.childNodes[w].childNodes[3].firstChild.nodeValue);
				commentaire_modif_nombre.innerHTML= "nombre de commentaires : "+ racineresult_id.childNodes[w].childNodes[4].firstChild.nodeValue;
				//Nous ajoutons tous les éléments enfants au fragment
				texte_comment.appendChild(texte_commentaire);
				date_comment.appendChild(titre_date);
				auteur_comment.appendChild(titre_auteur);
				racine_texte.appendChild(saut_ligne3);
				racine_texte.appendChild(date_comment);
				racine_texte.appendChild(auteur_comment);
				racine_texte.appendChild(saut_ligne4);
				racine_texte.appendChild(saut_ligne1);
				racine_texte.appendChild(texte_comment);
				racine_texte.appendChild(saut_ligne);
				racine_texte.appendChild(saut_ligne2);
				
				}
			      //var parent_texte = document.getElementById("texte"+racineresult_com.childNodes[i].childNodes[3].firstChild.nodeValue);
			}
			
	      }
	      var xmldoc = dojo.xhrPost(proprietes_id);
	}
	
      
	window.onload = function(){chargement(1)};
	//window.onload = function(){ajout_message(tableau)};

	</script>
</head>
<body>
<div class="banniere_fond">
</div>
<div class="background">
<div class="page">
<div class="bandeau"><IMG SRC="image/fry_banner_renforce.png" width="800" height="200" alt="bannière blog de fry"></div>
<div class="bandeau_droite" id="bandeau_droite"><center><IMG class="image_banniere_droite"  SRC="image/qui_suis-je.png" width="250" height="70" alt="Qui suis-je?">
</br></br></br></br></br></br></br></br><IMG class="image_banniere_droite"  SRC="image/archives.png" width="200" height="70 alt="Qui suis-je?"></br></br></br></br></br></br></br></br><IMG class="image_banniere_droite"  SRC="image/Liens.png" width="170" height="70 alt="Qui suis-je?">
</center></div>
<div class="contenu" id="contenu"></div>
<div class="pied_page" id="pied_page"><span class="page_pied">Page :</span></div>
</div>
</div>
<!--<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog').show()">Show Dialog</button>-->

<div  class="tundra" dojoType="dijit.Dialog" id="dialog" title="Master Fry vous écoute..."  style="width:320px; height:240px; overflow:auto; background-color: white; border: 1px solid grey;">
  <form>
  <table>
    <tr>
      <td><label for="name">Nom: </label></td>
      <td><input type="text" name="nom" id="nom"></td>
    <tr>
      <td><input type="text" name="id" id="id" style="visibility: hidden;"></td>
    </tr>
    </tr>
    <tr>
      <td><label for="loc">Email: </label></td>
      <td><input type="text" name="email" id="email"></td>
    </tr>
    <tr>
      <td><label for="date">Site web: </label></td>
      <td><input type="text" name="site_web" id="site_web"></td>
    </tr>
    <tr>
      <td><label for="date">Commentaire: </label></td>
      <td><input type="text" name="time" id="time"></td>
    </tr>
    <tr>
      <td><label for="desc">Description: </label></td>
      <td><input type="text" name="desc" id="desc"></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <center><button type="submit">Envoyer</button></center></td>
    </tr>
  </table>
  </form>
</div>
</body>
</html>

**polo42** · 01/10/2009, 08h43

J'ai peut être une idée mais je ne suis pas sur de son fonctionnement.

Est-ce qu'un effet blind-up au chargement de la page pourrait corriger mon problème?

**polo42** · 06/10/2009, 10h06

Bonjour,

Je me répond donc à moi même. Pour que le conteneur sur lequel nous appliquons un effet toggle soit fermé par défaut à l'ouverture de la page il faut y appliquer le style

Code :

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

visibility : hidden;

Mais il y a un mais, pas dans la feuille de style mais directement dans le code HTML. Car lorsque l'on applique un style dans la feuille de style, celui-ci semble figé et non modifiable par scriptaculous.

Peut être qu'un spécialiste pourrait expliquer cette différence de comportement?

Merci

**gwyohm** · 06/10/2009, 11h17

Envoyé par polo42

Pour que le conteneur sur lequel nous appliquons un effet toggle soit fermé par défaut à l'ouverture de la page il faut y appliquer le style

Code :

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

visibility : hidden;

Mais il y a un mais, pas dans la feuille de style mais directement dans le code HTML. Car lorsque l'on applique un style dans la feuille de style, celui-ci semble figé et non modifiable par scriptaculous.

Peut être qu'un spécialiste pourrait expliquer cette différence de comportement?

Merci

Je vais essayer d'expliquer ce qui se passe... et peut être aller un peu trop loin...

D'abord une remarque, je pense qu'avec visibility, ca ne fonctionne pas, c'est avec display qu'il faut le gérer...

Sinon, cela vient de la façon dont prototype teste si un élément est visible ou non, et de la façon dont il gère les show et hide

Code :

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

1
2
3
4
5
6
7
 
  // extrait de prototype
  // ...
  visible: function(element) {
    return $(element).style.display != 'none';
  },
  // ...

Il va directement lire la valeur de style dans la balise de l'élément, qu'il ne trouve pas puisque c'est dans la feuille de style, et non l'element.

En revanche si on fait :

Code :

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

$(element).getStyle("display")

Prototype nous renvoie bien "none"

et si on regarde la fonction getStyle :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  // ...
  getStyle: function(element, style) {
    element = $(element);
    style = style == 'float' ? 'cssFloat' : style.camelize();
    var value = element.style[style];
    if (!value || value == 'auto') {
      var css = document.defaultView.getComputedStyle(element, null);
      value = css ? css[style] : null;
    }
    if (style == 'opacity') return value ? parseFloat(value) : 1.0;
    return value == 'auto' ? null : value;
  },
  // ...

Prototype essaye d'abord de récupérer la valeur dans l'attribut style puis, s'il n'en trouve pas (ou que c'est auto), il va passer par document.defaultView.getComputedStyle ; et effectivement là on a bien 'none' qui revient.

On pourrait donc croire que en changeant la méthode visible, on pourrait y arriver :

Code :

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

1
2
3
4
5
6
 
Element.addMethods({
  visible : function(element) {
    return Element.getStyle(element, "display") != 'none';
  }
});

Mais ça ne suffit pas dans tous les cas : il faut aussi revoir comment fonctionnent les méthodes hide et show.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
  hide: function(element) {
    element = $(element);
    element.style.display = 'none';
    return element;
  },
 
  show: function(element) {
    element = $(element);
    element.style.display = '';
    return element;
  }

Donc hide positionne display à none et show vide la valeur de display du coup il faudrait aussi personnaliser hide et show, et on se retrouve vite à devoir décider de comment on affiche un element en display block ? inline ? ... ce qui va poser des problèmes de montage...

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
Element.addMethods({
  visible : function(element) {
    return Element.getStyle(element, "display") != 'none';
  },

  hide: function(element) {
    element = $(element);
    element.style.display = 'none';
    return element;
  },

  show: function(element) {
    element = $(element);
    element.style.display = 'block';
    return element;
  }
});

A noter que ce que propose prototype en standard est déjà problématique :

Code :

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

1
2
3
4
 
<a href="#" onclick="$('leSpan').toggle():">toggle leSpan </a>
<br/>
  <span>avant</span><span style="display:block;" id="leSpan">leSpan</span><span>apres</span>

**polo42** · 07/10/2009, 09h12

Oups,

Oui c'est bien display qu'il faut modifier.
En tout cas merci pour cette réponse

Effet toggle conteneur fermé à l'ouverture de la page [script.aculo.us]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager