jQuery Forum

Need help regarding iscroll
[2Replies]
- 07-May-2012 06:15 AM
- Forum: Developing jQuery Mobile
HI, I am facing problem related to iscroll.js use in my two pages.

I have two pages named page1, page2.

both have the same structure like
1. <html>
2. <head>
3. // here i am including all the link and script files in a proper order, except my script file
4. </head>
5. <body>
6. <div data-role="page">
7. <div data-role="header">
8. </div>
9. <div data-role="content">
10. <div id="wrapper">
11. <div id="scroller">
12. //some list view
13. </div>
14. </div>
15. </div>
16. <div data-role="footer">
17. </div>
18. <script>
19. $(window).on("pageshow",":jqmData(role='page')",function(event){
20. pullDownEl = document.getElementById('pullDown');
21. pullDownOffset = pullDownEl.offsetHeight;
22. myScroll = new iScroll('wrapper',{
23. useTransition: true,
24. topOffset: pullDownOffset,
25. onRefresh: function(){
26. if (pullDownEl.className.match('loading')) {
27. pullDownEl.className = '';
28. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
29. }
30. },
32. onScrollMove: function(){
33. if (this.y > 50 && !pullDownEl.className.match('flip')) {
34. pullDownEl.className = 'flip';
35. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
36. this.minScrollY = 0;
37. } else if (this.y < 50 && pullDownEl.className.match('flip')) {
38. pullDownEl.className = '';
39. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
40. this.minScrollY = -pullDownOffset;
41. }
42. },
43. onScrollEnd: function(){
44. if (pullDownEl.className.match('flip')) {
45. pullDownEl.className = 'loading';
46. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
47. pullDownAction(); // Execute custom function (ajax call?)
48. }
49. }
50. });
51. document.addEventListener('touchmove', function (e) {e.preventDefault(); }, false);
52. });
53. </script>
54. </body>
55. </html>
the page one is the default page of my application. Here page1 loads at that time iscroll works perfect with pull to refresh functionality. but when i click on second page (page2) link and when it loads page2 at that time iscoll is not working and not showing any error too.

i have tried myScroll.refresh() and myScroll.destroy() functions on each page

anyone knows why this is happening?

Where to use javascript to apply on navigation bar?
[0Replies]
- 04-Apr-2012 03:02 AM
- Forum: Developing jQuery Mobile
HI,

I have applied scrolling to the navigation bar using iscroll-4 (www.cubiq.org). It works fine with page refresh. But when i navigate to the different page, it stop working.

The code i have used is :
1. <script src="./iscroll.js"></script>
2. <script>
3. $(document).ready(function(){
4. FooNavScroll = new iScroll('footerwrapper',{hScroll: true, vScroll: false, hScrollbar: true });
5. });
6. </script>
7. <body>
8. <dev data-role="page">
9. <div data-role="header">
10. </div>
11. <div data-role="content">
12. </div>
13. </div data-role="footer">
14. <div id="footerwrapper">
15. <div data-role="navbar" data_theme="a" data_iconpos="left" >
16. <ul>
17. <li>item1</li>
18. <li>item2</li>
19. <li>item3</li>
20. <li>item4</li>
21. </ul>
22. </div>
23. </div>
24. </div>
25. </div>
26. </body>
this code works on each page if i have went there directly. but when i go through navigation then it doesnt work.
What i know is:
1. $(document).ready(function(){
2. FooNavScroll = new iScroll('footerwrapper',{hScroll: true, vScroll: false, hScrollbar: true });
3. });
this function will not gonna call on each navigation it will only call on page refresh/new visit.
so i try to put this code in 'pageshow function like:
1. $("div:jqmData(role='page')").live('', function () {
2. FooNavScroll = new iScroll('footerwrapper',{hScroll: true, vScroll: false, hScrollbar: true });
3. });
but this is not working at all.
can any one please tell me why this is happening?

Scrollview For JQuery Mobile
[6Replies]
- 29-Mar-2012 12:24 AM
- Forum: Developing jQuery Mobile
Hi,

From past few days i was trying to use scrollview in one of my project. But there is no official scrollview support is available from JQuery Mobile. I came to know about iscroll-4 (www.cubiq.com). Its quite good. they provides scollview, pull to refresh and other usefull functionality. But use of only iscroll.js is not enough to get good scrollview.

I have some trick that works fine.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
7. <style>
8. #wrapper {
9. position:absolute;
10. z-index:1;
11. top:45px;
12. bottom:48px;
13. left:0;
14. width:100%;
15. background:#aaa;
16. overflow:auto;
17. }
19. #scroller {
20. position:absolute;
21. z-index:1;
22. -webkit-tap-highlight-color:rgba(0,0,0,0);
23. width:100%;
24. padding:0;
25. }
26. </style>
27. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
28. <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
29. <script src="./jquery.easing.1.3.js"></script>
30. <script src="./jquery.mobile.scrollview.js"></script>
31. <script src="./scrollview.js"></script>
32. <script src="./iscroll.js"></script>
33. <script>
34. var myScroll;
35. function loaded() {
36. myScroll = new iScroll('wrapper');
37. }
38. document.addEventListener('DOMContentLoaded', loaded, false);
39. </script>
40. </head>
41. <body>
42. 
43. <div data-role="content" data-scroll="false>
44. <div id="wrapper">
45. <div id="scroller">
46. 
47. </div>
48. </div>
49. </div>
50. 
51. </body>
52. </html>

Response title

Attachments

jQuery Forum

Activity Trend