Comment fonctionnent les effets ?

**riadhhwajdii** · 04/09/2009, 11h44

salut, j'ai reussit à utiliser les effets Grow et Shrink de scriptaculous
le probleme est que l'effet n'est pas appliquer à l'élément désiré
en effet ,j'ai un texte qui permet de controler l'affichage d'une image:mais lorsque je clique sur le texte, c'est lui qui disparit non mon image!!
voici ma fonction toggle:

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
 
function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
		new Effect.Shrink(obj, {direction: 'top-left'});
 
	}
	else {
		el.style.display = '';
		new Effect.grow(obj, {direction: 'top-left'});
 
	}
 
}

et voici mon code jsp:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<c:forEach items="#{sWIMmoduleStatistiques.listeModules}" var="m">
 
			<h:panelGroup>
				<br>
				<div class="connectorChartHeader" onclick="toggle('${m.nomChart}');">
				<span class="headerTitle">${m.nom}</span>
				</div>
 
				<br>
				<br>
				<img src="${m.nomChart}" id="${m.nomChart}" />
			</h:panelGroup>
		</c:forEach>

**DiDieuh** · 04/09/2009, 11h59

Peux-tu mettre le code html généré par ton jsp stp ?

**riadhhwajdii** · 04/09/2009, 12h38

Envoyé par DiDieuh

Peux-tu mettre le code html généré par ton jsp stp ?

voici le code generé:

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
 
 
 
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href='/JSFMonitoringJMX/a4j/s/3_2_2.CR3org/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' /><link media='rich-extended-skinning' href='/JSFMonitoringJMX/a4j/s/3_2_2.CR3org/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' /><script type='text/javascript' src='/JSFMonitoringJMX/a4j/g/3_2_2.CR3org.ajax4jsf.javascript.AjaxScript.jsf'></script><script type='text/javascript'>window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script><script type='text/javascript' src='/JSFMonitoringJMX/a4j/g/3_2_2.CR3org/richfaces/renderkit/html/scripts/skinning.js.jsf'></script><meta http-equiv="Cache" content="no store">
    <meta http-equiv="Cache-Control" content="no-cache"> 
	<meta http-equiv="cache-control" content="must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
 
	<meta http-equiv="cache-control" content="max-age=1" />
	<meta http-equiv="Expires" CONTENT="-1">
	<link rel="stylesheet" type="text/css"
	href="/JSFMonitoringJMX/CSS/choixCommandLink.css">
 
<script language="javascript" src="/JSFMonitoringJMX/CSS/fonctionsJS.js"></script>
<script language="javascript" src="/JSFMonitoringJMX/CSS/prototype.js"></script>
<script language="javascript" src="/JSFMonitoringJMX/CSS/scriptaculous.js"></script>
<script language="javascript" src="/JSFMonitoringJMX/CSS/func.js"></script>
 
<link rel="stylesheet" type="text/css" href="/JSFMonitoringJMX/CSS/style_statistiques.css">
 
<style type="text/css">
#conteneur {
	background-color: blue;
	width: 200px;
	height: 150px;
}
 
.exemple {
	margin: 40px;
}
</style>
 
 
 
<title></title>
</head>
<body>
 
 
<div id="page">
	<div id="header">
			</h1>
 
			<div class="description">SWIM Monitoring</div>
 
<form id="j_id_jsp_1541474410_1" name="j_id_jsp_1541474410_1" method="post" action="/JSFMonitoringJMX/pages/modulesStatistiques.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id_jsp_1541474410_1" value="j_id_jsp_1541474410_1" />
 
			<div class="deconnnexion">
<script type="text/javascript" language="Javascript">function dpf(f) {var adp = f.adp;if (adp != null) {for (var i = 0;i < adp.length;i++) {f.removeChild(adp[i]);}}};function apf(f, pvp) {var adp = new Array();f.adp = adp;var i = 0;for (k in pvp) {var p = document.createElement("input");p.type = "hidden";p.name = k;p.value = pvp[k];f.appendChild(p);adp[i++] = p;}};function jsfcljs(f, pvp, t) {apf(f, pvp);var ft = f.target;if (t) {f.target = t;}f.submit();f.target = ft;dpf(f);};</script>
<a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id_jsp_1541474410_1'),{'j_id_jsp_1541474410_1:j_id_jsp_1541474410_2':'j_id_jsp_1541474410_1:j_id_jsp_1541474410_2'},'');}return false">D&eacute;connexion</a></div>
			<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id5" />
</form>
 
	</div>
 
	<div id="mainarea">
	<div id="sidebarnav"><a class="active" href="#">Statistiques</a>
	<h3>Effets Shrink / Grow.</h3>
	<div id="conteneur"></div>
	<select id="effet">
		<optgroup label="Valeur de l'option direction">
			<option value="center">center (défaut)</option>
 
			<option value="top-left">top-left</option>
			<option value="top-right">top-right</option>
			<option value="bottom-left">bottom-left</option>
			<option value="bottom-right">bottom-right</option>
		</optgroup>
	</select><br />
	<input type="button" value="Shrink"
		onclick="new Effect.Shrink('conteneur', {direction: 'top-left'});" />
 
	<input type="button" value="Grow"
		onclick="$('conteneur').grow({direction:'top-left'});" /></div>
	<div></div>
 
 
 
	<div id="contentarea">
	  <table border="0" rules="all">
<tbody>
<tr>
<td>
            <br>
 
             <div class="connectorChartHeader" onclick="toggle('GreeterUMO.png');">
            <span class="headerTitle">"GreeterUMO"</span>
 
        </div>
 
               <br><br>
               <img src="GreeterUMO.png" id="GreeterUMO.png" />
           </td>
<td>
            <br>
 
             <div class="connectorChartHeader" onclick="toggle('NmoduleSMTP.png');">
            <span class="headerTitle">"NmoduleSMTP"</span>
        </div>
 
 
               <br><br>
               <img src="NmoduleSMTP.png" id="NmoduleSMTP.png" />
           </td>
</tr>
<tr>
<td>
            <br>
 
             <div class="connectorChartHeader" onclick="toggle('_muleManagerComponent.png');">
            <span class="headerTitle">"_muleManagerComponent"</span>
        </div>
 
 
               <br><br>
               <img src="_muleManagerComponent.png" id="_muleManagerComponent.png" />
           </td>
<td>
            <br>
 
             <div class="connectorChartHeader" onclick="toggle('SystemErrorHandler.png');">
            <span class="headerTitle">"SystemErrorHandler"</span>
        </div>
 
               <br><br>
 
               <img src="SystemErrorHandler.png" id="SystemErrorHandler.png" />
           </td>
</tr>
<tr>
<td>
            <br>
 
             <div class="connectorChartHeader" onclick="toggle('ChitChatUMO.png');">
            <span class="headerTitle">"ChitChatUMO"</span>
        </div>
 
               <br><br>
 
               <img src="ChitChatUMO.png" id="ChitChatUMO.png" />
           </td>
<td>
            <br>
 
             <div class="connectorChartHeader" onclick="toggle('UserErrorHandler.png');">
            <span class="headerTitle">"UserErrorHandler"</span>
        </div>
 
               <br><br>
               <img src="UserErrorHandler.png" id="UserErrorHandler.png" />
 
           </td>
</tr>
</tbody>
</table>
 
<form id="j_id_jsp_1541474410_5" name="j_id_jsp_1541474410_5" method="post" action="/JSFMonitoringJMX/pages/modulesStatistiques.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id_jsp_1541474410_5" value="j_id_jsp_1541474410_5" />
<span style="display:none;" id="j_id_jsp_1541474410_5:j_id_jsp_1541474410_6"><script type="text/javascript">
A4J.AJAX.Poll('j_id_jsp_1541474410_0','j_id_jsp_1541474410_5',{'pollId':'j_id_jsp_1541474410_5:j_id_jsp_1541474410_6','parameters':{'j_id_jsp_1541474410_5:j_id_jsp_1541474410_6':'j_id_jsp_1541474410_5:j_id_jsp_1541474410_6'} ,'actionUrl':'/JSFMonitoringJMX/pages/modulesStatistiques.jsf','oncomplete':function(request,event,data){remplaceImages();},'pollinterval':4000} );
</script></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id5" />
</form>
 
 
     </div>
 
	</div>
	<div id="footer">
 
 
	</div>
 
 
</div>
 
 
</body></html>

**Bovino** · 04/09/2009, 13h54

Un id ne doit pas contenir de point...

**DiDieuh** · 04/09/2009, 13h55

Dans ce que j'ai vu, dans ton code JS déjà il y a quelquechose qui me choque :

Tu passes en paramètre ta string qui va te permettre de récupérer ta div, d'où ta variable el. Cependant après, quand tu fais appelles à Shrink ou Grow (attention à la casse, javascript y est sensible !) ton premier paramètre n'est pas el, mais obj ^^.

**xk155** · 04/09/2009, 14h02

Pour info,

Scriptaculous étant basé sur prototype :

Code :

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

document.getElementById(obj)

est identique à

Code :

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

$(obj)

**Bovino** · 04/09/2009, 14h04

Envoyé par xk155

Pour info,

Scriptaculous étant basé sur prototype :

Code :

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

document.getElementById(obj)

est identique à

Code :

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

$(obj)

Absolument pas !
$() de Prototype étend les éléments sélectionnés avec toutes les propriétés apportées par la librairie.
Il est très dangereux d'utiliser getElementById quand on travaille avec ce genre de librairie

Comment fonctionnent les effets ?

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager