Search jQuery

jQuery Forum

Need help regarding iscroll

in Developing jQuery Mobile • 11 years ago

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

<html>
<head>
// here i am including all the link and script files in a proper order, except my script file
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
<div id="wrapper">
<div id="scroller">
//some list view
</div>
</div>
</div>
<div data-role="footer">
</div>
<script>
$(window).on("pageshow",":jqmData(role='page')",function(event){
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll('wrapper',{
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function(){
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove: function(){
if (this.y > 50 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 50 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function(){
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
}
}
});
document.addEventListener('touchmove', function (e) {e.preventDefault(); }, false);
});
</script>
</body>
</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?

Replies(2)

watusiware

Re: Need help regarding iscroll

11 years ago

You haven't shown enough to determine what the problem is. You haven't shown content of <head>. You haven't shown Page 2, so I can only guess what Page 2 looks like. My GUESS is below...

Pages are not documents. JQM loads multiple pages into a document (minimum 2, to support transitions. When transitioning, you have to have to leaving and entering pages in the document.) Pages that aren't shown are hidden.

Both page 1 and page 2 have the same ID for the wrapper element. It is illegal in HTML to have two elements with the same ID. The result is browser-dependent. Obviously, an operating involving an ID, the browser has to pick one. Most likely the first, but this is dependent on the browser.

When you switch to the second page, you're just re-initializing the first scroller.

You might want to try my widget for iScroll:

https://github.com/watusi/jquery-mobile-iscrollview

It makes it a lot easier to set-up iScroll in a jQuery Mobile project. It's designed to merge JQM and iScroll in an optimal way. For example, it constructs the scroller at pagecreate, not pageshow, avoid visual distraction. It handles orientation change. Form input works. Etc. etc. etc.

I see you are doing pull-to-refresh. While this is not currently a feature of the widget, you can do it with a bit of code, and I'll be adding an example to the demo later today.

Saurin Da..

Re: Need help regarding iscroll

11 years ago

Hi first of all thanks for reply.
I have checked your https://github.com/watusi/jquery-mobile-iscrollview link it woks great. Great work done. The only thing missing is pull to refresh. i have checked out your demo pull to refresh page, but its not working and the problem is pull to refresh is mandatory for my project. If you can manage with that functionality then it would be a great help to me and other developers like me.

Besides as you have asked for more details about my pages then what i am developing is a Joomla! component with plugin facility. My each plugin fetches data from my another component and generates pages. each plugin is diffrent from each other and having related js and css files. When a particulate plugin is call than related js and css should include inside the dom. you can have a batter look here:

The Page1 and Page2 looks like this (they both have same files included in it):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0-rc.1.css" />
<link rel="stylesheet" href="./css/ijoomerwa.css" />
<script src="./js/jquery-1.7.1.js"></script>
<script src="./js/iscroll.js"></script>
<script src="./js/my_custom_js_for_all_pages.js"></script>//this file contains the javascript function written below this page
<script src="./js/jquery.mobile-1.1.0-rc.1.js"></script>
<script src="./js/jquery.mobile.scrollview.js"></script>
<script src="./js/scrollview.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<link rel="stylesheet" href="./css/plugin_level_style.css" />
<script src="./js/plugin_level_js.js"></script>// this js calls the following javascript function at pageshow event for iscroll object. it works if
<div data-role="content">
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span>
<span class="pullDownLabel">Pull down to refresh...</span>
</div>';
//Start Listview-----
this list view is generated by some php code wrapped with wrapper
//-----End listview
</div>
</div>
</div>
<div data-role="footer'>
</div>
</div>
</body>
</html>

function LoadWrapperScroller(wrapperobject){
//wrapper object is a slector like (mypageid + wrapperid) as each page contains wrapper element. i recently made changes in it as i realised after reading your ans that i have the same "wrapper" element in every page and that may cuse an issue. Before this it was "wrapper" selector only like: myScroll = new iScroll("wrapper",{
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll(wrapperobject,{
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function(){
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove: function(){
if (this.y > 50 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 50 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function(){
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction();
}
}
});
document.addEventListener('touchmove', function (e) {e.preventDefault(); }, false);
}

as i have mentioned above both the page have same file included within.
Please do check my code and let me inform if I have done something wrong.
is all the script files included correctly?
as i have told you i need plugin level js and css to be call on on page level.
still if there any solution then please let me know.

Thanks in advance.

Top Reply

Response title

Attachments

jQuery Forum

Need help regarding iscroll

Replies(2)

Re: Need help regarding iscroll

Re: Need help regarding iscroll

Statistics

Tags

Actions