Reverse scroll

[rlad]

In mobile apps such as messaging apps it's typical to have a screen layout like:

Header
Content
Textarea
Footer

The content area, where jquery scrollz content would be, would in this case contain a list of messages in chronological order, starting with the most recent on the bottom. So ideally, jquery scrollz would support lazy loading in this way: pull down from the top to see older messages.

Another reason for arranging things this way is the default behavior of the pop-up soft keypad: when this pops up, the content area is scrolled up by the number of pixels that the keypad takes. If the screen is arranged as above, this is fine, because the most recent message still shows on the bottom. However if the most recent were on the top (as currently supported), it will be scrolled off the screen.

So is there a way of supporting reverse lazy load scrolling, or could this be added?

Thanks again for the great functionality!

[zippy1978]

Hi,

At the moment, this is not possible... I will have a look at it for the next release.

Gilles

[rlad]

Thanks for the reply.

How likely do you think it is that this feature will be added in the next release, and when do you expect that to happen, if you could give an estimate?

Thanks again for making a very useful utility!

[zippy1978]

Hi,
I have no idea of when I will do it: I need to fix / change examples first (they are broken since Twitter API 1.0 was deprecated and the 1.1 requires a server side authent that I can't use as my examples are client side only).

But when I will do that I will have a look at your request: I will probably send a new event 'topreached' so that you can preprend items to your list each time it is triggered.

Maybe if you have time, you can have a look at it and send me a pull request...

Regards,
Gilles

[rlad]

Gilles,

Thanks for the hint. I put in a topreached event but still have the issue that since I need to prepend to the list, I also need the list to always be on the bottom rather than the top of the scrolling region.

I tried using styleClass with a style 'reverse' defined as:

.reverse {
display: box;
box-orient: vertical;
box-direction: reverse;
box-pack: end;
}

But that doesn't have any effect. I believe the code should work since the android browser is webkit and this works in chrome:
http://dabblet.com/gist/6190393

Do you have any hint for getting the list to start from the bottom rather than the top?

By the way, the code I added to jquery.scrollz.js is just:

if ((container.scrollTop() - detectionOffset) <= 0) {
// Trigger event
instance.trigger('topreached');
//top reached
}

Thanks again!

[zippy1978]

Hi
You probably need to scroll (scrollTop without animation) the scrolling region to the height of the new loaded content one you have prepended it.

Gilles

[rlad]

Thanks for your reply. I don't think this is the issue, though.

The display: box css above should automatically push the first entry to the bottom of the box, which is what we need for a chat application. When there's only one entry, it shouldn't be necessary or possible to scroll. And when I look at a jquery scrollz listview with only one entry, it's not possible to scroll it.

When I apply the .reverse style and inspect it using weinre, I can see that it has been applied to the jquery scrollz container div, but for some reason this is not making the listview behave as it would normally.

Here is a jsfiddle using jquery mobile with the same style applied to a listview, showing that it does work with jquery mobile:
http://jsfiddle.net/gaEzu/35/
And another showing that it works when the box is applied to the container as well:
http://jsfiddle.net/gaEzu/36/

But for some reason it doesn't work when applied via styleClass in jquery scrollz, or when applied in the HTML to the ul or any of the other elements surrounding it.

[zippy1978]

Hi,

I think I understand better now: I suspect this is because of the height of the content.

Could you show me your code (the one with jquery.scrollz applied) ?

Gilles