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

danielhagnoul · 02/07/2011, 09h33

Citation:

Envoyé par danielhagnoul

Bonsoir

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

26/06/2011, 09h47	#1
pierro13 Invité de passage Inscription : juin 2011 Messages : 9 Détails du profil Informations forums : Inscription : juin 2011 Messages : 9 Points : 0 Points : 0	UI Mobile : Pouvoir scroller une page sur un mobile avec iscroll 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.
	00

26/06/2011, 22h42	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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 ? __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

28/06/2011, 08h00	#3
pierro13 Invité de passage Inscription : juin 2011 Messages : 9 Détails du profil Informations forums : Inscription : juin 2011 Messages : 9 Points : 0 Points : 0	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.
	00

30/06/2011, 18h08	#5
pierro13 Invité de passage Inscription : juin 2011 Messages : 9 Détails du profil Informations forums : Inscription : juin 2011 Messages : 9 Points : 0 Points : 0	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email