UI Mobile : Pouvoir scroller une page sur un mobile avec iscroll

**pierro13** · 26/06/2011, 09h47

Bonjour,

Je voudrais faire scroller un tableau sur mobile sous jquery mobile, après pas mal de recherche j'ai trouvé le plugin Iscroll (http://cubiq.org/iscroll-4) malgré le fait qu'il est l'air simple d'accès j'ai du mal a le faire fonctionné

(j'ai essayer de poster sur leur groupe google mais sans réponse).

Exemple :
http://kakkoii.fr/scroll/

Index :
http://jsbin.com/ilugoh/edit

Deuxieme pages (tableau) :
http://jsbin.com/uganin/edit

J'ai essayer

Code :

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

myScroll = new iScroll('wrapper', { checkDOMChanges: true });

mais sans succès nonplus.

**danielhagnoul** · 26/06/2011, 22h42

Sur http://kakkoii.fr/scroll/, Firebug signale une erreur : uncaught exception: TypeError: that.wrapper is null.

Pourquoi avoir inclus le plugin dans le première page alors que la division d'ID "wrapper" est dans la page suivante ?

**pierro13** · 28/06/2011, 08h00

Cela vient sans doute du fait que je débute en javascript, mais ce que j'ai constaté en developant sur jquery mobile est :

Que si la page 1 contient des scripts, ils restent charger dans la page 2 même si la page 2 n'en contient pas, alors que lorsque que j'execute un script ou un style dans le head dans la page 2 il n'a pas l'air d'être prit en compte.

Ex : on peux même faire la deuxieme page sans head et sans chargement de script si l'on vient de la page 1 qui les contient.

Néanmoin je sérait très intéressé de savoir comment on doit intégré normalment ce plugin, si vous pouviez avoir la bonté de me faire une petite démonstration je vous en serez fort reconnaissant.

**danielhagnoul** · 29/06/2011, 01h21

Bonsoir

Le plugin iScroll est destiné au mobile webkit ! N'ayant aucun mobile ou tablette, je n'ai aucun moyen de testé. J'utilise les navigateurs Chrome ou Firefox.

Voici mes fichiers de test modifiés pour le "scroll" maison.

Fichier de départ, TestPage1.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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page Title</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />  
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">	
            <h2>Page 1</h2>
			<a href="TestPage23.php" rel="external">VERS LA PAGE 2</a>
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <script>
		// le code ne fonctionne pas, il ne modifie pas le texte de
		// la Page 2 Section 3
        $(window).load(function(){
           $("#section23").css({
				"font-family": "cursive !important",
				"font-size": "0.95em !important"
			});
        });
    </script>
</body>
</html>

Seconde page, TestPage23.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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page Title</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />  
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Page 2 Section 1</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 1</h2>
			<ul data-role="listview" data-inset="true">
				<li data-role="list-divider">Menu de la Page 2</li>
				<li><a href="#section22">Page 2 Section 2</a></li>
				<li><a href="#section23">Page 2 Section 3</a></li>
				<li><a href="#section24">Page 2 Section 4</a></li>
				<li><a href="#section25">Page 2 Section 5</a></li>
			</ul>
 
			<div id="divID"></div>
 
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section22" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 2</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 2</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section23" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 3</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 3</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section24" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 4</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 4</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section25" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 5</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 5</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <script>
		(function($){
			$.dvjhGoUp = function(options){
				var opts = $.extend(true, {}, $.dvjhGoUp.defaults, options);
 
				$("<img/>", {
					id:opts.imgId,
					src:opts.imgSrc,
					css:{
						display:"none",
						position:"fixed",
						bottom:opts.bottom,
						right:opts.right,
						width:opts.imgWidth,
						height:opts.imgHeight,
						border:opts.imgBorder,
						cursor:opts.imgCursor
					},
					alt:opts.imgAlt,
					title:opts.imgTitle,
					click:function(){
						$("html, body").animate({scrollTop: "0px"}, opts.scrollDelay);
						return false;						
					}
				}).appendTo("body");
 
				$(window).bind("scroll", function() {
					var obj = $("#"+opts.imgId);
 
					if ($(this).scrollTop() > opts.scrollImg){ 
						obj.fadeIn(opts.imgFadeInDelay);
					} else { 
						obj.fadeOut(opts.imgFadeOutDelay);
					}
				});
			};
 
			$.dvjhGoUp.defaults = {
				bottom: "6px", // position fixed bottomRight
				right: "6px", // position fixed bottomRight
				imgId: "dvjhGoUp",
				imgSrc: "http://danielhagnoul.developpez.com/images/dvjhGoUp.png", // exemple : "images/dvjhGoUp.png"
				imgAlt: "Monter. Go up.",
				imgTitle: "Monter. Go up.",
				imgWidth: "50px",
				imgHeight: "48px",
				imgBorder: "none",
				imgCursor: "pointer",
				imgFadeInDelay: 800, // 0.8s
				imgFadeOutDelay: 800, // 0.8s
				scrollImg: 300, // distance de scroll, en px, avant l'apparition ou la disparition de l'image
				scrollDelay: 2000 // durÃ©e de l'animation 2s
			};
		})(jQuery);
 
		$(window).load(function(){
			// le code fonctionne, il modifie le texte de
			// la Page 2 Section 4
			$("#section24").css({
				"font-family": "cursive !important",
				"font-size": "0.95em !important"
			});
 
			/***************************
			* Speed Table By SpaceFrog *
			**************************/
			function buildTable(destObj, nbrLines, nbrCells){			
				var baliseTable = document.createElement('table'),
					baliseTbody = document.createElement('tbody');
 
				baliseTable.id = "foo";
 
				for(var i = 0; i < nbrLines; i++){
					new addLine(baliseTbody, nbrLines, nbrCells, i);
				}
 
				baliseTable.appendChild(baliseTbody);
				destObj.appendChild(baliseTable);
				document.close();
			}
 
			function addLine(destBody, nbrLines, nbrCells, contenu){
				var newLine = document.createElement('tr');
 
				for(var l=0; l < nbrCells; l++){
					new addCells(newLine, contenu + '_' + l);
				}
 
				destBody.appendChild(newLine);
			}
 
			function addCells(destLine, contenu){
				var newCell = document.createElement('td');
 
				newCell.style.border = "solid 1px gray";
				newCell.appendChild(document.createTextNode('Cellule ' + contenu));
				destLine.appendChild(newCell);
			}
			//-----------------------
 
			/*
			 * On construit, très rapidement, une grande
			 * table de test d'ID "foo", en utilisant la
			 * fonction BuildTable de @SpaceFrog.
			 *
			 * (élément du DOM, nb de lignes, nb de colonnes)
			 */
			buildTable($("#divID")[0], 2000, 6);
 
			// pour remonter voir mon Cahier d'exercices
			$.dvjhGoUp();
 
			// On va vers la fin de la table
			$('html,body').animate({
				'scrollTop': ($("body").innerHeight() + $("#divID").innerHeight()) + "px"
			}, 10000);
        });
    </script>
</body>
</html>

**pierro13** · 30/06/2011, 18h08

Bonjour,
Désolé pour mon léger retard, j'ai une bonne et une mauvaise nouvelle.

- la mauvaise c'est que ça ne marche pas...
- la bonne c'est qu’il est possible de tester et reproduire l'utilisation mobile uniquement via chrome

J'ai réalisé cet page (car j'arrive a faire fonctionné le plugin lorsqu'il est que sur une page).

En utilisant le clic gauche de la souris sans lâcher sur le tableau on peux reproduire le mouvement du doigt sur mobile. (on voit les ascenseurs non natif lors des scroll)

http://jsbin.com/ozorox/edit