Modifier un tutoriel jQuery et l'utiliser dans un site qui utilise Prototype [Résolu]

[neoseeyou]

Bonjour a tous,

Voila je commence dans le javascript, jquery et ajax, et je suis tombé sur un tutorial http://tympanus.net/codrops/2011/03/...-content-menu/

En effet j'ai trouvé cette présentation de site plutot sympa et j'aimerais le modifier à ma convenance pour l'utiliser sur un projet perso.

J'aurai deux soucis lié a jquery; le site fonctionne avec prototype pour préciser.

première question: le menu disparait pour laissé la place a un sous contenu, je sais modifier le js pour que le menu ne disparaisse pas, et affiche le sous contenu mais pour fermer le sous contenu il faut cliquer sur la croix or j'aimerais que le sous contenu se ferme en cliquant sur un autre element du menu qui laisserait apparaitre son sous contenu associé (je ne sais pas si j'ai été clair dans mon attente). Ainsi il y aurait tout le temps un sous contenu d'afficher (et non un background vide).

deuxieme question: comment faire en js pour qu'apres que la page se soit chargé une fonction click fasse apparaitre un sous contenu directement?

Merci d'avance pour vos réponses
R

[RomainVALERI]

A ce propos :

Envoyé par neoseeyou

J'aurai deux soucis lié a jquery; le site fonctionne avec prototype pour préciser.

Tu veux dire que tu utilises actuellement déjà la librairie Prototype, et que tu envisages d'inclure jQuery en plus c'est ça ?

[neoseeyou]

Excuse moi je me suis mal exprimé, effectivement cet exemple utilise la librairie jquery et la librairie prototype. Mon soucis est la modification ou l'ajout de code pour le faire fonctionner comme je le souhaiterais ca m'enerve de pas trouver en plus grrrr

[RomainVALERI]

Envoyé par neoseeyou

Excuse moi je me suis mal exprimé, effectivement cet exemple utilise la librairie jquery et la librairie prototype. Mon soucis est la modification ou l'ajout de code pour le faire fonctionner comme je le souhaiterais ca m'enerve de pas trouver en plus grrrr

Heu... ok mais : pourquoi deux librairies ?

---

et en ce qui concerne le problème que tu décris... même avec un extrait de code pertinent je ne suis pas sur qu'on s'en sorte avec tes explications du début
...donc si tu veux bien :
1) Montre-nous le bout de code concerné (ou tout le JS si tu n'es pas sûr de ton coup et qu'il n'est pas trop grand)(pas les libs, hein ^^ juste le JS spécifique à la page)
2) Décris (avec éventuelle copie d'écran) ce que tu obtiens et explique aussi ce que tu voudrais obtenir

[neoseeyou]

oui c'est bien ce que je pensais pas forcement évident de décrire ce que je souhaite au premier abord.

Comme je le précisais je commence dans javascript mais je me forme chaque jour un peu plus or dans le tutoriel et dans les fichiers que tu peux télécharger d'ailleurs il y a la bibliotheque prototype.js mais aussi jquery easing et min, alors pourquoi charger deux biblio la je ne sais pas

Je te copie le Js mais si tu as besoin a cette adresse tu peux avoir les fichiers sources (et oui t'inquiete pas les libs ca sera pour uine autre fois )

http://tympanus.net/Tutorials/Animat...ontentMenu.zip

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
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
 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript">
			$(function() {
				var $ac_background	= $('#ac_background'),
				$ac_bgimage		= $ac_background.find('.ac_bgimage'),
				$ac_loading		= $ac_background.find('.ac_loading'),
 
				$ac_content		= $('#ac_content'),
				$title			= $ac_content.find('h1'),
				$menu			= $ac_content.find('.ac_menu'),
				$mainNav		= $menu.find('ul:first'),
				$menuItems		= $mainNav.children('li'),
				totalItems		= $menuItems.length,
				$ItemImages		= new Array();
 
				/* 
				for this menu, we will preload all the images. 
				let's add all the image sources to an array,
				including the bg image
				*/
				$menuItems.each(function(i) {
					$ItemImages.push($(this).children('a:first').attr('href'));
				});
				$ItemImages.push($ac_bgimage.attr('src'));
 
 
				var Menu 			= (function(){
					var init				= function() {
						loadPage();
						initWindowEvent();
					},
					loadPage			= function() {
						/*
							1- loads the bg image and all the item images;
							2- shows the bg image;
							3- shows / slides out the menu;
							4- shows the menu items;
							5- initializes the menu items events
						 */
						$ac_loading.show();//show loading status image
						$.when(loadImages()).done(function(){
							$.when(showBGImage()).done(function(){
								//hide the loading status image
								$ac_loading.hide();
								$.when(slideOutMenu()).done(function(){
										$.when(toggleMenuItems('up')).done(function(){
										initEventsSubMenu();
									});
								});
							});
						});
					},
					showBGImage			= function() {
						return $.Deferred(
						function(dfd) {
							//adjusts the dimensions of the image to fit the screen
							adjustImageSize($ac_bgimage);
							$ac_bgimage.fadeIn(1000, dfd.resolve);
						}
					).promise();
					},
					slideOutMenu		= function() {
						/* calculate new width for the menu */
						var new_w	= $(window).width() - $title.outerWidth(true);
						return $.Deferred(
						function(dfd) {
							//slides out the menu
							$menu.stop()
							.animate({
								width	: new_w + 'px'
							}, 700, dfd.resolve);
						}
					).promise();
					},
						/* shows / hides the menu items */
						toggleMenuItems		= function(dir) {
						return $.Deferred(
						function(dfd) {
							/*
							slides in / out the items. 
							different animation time for each one.
							*/
							$menuItems.each(function(i) {
										var $el_title	= $(this).children('a:first'),
											marginTop, opacity, easing;
										if(dir === 'up'){
											marginTop	= '0px';
											opacity		= 1;
											easing		= 'easeOutBack';
										}
										else if(dir === 'down'){
											marginTop	= '60px';
											opacity		= 0;
											easing		= 'easeInBack';
						}
								$el_title.stop()
								.animate({
													marginTop	: marginTop,
													opacity		: opacity
												 }, 200 + i * 200 , easing, function(){
									if(i === totalItems - 1)
										dfd.resolve();
								});
							});
						}
					).promise();
					},
					initEventsSubMenu	= function() {
						$menuItems.each(function(i) {
							var $item		= $(this), // the <li>
							$el_title	= $item.children('a:first'),
							el_image	= $el_title.attr('href'),
							$sub_menu	= $item.find('.ac_subitem'),
							$ac_close	= $sub_menu.find('.ac_close');
 
							/* user clicks one item : appetizers | main course | desserts | wines | specials */
							$el_title.bind('click.Menu', function(e) {
									$.when(toggleMenuItems('down')).done(function(){
									openSubMenu($item, $sub_menu, el_image);
								});
								return false;
							});
							/* closes the submenu */
							$ac_close.bind('click.Menu', function(e) {
								closeSubMenu($sub_menu);
								return false;
							});
						});
					},
					openSubMenu			= function($item, $sub_menu, el_image) {
						$sub_menu.stop()
						.animate({
							height		: '400px',
							marginTop	: '-200px'
						}, 400, function() {
										//the bg image changes
							showItemImage(el_image);
						});
					},
						/* changes the background image */
					showItemImage		= function(source) {
							//if its the current one return
						if($ac_bgimage.attr('src') === source)
							return false;
 
						var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
						$itemImage.insertBefore($ac_bgimage);
						adjustImageSize($itemImage);
						$ac_bgimage.fadeOut(1500, function() {
							$(this).remove();
							$ac_bgimage = $itemImage;
						});
						$itemImage.fadeIn(1500);
					},
					closeSubMenu		= function($sub_menu) {
						$sub_menu.stop()
						.animate({
							height		: '0px',
							marginTop	: '0px'
						}, 400, function() {
							//show items
										toggleMenuItems('up');
						});
					},
						/*
						on window resize, ajust the bg image dimentions,
						and recalculate the menus width
						*/
					initWindowEvent		= function() {
						/* on window resize set the width for the menu */
						$(window).bind('resize.Menu' , function(e) {
							adjustImageSize($ac_bgimage);
							/* calculate new width for the menu */
							var new_w	= $(window).width() - $title.outerWidth(true);
							$menu.css('width', new_w + 'px');
						});
					},
						/* makes an image "fullscreen" and centered */
					adjustImageSize		= function($img) {
						var w_w	= $(window).width(),
						w_h	= $(window).height(),
						r_w	= w_h / w_w,
						i_w	= $img.width(),
						i_h	= $img.height(),
						r_i	= i_h / i_w,
						new_w,new_h,
						new_left,new_top;
 
						if(r_w > r_i){
							new_h	= w_h;
							new_w	= w_h / r_i;
						}
						else{
							new_h	= w_w * r_i;
							new_w	= w_w;
						}
 
						$img.css({
							width	: new_w + 'px',
							height	: new_h + 'px',
							left	: (w_w - new_w) / 2 + 'px',
							top		: (w_h - new_h) / 2 + 'px'
						});
					},
						/* preloads a set of images */
					loadImages			= function() {
						return $.Deferred(
						function(dfd) {
							var total_images 	= $ItemImages.length,
							loaded			= 0;
							for(var i = 0; i < total_images; ++i){
								$('<img/>').load(function() {
									++loaded;
									if(loaded === total_images)
										dfd.resolve();
								}).attr('src' , $ItemImages[i]);
							}
						}
					).promise();
					};
 
					return {
						init : init
					};
				})();
 
				/*
			call the init method of Menu
				 */
				Menu.init();
			});
		</script>

http://www.totalwebdesign.fr/screen.jpg

[RomainVALERI]

Heu...

Je crois que je vais attendre qu'un Gentil Modérateur® accepte de ... nous aider à nettoyer un peu tout ça (balises code autour des extraits, redimensionnement de l'image si possible sinon mise en lien)

Où est mon collyre ?

(cela dit les annotations sont nickel ça a le mérite de la clarté)

[neoseeyou]

oui j'avoue je l'ai fait a la bourrin la, c'est pour ca que j'ai filé le lien avec le fichier html contenant le code js. Pour la photo désolé j'ai fait ca rapidos donc pas fait le redimensionnement. Mais bon si tu as des idées je suis preneur
Et je te fournirais du collyre promis

[danielhagnoul]

Bonsoir

1. Voila je commence dans le javascript, jquery et ajax, et ...
2. j'aimerais le modifier à ma convenance ...
3. le site fonctionne avec prototype pour préciser.

Les points 1, 2 et 3 sont incompatibles entre eux.

Vouloir modifier un tutoriel de ce niveau en débutant, non seulement en jQuery, mais en JS c'est se bercer d'utopies.

Incorporé le travail final dans un site qui utilise Prototype, c'est

Je vous prédis une perte de temps ou une catastrophe.

[neoseeyou]

Ok merci Daniel, en effet comme tu le dis a mon niveau ca risque d'etre une perte de temps vu le manque de connaissance technique, trop d'elements à maitriser pour modifier comme je le voudrais, je vais me pencher d'avantages sur les bases (en javascript, jquery et ajax) avant de revenir sur ce que je souhaite réaliser

Merci d'avoir pris le temps de me répondre