2-way iScroll

[Matteo]

I just uploaded a modified iScroll to handle 1 horizontal carousel + n
vertical free scrolls (video http://vimeo.com/16658890). The demo
works on ipad but making it compatible with smaller screens is just a
matter of updating the CSS.

The code is draft, but you may find it useful nonetheless
https://github.com/cubiq/2-way-iScroll

I don't think I'll update it, so future iScroll updated won't be
reflected on 2-way iScroll.

Enjoy,
Matteo

[storynory]

Matteo, Thank you for this .... the two-way scroll is very much what
I've been looking for and there seem to be lots of others on the forum
who have been asking for it. I think it would be a very popular
feature of iScroll if it was integrated into future editions... hint
hint....

Thanks ever so much for iScroll which is such a great little script
that can do so many things.

On Nov 9, 5:52 pm, Matteo <mat...@gmail.com> wrote:
> I just uploaded a modified iScroll to handle 1 horizontal carousel + n

> vertical free scrolls (videohttp://vimeo.com/16658890). The demo

> works on ipad but making it compatible with smaller screens is just a
> matter of updating the CSS.
>

> The code is draft, but you may find it useful nonethelesshttps://github.com/cubiq/2-way-iScroll

[Manmade]

Hi Matteo
Thanks for this great script!

Im using this two-way script on my startpage(index.asp - done with
jqtouch) to slide between 2 divs in that page and each of the divs
scrolls up and down, great!!

But now Im trying to load another page (news.asp - with ajax) , but
that page is not scrolling up and down - its just bouncing back!?

I have tested hundreds of different thing today but nothing works.

Is it at all possible to load a different page and that that page is
scrolling? Or does all the scrolling divs has to be in the same page
from the beginning?
Thanks a lot!

[Matteo Spinelli]

you probably just need to call refresh() once the new content is loaded.

Matteo

[Manmade]

Matteo
I had to have
<script type="text/javascript">

var myScroll;
var originalHeight = getHeight();
document.getElementById('wrapper2').style.height =
window.innerHeight + "px";

myScroll = new iScroll('scroller2',
{desktopCompatibility:true,hScrollbar: false,vScrollbar: false});

function getHeight() {
var headerH = document.getElementById('header').offsetHeight,
wrapperH = window.innerHeight - headerH;
return wrapperH;

}
</script>

in my subpage to get it to work.

What is the best way to get all my subpages to scroll with this
script?
I tryed to place it in my index.asp file along with the other
2wayscript but it didnt work so I placed it in the subpage and it
works.

Do I have to place this in all subpages to get it working or is there
a better way?
Thanks.

[Manmade]

Thanks Matteo
Yes I added that.refresh(); at line 81 in the js file and it works
great.
I also had to set document.addEventListener('touchmove', function (e)
{ e.preventDefault(); }, true); -the last to true in the start code.
/Claes

On 9 Dec, 14:58, Matteo Spinelli <mat...@gmail.com> wrote:

[Manmade]

Matteo
Im trying to get the scrolltoElement working with:
<a href="#" onclick="page_flip.scrollToElement('#header', '1s');return
false"> (#header is the toolbar)
when I have a list with divs, not in ul-li. I have tryed with
vertical_scroll aswell but it is not scrolling to the top?

Also, is it the same if I have a horisontal list, can I use
scrolltoElement? Or does it only work on vertical scrolling?
Thanks.

On 9 Dec, 14:58, Matteo Spinelli <mat...@gmail.com> wrote:

[Alex Hazel]

Terrific job!

Do you happen to know how to get it continuously scroll horizontally
just like it does vertically? Would you be able to help with that?! I
am a n00b and desperately need help! Thanks!

On Nov 9, 12:52 pm, Matteo <mat...@gmail.com> wrote:
> I just uploaded a modified iScroll to handle 1horizontalcarousel + n
> vertical free scrolls (videohttp://vimeo.com/16658890). The demo

> works on ipad but making it compatible with smaller screens is just a
> matter of updating the CSS.
>

> The code is draft, but you may find it useful nonethelesshttps://github.com/cubiq/2-way-iScroll

[Matteo Spinelli]

you may try to change momentum to true in the index.html file (line 27).

Matteo

[Alex Hazel]

Perfecto! Thanks! I really appreciate the quick response!

One last question you may or may not be able to help with.

I want three horizontally scrolling rows on the same page....Is something like that even possible? Do you have a general suggestion on how I might attack that problem?

Let me know, thanks in advance!

[Alex Hazel]

Can this two way scroll be dynamic?

For instance, I want my content to always fit the screen at 100% width
instead of stopping at 1024px.

When I made it 100% there were no more "pages". It just took my
content and spread it like 4000px across the three "pages"

Is there a way for it to know how big the browser window is and keep
my content within those dimensions and then when I scroll to the left
or right it scrolls the new page?

On Nov 9, 12:52 pm, Matteo <mat...@gmail.com> wrote:

> I just uploaded a modified iScroll to handle 1 horizontal carousel + n

> vertical free scrolls (videohttp://vimeo.com/16658890). The demo

> works on ipad but making it compatible with smaller screens is just a
> matter of updating the CSS.
>

> The code is draft, but you may find it useful nonethelesshttps://github.com/cubiq/2-way-iScroll

[Manmade]

Hi Alex
Yes it can, if you get your content dynamicly from the database, then
just count how many post you have in the database and set the css
#pageflip to this calculation -"number of post in database * 320(the
width of the .scrollerwrapper)=#pageflip width".

[francescoBB]

if you add

desktopCompatibility:true,

to all the three calls it works also in chrome and FF

NICE!

On Nov 9, 12:52 pm, Matteo <mat...@gmail.com> wrote:

> I just uploaded a modified iScroll to handle 1 horizontal carousel + n

> vertical free scrolls (videohttp://vimeo.com/16658890). The demo

> works on ipad but making it compatible with smaller screens is just a
> matter of updating the CSS.
>

> The code is draft, but you may find it useful nonethelesshttps://github.com/cubiq/2-way-iScroll

[Alex Hazel]

I dunno how the hell to code that but I am glad that is a way to do it!

[francescoBB]

sorry i meant Safari not FF

[francescoBB]

I create da project using this script bu i noticed it a little bit
"too" respsnsive and the fact you can move diagonally the content is
a little bit too much and distracting for the user
there is a way to prevent it?

I was thinking to add some code in jquery where i can detect if the
page has moved on x-axis in order to destroy th veritcal scroll an
dviceversa, to destroy the horizontal when scrolling vertically and
refresh them onScrollend


does it make sense? can this work?


any other (better) solution?

On Nov 9, 12:52 pm, Matteo <mat...@gmail.com> wrote:

> I just uploaded a modified iScroll to handle 1 horizontal carousel + n

> vertical free scrolls (videohttp://vimeo.com/16658890). The demo

> works on ipad but making it compatible with smaller screens is just a
> matter of updating the CSS.
>

> The code is draft, but you may find it useful nonethelesshttps://github.com/cubiq/2-way-iScroll

[Manmade]

Alex
I dont know if you use php, asp or something else?
Im coding in classic asp and I would do something like this to get the
width of the #pageflip css:

select count from database table - then you get how many post you
have, so if you have 10 post that you want to display, then just take
10*320(the width of the wrapper) = pageflip css

[Fernando Brigido Barranha Junior]

Hi Matteo. 

Is there a way to dynamicly fit the iCarousel width and height to the screen?

Regards,

Fernando