un scroll qui se desactive en utilisant Ajax

[sooprano]

salut je suis entrain développé un portfolio des artistes en html5 et css3
voici lien en demo pour vous montré le problème http://www.saaa.ma/test/art/

vous cliquez sur les menu ci dessous tous marche bien sauf dans menu Artists

j'ai mis des photos d'artistes puis quand vous cliquez dessus vous pouvez rentré dans le Texte de cette dernière

pour réalisé ça j'ai utilisé Ajax, jusqu’à maintenant c'est bon

pour zoomer le problème c'est quand je clique sur la première image du l'artiste, j'ai un long text, normalement il dois m'afficher un scroll en jquery a droite, le scroll ne s'active pas ainsi le texte se montre manquant

mais quand je clique sur autre menu puis recliquer sur au artists le scroll Marche très bien, il me semble après utilisation D'ajax le scroll ne s'active pas a nouveau

je pense que j'ai besoin reactiver ma page pour que le scroll s'active a nouveau

voici mon code jquery

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
 
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
		<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var $menu			= $('#menu'),
				$menuItems			= $menu.children('li'),
 
				/*$menu1			    = $('#menu li ul'),
				$menuItems1			= $menu1.children('li'),*/
 
				$mbWrapper			= $('#mb_content_wrapper'),
				$mbClose			= $mbWrapper.children('.mb_close'),
				$mbContentItems		= $mbWrapper.children('.mb_content'),
				$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
				$mbPattern			= $('#mb_pattern'),
				$works				= $('#mb_imagelists > li'),
				$mb_bgimage			= $('#mb_background > img'),
 
				Menu		 		= (function(){
 
					var init		= function() {
						preloadImages();
						initPlugins();
						initPattern();
						initEventsHandler();
					},
					//preloads the images for the work area (data-bgimg attr)
					preloadImages	= function() {
						$works.each(function(i) {
							$('<img/>').attr('src' , $(this).children('img').data('bgimg'));
						});
					},
					//initialise the jScollPane (scroll plugin)
					initPlugins		= function() {
						$mbContentInnerItems.jScrollPane({
							verticalDragMinHeight: 40,
							verticalDragMaxHeight: 40
						});
					},
					/*
						draws 16 boxes on a specific area of the page.
						we randomly calculate the top, left, and rotation angle for each one of them
					 */
					initPattern		= function() {
						for(var i = 0; i < 16 ; ++i) {
							//random opacity, top, left and angle
							var o		= 0.1,
							t		= Math.floor(Math.random()*196) + 5, // between 5 and 200
							l		= Math.floor(Math.random()*696) + 5, // between 5 and 700
							a		= Math.floor(Math.random()*101) - 50; // between -50 and 50
 
							$el		= $('<div>').css({
								opacity			: o,
								top				: t + 'px',
								left			: l + 'px'
							});
 
							if (!$.browser.msie)
								$el.transform({'rotate'	: a + 'deg'});
 
							$el.appendTo($mbPattern);
						}
						$mbPattern.children().draggable(); //just for fun
					},
					/*
						when the User closes a content item, we move the boxes back to the original place,
						with new random values for top, left and angle though
					 */
					disperse 		= function() {
						$mbPattern.children().each(function(i) {
							//random opacity, top, left and angle
							var o			= 0.1,
							t			= Math.floor(Math.random()*196) + 5, // between 5 and 200
							l			= Math.floor(Math.random()*696) + 5, // between 5 and 700
							a			= Math.floor(Math.random()*101) - 50; // between -50 and 50
							$el			= $(this),
							param		= {
								width	: '50px',
								height	: '50px',
								opacity	: o,
								top		: t + 'px',
								left	: l + 'px'
							};
 
							if (!$.browser.msie)
								param.rotate	= a + 'deg';
 
							$el.animate(param, 1000, 'easeOutExpo');
						});
					},
					initEventsHandler	= function() {
						/*
							click a link in the menu
						 */
						$menuItems.bind('click', function(e) {
							var $this	= $(this),
							pos		= $this.index(),
							speed	= $this.data('speed'),
							easing	= $this.data('easing');
							//if an item is not yet shown
							if(!$menu.data('open')){
								//if current animating return
								if($menu.data('moving')) return false;
								$menu.data('moving', true);
								$.when(openItem(pos, speed, easing)).done(function(){
									$menu.data({
										open	: true,
										moving	: false
									});
									showContentItem(pos);
									$mbPattern.children().fadeOut(500);
								});
							}
							else
								showContentItem(pos);
							return false;
						});
 
						/*
							click close makes the boxes animate to the top of the page
						 */
						$mbClose.bind('click', function(e) {
							$menu.data('open', false);
							/*
								if we would want to show the default image when we close:
								changeBGImage('images/default.jpg');
							 */
							$mbPattern.children().fadeIn(500, function() {
								$mbContentItems.hide();
								$mbWrapper.hide();
							});
 
							disperse();
							return false;
						});
 
						/*
							click an image from "Works" content item,
							displays the image on the background
						 */
						$works.bind('click', function(e) {
							var source	= $(this).children('img').data('bgimg');
							changeBGImage(source);
							return false;
						});
 
					},
					/*
						changes the background image
					 */
					changeBGImage		= function(img) {
						//if its the current one return
						if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
							return false;
 
						var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
						$itemImage.insertBefore($mb_bgimage);
 
						$mb_bgimage.fadeOut(1000, function() {
							$(this).remove();
							$mb_bgimage = $itemImage;
						});
						$itemImage.fadeIn(1000);
					},
					/*
						This shows a content item when there is already one shown:
					 */
					showContentItem		= function(pos) {
						$mbContentItems.hide();
						$mbWrapper.show();
						$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
					},
					/*
						moves the boxes from the top to the center of the page,
						and shows the respective content item
					 */
					openItem			= function(pos, speed, easing) {
						return $.Deferred(
						function(dfd) {
							$mbPattern.children().each(function(i) {
								var $el			= $(this),
								param		= {
									width	: '100px',
									height	: '100px',
									top		: 154 + 100 * Math.floor(i/4),
									left	: 200 + 100 * (i%4),
									opacity	: 1
								};
 
								if (!$.browser.msie)
									param.rotate	= '0deg';
 
								$el.animate(param, speed, easing, dfd.resolve);
							});
						}
					).promise();
					};
 
					return {
						init : init
					};
 
				})();
 
				/*
					call the init method of Menu
				 */
				Menu.init();
			});
		</script>

page html

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!--------------------Partie Menu Artists--------------------!-->
 
			<div class="mb_content">
              <div id="retour" class="retour"><a href="#" onclick="ajax('artistes.html', '#mb_content_ajax'); return false ">back</a> </div>
				<h2>artists <span id="message" class="loading_hiden"></span></h2>
				<div class="mb_content_inner">
					<div id="#mb_content_ajax">
					<ul id="mb_imagelist" class="mb_imagelist">
						<li><a href="conseil.html" onclick="ajax('ikram.html', '#mb_content_ajax'); return false " data-speed="1000" data-easing="easeOutBack"><img src="images/small/1.png" alt="Ikram kebbaj" title="Ikram KEBBAJ"  ></a></li>
						<li><a href="#"><img src="images/small/2.png" alt="Fathiya tahiri" title="Fathiya TAHIRI"  ></a></li>
                        <li><a href="#"><img src="images/small/3.png" alt="Noureddine chater" title="Noureddine CHATER"  ></a></li>
                        <li><a href="#"><img src="images/small/4.png" alt="sanae Alami" title="Sanaë ALAMI"  ></a></li>
 
					</ul>
 
					</div>
				</div>
			</div>
 
            <!------------------Fin----------------------!-->

Le scroll s'active a l'interieur du Div .mb_content_inner

[danielhagnoul]

Bonsoir

il me semble après utilisation D'ajax le scroll ne s'active pas a nouveau

Avec jQuery 1.7+ : http://api.jquery.com/on/ : $( selectorParent ).on( events , selector , handler );.

Avant 1.7, delegate : http://api.jquery.com/delegate/

[sooprano]

Envoyé par danielhagnoul

Bonsoir



Avec jQuery 1.7+ : http://api.jquery.com/on/ : $( selectorParent ).on( events , selector , handler );.

Avant 1.7, delegate : http://api.jquery.com/delegate/

bonsoir

le scroll est réalisé en Jquery, y a t'il pas un moyen de reactivé le scroll en jquery

[Bovino]

T'as au moins pris la peine de regarder les liens proposés ?

[zapmtl]

Salut,

J'utilise jScrollPane.js

Affiche ta zone puis

Code :

$('#zone').jScrollPane({showArrows:false,scrollbarWidth:6});

ou pour effacer

Code :

$('#zone').jScrollPaneRemove();

[sooprano]

Merci pour vos réponses

maintenant j'ai ajouté une gallery en jquery, et qui s'affiche en l'appelant via Ajax, j'ai eu le même problème que jscrollpanc'est à dire que je dois re cliquer sur le même menu pour qu'il s'activent

après l'analyse de mon code j'ai trouver le code, mais j'ai pas pu intervenir, ce que je veux c'est quand je clique sur un menu par exemple gallery, je veux simuler c'est comme si j'ai fais un double clique, je pense comme ça le contenu va prendre en considération Mon jscrollpanet gallery jquery

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
 
var          $menu	        = $('#menu'),
	      $menuItems	= $menu.children('li'),
              $mbWrapper	= $('#mb_content_wrapper');
 
 
initEventsHandler	= function() {
						/*
							click a link in the menu
						 */
						$menuItems.bind('click', function(e) {
							var $this	= $(this),
							pos		= $this.index(),
							speed	= $this.data('speed'),
							easing	= $this.data('easing');
							//if an item is not yet shown
 
							if(!$menu.data('open')){
 
 
								//if current animating return
 
 
								if($menu.data('moving')) return false;
 
								$menu.data('moving', true);
								$.when(openItem(pos, speed, easing)).done(function(){
									$menu.data({
										open	: true,
										moving	: false
									});
									showContentItem(pos);
									$mbPattern.children().fadeOut(500);
								});
							}
							else
 
							//$mbWrapper.css("border", "1px solid red");
								showContentItem(pos);
							return false;
						});
});

html

Code :

1
2
3
4
<ul id="menu" class="menu" >
<li><a href="#" data-speed="1000" data-easing="easeInExpo">gallery</a>
                    </li>
</ul>

pour une visualisation total voici lien http://www.saaa.ma/test/art/