scrollTop with tabbar

[pressb]

I'm losing my mind.

I'm using this method for a tabbar:
http://groups.google.com/group/jqtouch/browse_thread/thread/f052748b50e9acd0

Now when I scroll down a page, then go to another page, then come
back, it seems like the scroll position remains.
Add a few dynamic content insertions and you can see I'm in scrolling
hell :)

For example, if I load content into a page that's not a long as the
content I had on it before, it now shows an empty page which I can't
even scroll up - and in anycase my users won't even know that they
need to scroll up to see the new content...

I've tried scrolling up automatically but with no luck (here's my
stack-overflow question about it: http://stackoverflow.com/questions/6719330/scrolltop-only-scrolls-down
)

Here's my page:

<div id="searchResults">
<div class="toolbar">
<h1>title</h1>
</div>
<div class="vertical-scroll use-bottom-toolbar" id="resBod">
<div id="resSc"><!-- needed for tabbar -->
<ul class="rounded propertieslist">

<!-- Content is loaded with AJAX -->

</ul>
</div>
</div>
<div class="toolbar tabbar bottom"><!-- the tabbar -->
<span class="tab_about"><span><a class="dissolve"
href="#about">about</a></span></span>
<span class="tab_contact"><span><a class="dissolve"
href="#contact">contact</a></span></span>
<span class="tab_rent"><span><a class="dissolve"
href="#searchRent">Search1</a></span></span>
<span class="tab_sale"><span><a class="dissolve"
href="#searchBuy">Search2</a></span></span>
<span class="tab_search tab_on"><span><a class="dissolve"
href="#home">Page</a></span></span>
</div>
</div><!--/End of jqtouch Page-->

And here's how I'm trying to scroll with jQuery:

$('#searchResults').bind('pageAnimationEnd', function(e, info){

// some code to load ajax content here
var resSc = $('#resSc');
var resScH = $('#resSc').height();
resSc .scrollTop(resScH);
$('#resSc').animate({scrollTop:0}, 1000);

});


But it doesn't work at all... Can anyone help please?

(Note: My app is only used on iPhone, so only has to support Safari
Mobile (I'm stating this since I noticed in previous posts this might
have to do with browser behaviour)

[Chris C]

Dump all of this and move to iSCROLL. You will glad you did. Its a lot
easier than this method and it will always snap to the top.

You will need to rebuild the scroller after every panel change so do
that in the animation events callback. I have a separate scroller for
my main page too and you can have multiple per panel if you need them.
Just give them new names.

In my page animation end for the new page:
// iscroll handling
if ($('div#'+e.target.id+' .wrapper').get(0)) {
if (myScroll) {
myScroll.destroy();
}
if (deviceType == 1 || deviceType == 3) {
var is_portrait = (window.orientation == 0 || window.orientation ==
null);
if (!is_portrait){
$(".wrapper").css("bottom","0px");
}
}
if (e.target.id == 'home') {
setTimeout(function () {
myScrollMain.refresh()
}, 10);
} else {
setTimeout(function () {
myScroll = new iScroll($('div#'+e.target.id+' .wrapper').get(0), {
fixedScrollbar:true,
// bounce:false,
useTransition:true,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' &&
target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}, 100);

}
}
//end iscroll handling

[pressb]

Hi Chris,

Thanks so much. I was actually reading about iScroll and considering
moving then saw your post, so I guess it's what I'll do.
Any chance you can add comments to the code you posted? It will
probably save me some precious learning-curve hours.

Again, thanks so much, this is a life saver!

Adam

[Chris C]

Just check the iScroll blog and site. Its pretty straight forward and
I gave you the hint for JQT. Just remember that everytime you change
the content you have to replace the scroller and thats the code I gave
you above.

> > //end iscroll handling- Hide quoted text -
>
> - Show quoted text -

[pressb]

Yeah, I just can't figure out if the part with the deviceType's and
the TEXTAREA's have to do with what I'm looking for.

Are those parts necessary, or are they specific to your own app?

[Chris C]

Device type probably not. I have a tabbar that shows/hides when the
device is rotated so thats why thats there.

The whole TEXTAREA stuff is needed if you are going to use forms in
your application. See the blog and issues lists on iSCROLL for more
info on forms issues.

> > > - Show quoted text -- Hide quoted text -

[DataZombies]

Check out DataZombies / jQTouch fork for the tabbar a other goodies.
https://github.com/DataZombies/jQTouch

[pressb]

I still can't figure it out... still struggling with the iScroll
manual and all the posts here and on the iScroll group...:(

If anyone can share a straight forward code I'd be super grateful.

@DataZombies - your iScroll demo doesn't seem to be working.... am I
missing something? (screenshots: In safari: http://bit.ly/n4g6kX |
Standalone after adding to homepage: http://bit.ly/mRzvnC).

[Chris C]

I assume that you have loaded the js file in the script area.

One tidbit that you might have missed is you have to tell iscroll
where to apply the scroll. I do this with the ID of the panel and of
course where that scroll div is. For a panel in the body section
(where you want the scroll to take place)

<div class="wrapper">
<div id="pane_id" class="scroller">
... your scroll items here

Each panel will need this. Then the code I gave you before that
executes in the animation end event will destroy any current scroller
and create a new one.

If you need scrolling on your home panel you will have to create that
on the windows load function because it does not fire the animation
event on the first go around. Thats why I have a myMainScroll and an
myScroll object. I reuse the myScroll and rebuild the panels each
time I come to them since I have a dynamically loaded application

> > Check out DataZombies / jQTouch fork for the tabbar a other goodies.https://github.com/DataZombies/jQTouch- Hide quoted text -

[pressb]

Thanks for the effort Chris, I really appreciate it.

I already did that.

Here's my strip down code: http://bmbyapp.info/appv01_testlab/index3.php

What am I missing there?

[Chris C]

Your home page scroller needs to be set up in your window.load
routine. Once that is done you can use the code I gave you to reset
it for every panel change.

You need to move your iscroll code into your pageanimation end
routines. See the jqTouch demo for an application of page
animation. There is a start and end and also a from and to. Use the
to/end state and snap your iscroll code there. Thats where thee.
target.id gets used. Its part of the page animation callbacks.

I would start first by setting up the iscroll in your home panel with
the window.load and then branch out to replicate it with the page
animation for other panels

[pressb]

I will try it today. Thanks man!

[pressb]

Can't get it to work.

I've posted a project for this in oDesk & Elance, if anyone would like
to have a go I'd be happy to pay for it:)

http://www.elance.com/php/bid/main/proposalList.php?jobid=25280625
https://www.odesk.com/jobs/101830532/applications/active