Loading second page - scroll not working?
426 views
Skip to first unread message
Manmade
Dec 6, 2010, 9:23:41 AM12/6/10
to iScroll
I have a menupage with li list that scrolls fine and the bottom tabbar
i fixed as it should, good.
But when I try to load another page with ajax(jqtouch) that looks like
this:
<div id="news">
<div id="wrapper">
<div id="scroller">
Some content....
</div>
</div>
</div>
then that page is not scrolling at all?
What Im I missing?
Thanks.
i fixed as it should, good.
But when I try to load another page with ajax(jqtouch) that looks like
this:
<div id="news">
<div id="wrapper">
<div id="scroller">
Some content....
</div>
</div>
</div>
then that page is not scrolling at all?
What Im I missing?
Thanks.
Gwyn Judd
Dec 6, 2010, 10:07:19 PM12/6/10
to iScroll
Hi,
when you load the second page, you need to reinitialize iscroll for
the new page.
when you load the second page, you need to reinitialize iscroll for
the new page.
Manmade
Dec 7, 2010, 6:26:13 AM12/7/10
to iScroll
Hi Gwyn
Ok, but how do I do that?
And how do I set the height of the scrolling div in the new page? So
its not the same height as in the menupage?
Thanks.
Ok, but how do I do that?
And how do I set the height of the scrolling div in the new page? So
its not the same height as in the menupage?
Thanks.
Gwyn Judd
Dec 7, 2010, 11:21:29 PM12/7/10
to iScroll
What I do is, when jqtouch goes to a new page, I destroy the old
scroller:
iscroll.destroy();
Then create a new one on the new page:
iscroll = new iScroll($('div#whatever').get(0), { ... });
I'm not sure what you mean about setting the height though - you have
to set the height of the wrapper to whatever is appropriate for your
layout, and possibly according to the dimensions of the viewport.
iscroll doesn't take care of this for you since there are too many
variables to account for.
scroller:
iscroll.destroy();
Then create a new one on the new page:
iscroll = new iScroll($('div#whatever').get(0), { ... });
I'm not sure what you mean about setting the height though - you have
to set the height of the wrapper to whatever is appropriate for your
layout, and possibly according to the dimensions of the viewport.
iscroll doesn't take care of this for you since there are too many
variables to account for.
Thomas Yip
Dec 7, 2010, 11:38:19 PM12/7/10
to isc...@googlegroups.com
For setting the height. I use css3 flex-box. It eliminates the need of
setting the height. I wrote an article on that:
http://bit.ly/f5UHIE
setting the height. I wrote an article on that:
http://bit.ly/f5UHIE
Or, you can use beedesk's jqtouch fork.
http://bit.ly/gyraLr
Manmade
Dec 8, 2010, 8:42:52 AM12/8/10
to iScroll
Thanks a lot guys.
I will test a bit.
Thomas is right, on my startpage I have both a toolbar and a tabbar so
the scrolling height is 370px, but when I load another page, they only
have the toolbar so therefore the need of a different scroll height,
415px.
Thomas - your flex-box seams like the way to go, but it looks like a
lot of work to change it all for me. I have to take a better look at
the flex-box.
Im using iscroll 3.7.1 and the 2wayscroll(scrolling both vertical and
horizontal at the same time) and he has changed the scrolling divs to:
<div id="pagewrapper">
<div id="pageflip">
<div class="scrollerwrapper">
<div class="scroller">
content to scroll.....
</div>
</div>
</div>
</div>
I looked at your iPad demo and it looks great, do you have a iphone-
jqtouch demo aswell?
Thanks again.
I will test a bit.
Thomas is right, on my startpage I have both a toolbar and a tabbar so
the scrolling height is 370px, but when I load another page, they only
have the toolbar so therefore the need of a different scroll height,
415px.
Thomas - your flex-box seams like the way to go, but it looks like a
lot of work to change it all for me. I have to take a better look at
the flex-box.
Im using iscroll 3.7.1 and the 2wayscroll(scrolling both vertical and
horizontal at the same time) and he has changed the scrolling divs to:
<div id="pagewrapper">
<div id="pageflip">
<div class="scrollerwrapper">
<div class="scroller">
content to scroll.....
</div>
</div>
</div>
</div>
I looked at your iPad demo and it looks great, do you have a iphone-
jqtouch demo aswell?
Thanks again.
Manmade
Dec 8, 2010, 5:30:38 PM12/8/10
to iScroll
I got the menupage scrolling, but when I load the subpage, then that
scroll is bouncing back when I try to scroll up or down, and not
scrolling properly.
Any Ideas? Thanks. I really need to get this working.
scroll is bouncing back when I try to scroll up or down, and not
scrolling properly.
Any Ideas? Thanks. I really need to get this working.
Thomas Yip
Dec 8, 2010, 7:46:05 PM12/8/10
to isc...@googlegroups.com
Usually because the inner pane is not set to "position: absolute".
Thomas Yip
Dec 8, 2010, 7:46:05 PM12/8/10
to isc...@googlegroups.com
> I looked at your iPad demo and it looks great, do you have a iphone-
jqtouch demo aswell?
jqtouch demo aswell?
Thanks! The demo will scale down to iPhone version automatically, if screen
is less than 768 x 1024. To explicit run on iPhone mode, just remove
class="splitscreen" from the <body> tag.
Didn't aware of the 2wayScroll. Will take a lot. But, I probably won't get
to that until at least next week.
> -----Original Message-----
> From: isc...@googlegroups.com [mailto:isc...@googlegroups.com] On
Manmade
Dec 9, 2010, 2:37:48 AM12/9/10
to iScroll
Thomas, you find the 2wayscroll here:
http://groups.google.com/group/iscroll/browse_thread/thread/c438bcadfced4938/b89a0db923c53c1c?lnk=gst&q=2way#b89a0db923c53c1c
I think it is really cool.
I will look at the position:absolute.
My structure is like this in my menulistpage(index.asp):
<div id="jqt">
<div id="content">
<div id="pagewrapper">
<div id="pageflip">
<div class="scrollerwrapper">
<div class="scroller">
content to scroll...............
</div>
</div>
</div>
</div>
</div>
</div>
And the seperate page(news.asp) looks like this:
</div>
</div>
</div>
Another thing is that even if I have desktopCompatibility:true it is
not working in safari desktop? Doesnt it mean that it should work in
the safari desktop?
Thanks again.
http://groups.google.com/group/iscroll/browse_thread/thread/c438bcadfced4938/b89a0db923c53c1c?lnk=gst&q=2way#b89a0db923c53c1c
I think it is really cool.
I will look at the position:absolute.
My structure is like this in my menulistpage(index.asp):
<div id="jqt">
<div id="content">
<div id="pagewrapper">
<div id="pageflip">
<div class="scrollerwrapper">
<div class="scroller">
</div>
</div>
</div>
</div>
</div>
</div>
And the seperate page(news.asp) looks like this:
<div id="news">
<div id="wrapper">
<div id="scroller">
content to scroll..........
<div id="wrapper">
<div id="scroller">
</div>
</div>
</div>
Another thing is that even if I have desktopCompatibility:true it is
not working in safari desktop? Doesnt it mean that it should work in
the safari desktop?
Thanks again.
Thomas Yip
Dec 9, 2010, 3:17:19 AM12/9/10
to isc...@googlegroups.com
On the official fork, I think jstark have removed the option. And, it was
associated with a bug ghost click anyway (<a href> link will be launched
without you click on it).
associated with a bug ghost click anyway (<a href> link will be launched
without you click on it).
For the beedesk fork, it doesn't need the option anymore, but it use "touch"
event by default, if not available use mouse. I develop on desktop
primarily. So, I know I will always keep it working.
Thanks for the link on 2wayScroll. I aware of the script. I actually updated
my demo with that script a couple of week ago. But, I didn't know what it
really does until now. ;-)
> -----Original Message-----
> From: isc...@googlegroups.com [mailto:isc...@googlegroups.com] On
> Behalf Of Manmade
> Sent: Wednesday, December 08, 2010 11:38 PM
> To: iScroll
> Subject: Re: Loading second page - scroll not working?
>
Manmade
Dec 9, 2010, 4:08:16 AM12/9/10
to iScroll
"but it use "touch" event by default, if not available use mouse." -
how do I change so it uses the mouse? Or what do I have to do to make
it work in the browser?
I have the xcode simulator, but it would be good if it worked in the
browser aswell.
I tested to remove the
thought that those two div had to be included in the news.asp page
aswell to get it working.
But no.....
I dont understand why its not working, do you have time to test the
page? Maybe you see something that I dont.
how do I change so it uses the mouse? Or what do I have to do to make
it work in the browser?
I have the xcode simulator, but it would be good if it worked in the
browser aswell.
I tested to remove the
<div id="pagewrapper">
<div id="pageflip">
in the menupage and then that scroll stopped working, so then I
<div id="pageflip">
thought that those two div had to be included in the news.asp page
aswell to get it working.
But no.....
I dont understand why its not working, do you have time to test the
page? Maybe you see something that I dont.
Thomas Yip
Dec 9, 2010, 4:47:51 AM12/9/10
to isc...@googlegroups.com
> how do I change so it uses the mouse?
Beedesk's jqtouch detect the existence of Touch. And, decide which event to
use. You really shouldn't need to do anything.
var SUPPORT_TOUCH = (typeof Touch != "undefined");
var START_EVENT = SUPPORT_TOUCH? 'touchstart' : 'mousedown';
I tried it on emulator, mouse was working for me. Does it not?
http://bit.ly/beedesk-jqt/
You seem to be in a different time zone. It is pretty late to me, but send
me your link privately. Give me a day... I will find a chance to take a
quick look.
> -----Original Message-----
> From: isc...@googlegroups.com [mailto:isc...@googlegroups.com] On
> Behalf Of Manmade
> Sent: Thursday, December 09, 2010 1:08 AM
> To: iScroll
> Subject: Re: Loading second page - scroll not working?
>
Manmade
Dec 9, 2010, 5:49:25 AM12/9/10
to iScroll
I found that desktopCompatibility: true was set to false in the
iscroll.js and just changed it to true and now it works in the
browser, great!
I have sent you the link to your mail. Thanks.
On 9 Dec, 10:47, "Thomas Yip" <thomas....@gmail.com> wrote:
> > how do I change so it uses the mouse?
>
> Beedesk's jqtouch detect the existence of Touch. And, decide which event to
> use. You really shouldn't need to do anything.
> var SUPPORT_TOUCH = (typeof Touch != "undefined");
> var START_EVENT = SUPPORT_TOUCH? 'touchstart' : 'mousedown';
>
> I tried it on emulator, mouse was working for me. Does it not?http://bit.ly/beedesk-jqt/
iscroll.js and just changed it to true and now it works in the
browser, great!
I have sent you the link to your mail. Thanks.
On 9 Dec, 10:47, "Thomas Yip" <thomas....@gmail.com> wrote:
> > how do I change so it uses the mouse?
>
> Beedesk's jqtouch detect the existence of Touch. And, decide which event to
> use. You really shouldn't need to do anything.
> var SUPPORT_TOUCH = (typeof Touch != "undefined");
> var START_EVENT = SUPPORT_TOUCH? 'touchstart' : 'mousedown';
>
Manmade
Dec 9, 2010, 5:20:47 AM12/9/10
to iScroll
Now it works in the browser :-) I found the desktopCompatibility:true
was set to false in the iscroll.js and I just set it to true and it
works.
I tryed to have 2 different iscroll scripts, one for the startpage and
menu and one for the subpage, but no luck.
Great if you want to have a look, Ill mail it. Thanks.
was set to false in the iscroll.js and I just set it to true and it
works.
I tryed to have 2 different iscroll scripts, one for the startpage and
menu and one for the subpage, but no luck.
Great if you want to have a look, Ill mail it. Thanks.
> > how do I change so it uses the mouse?
>
> Beedesk's jqtouch detect the existence of Touch. And, decide which event to
> use. You really shouldn't need to do anything.
> var SUPPORT_TOUCH = (typeof Touch != "undefined");
> var START_EVENT = SUPPORT_TOUCH? 'touchstart' : 'mousedown';
>
> I tried it on emulator, mouse was working for me. Does it not?http://bit.ly/beedesk-jqt/
>
> Beedesk's jqtouch detect the existence of Touch. And, decide which event to
> use. You really shouldn't need to do anything.
> var SUPPORT_TOUCH = (typeof Touch != "undefined");
> var START_EVENT = SUPPORT_TOUCH? 'touchstart' : 'mousedown';
>
Manmade
Dec 9, 2010, 8:59:46 AM12/9/10
to iScroll
Jeehooo :-) finally it scrolls!
I added that.refresh(); after the that.touchStart(e); on line 81 in
the iscroll.js and now all pages scroll, even those that is not in a
class=scroller div!
Thanks a lot for your help Thomas.
I added that.refresh(); after the that.touchStart(e); on line 81 in
the iscroll.js and now all pages scroll, even those that is not in a
class=scroller div!
Thanks a lot for your help Thomas.
jeffrey.kr...@gmail.com
Mar 26, 2011, 7:27:07 AM3/26/11
to isc...@googlegroups.com, Manmade
I just found this pretty old topic with the same problem/solution. But now I'm wondering why this occurs.
I've made a self monitoring scroller, which creates an iScroll depending on the size of the box. It works with AJAX so the scrollerbox can be resized in the background. While this happened, the DOM has been changed, so the refresh method has to be called. When I've called it in the background, the other scrollers will not be scrollable anymore. It seems like only the last one that got a refresh, is the one that will work.
Is there any logic to this?
I'm using iScroll 4.
I've made a self monitoring scroller, which creates an iScroll depending on the size of the box. It works with AJAX so the scrollerbox can be resized in the background. While this happened, the DOM has been changed, so the refresh method has to be called. When I've called it in the background, the other scrollers will not be scrollable anymore. It seems like only the last one that got a refresh, is the one that will work.
Is there any logic to this?
I'm using iScroll 4.
Chris C
May 18, 2011, 1:11:34 AM5/18/11
to isc...@googlegroups.com, Manmade
I just started working with the lite scroll and jqtouch 166 and I am not quite done yet because I have a fixed tabbar at the bottom plus it can turn on/off based on rotation so I don't have all that wired yet but I do have scrolling working on all my php loaded pages. I followed some of the above instructions with a bit of modification.
First you have to set the home panel (assuming its scrolling) when the doc loads per normal instructions.
I then made the 'wrapper' division but instead of an ID I made a 'wrapper' class. You will have to have the correct css for this class assuming that it never changes (via rotation etc which is what I am working on now).
Now to get the system to scroll each page you need an event to trigger the iscroll to restablish itself. Following to pointer above I destroy the iscroll and reinitialize it.
On my jquery event for:
bind('pageAnimationEnd', function(e, info){
if (info.direction =='in'){
$("#switching").removeClass("show_switching").addClass("hide_switching");
// iscroll handling
if (myScroll) {
myScroll.destroy();
}
if ($('div#'+e.target.id+' .wrapper').get(0)) {
setTimeout(function () {
myScroll = new iScroll($('div#'+e.target.id+' .wrapper').get(0));
}, 0);
}
//end iscroll handling
}
if (info.direction =='in'){
$("#switching").removeClass("show_switching").addClass("hide_switching");
// iscroll handling
if (myScroll) {
myScroll.destroy();
}
if ($('div#'+e.target.id+' .wrapper').get(0)) {
setTimeout(function () {
myScroll = new iScroll($('div#'+e.target.id+' .wrapper').get(0));
}, 0);
}
//end iscroll handling
}
I clear the iscroll if initialized and then if it finds a div with wrapper as its class rebuild it.
For orientation changes I plan to trap that too and change the height. Not sure if I will have to destroy and rebuild or just refresh for that but some experimentation will tell me.
Chris C
May 18, 2011, 2:47:44 AM5/18/11
to iScroll
Here is my CSS. I have fixed all my issues. The only change for me
is to change the wrapper bottom after rotation because I remove my
tabbar when horizontal on iPhones and BB. Your wrapper bottom will be
different because of tabbar size if any. Just experiment with the
size.
.wrapper {
position:absolute; z-index:1;
top:45px; bottom:62px; left:0;
width:100%;
overflow:auto;
}
.scroller {
position:absolute; z-index:1;
width:100%;
}
is to change the wrapper bottom after rotation because I remove my
tabbar when horizontal on iPhones and BB. Your wrapper bottom will be
different because of tabbar size if any. Just experiment with the
size.
.wrapper {
position:absolute; z-index:1;
top:45px; bottom:62px; left:0;
width:100%;
overflow:auto;
}
.scroller {
position:absolute; z-index:1;
width:100%;
}
Reply all
Reply to author
Forward
0 new messages