[Pro] scroll Protaculous doesnt work iPad?

Hello. Iam using scroll in web with the Protaculous Action, and Ive just realized that it doesnt work in iPad. Is there any way to fix it and make it working, or another action to make a scroll that works properly in iPad?

I set scriptaculous-packed at the action palete, and in body code button I paste:

var s = new Control.Slider(‘thumb’,‘track’, {axis:‘vertical’});
var f = function(value){
var inner = $(‘innerDiv’); //change innerDiv to whatever your inner box is called
var h = (inner.getHeight() - inner.up(‘div’).getHeight());
inner.style.top = (Math.round(value * h) * -1) + ‘px’;
}
s.options.onChange = function(value){
f(value);
};
s.options.onSlide = function(value){
f(value);
};

with all the elements correctly named. In fact, it works in any computer, but not in iPad.

Any idea?

Thanks.

iPad is becoming my worst nightmare…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HI,
you’ll likely need to contact the Protaculous guys for help with that.

Scrolling is different on an iPad to on a desktop machine., and things are handled differently as a result. On an iOS device, you aren’t scrolling a document around, rather moving the viewport instead. It’s a conceptual hoop to jump through.

So, yes, scrolling things that work well on your Desktop machine may not work as well on an iOS device because of the way it handles window content. My concern is that in the long term, as iOS and OSX converge (as they seem to be with Lion and more so with Mountain Lion), you may find this model appearing on desktop machines. So it’s worth trying to get your brains around it now.

It took me a while to think through this as well.

You can read my notes on the subject (in relation to my Spawn New Window Actions) here: iPad Friendly

An extract:
iOS is different. As you are aware, iOS is touch focussed, and is designed for use on very small screens (iPhone, for example). As a result, the way a web page is displayed is very different. Firstly, there is no window in the way that you would expect to find on a desktop machine (even on an iPad with its larger screen). Instead of scrolling around a page, causing content to move in a window, in iOS you are moving a “viewport” around. The page stays static, but the view is moves as you use your fingers to move the page around. The illusion is one of scrolling, but it isn’t scrolling in the way that you would be used to.

To make this easy to understand, imagine you have a book or a magazine page. You will also need a small cardboard frame to look at the page through. The centre hole of the frame is analogous to the viewport in the iPad or iPhone. To move the page around, you need to move the frame, not the page. The frame also lets you magnify or shrink the page by moving it closer or further away. This is what happens as you flick and pinch your way around a web page on an iOS device.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s the patch. It’s actually pretty easy. Since iOS 5, you can use native overflow:scroll in MobileSafari. So this patch fixes the problem for iOS, not sure about other mobile browsers, that depends on how they identify themselves to the world. What it does is hide the scroll element entirely, since you can’t drag it anyway, and enables one-finger scrolling of your element. It is critical with this sort of hidden content (since the scroll-bars are not going to appear unless you are actually scrolling – catch 22) that you signal to your user that there is more. I like to make sure that something is cut off visually, that’s a strong clue.

Let me know if this helps!

Walter

PS: Please help build a new ActionsForge: http://kck.st/K3vJVi

On May 18, 2012, at 8:24 AM, Paul wrote:

you’ll likely need to contact the Protaculous guys for help with that.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

An extract: iOS is different.
My concern is that in the long term, as iOS and OSX converge (as they seem to be with Lion and more so with Mountain Lion), you may find this model appearing on desktop machines. So it’s worth trying to get your brains around it now.

Thanks Paul for your explanation. So, do you mean that apple desktop it will be like mobile devices in a future?

Let me know if this helps!

Thanks Walter for your help.

  • It works in iPhone.
  • It doesnt work in Android.
  • I dont know in iPad because I have no one, and I couldnt install the Xcode to simulate the enviroment, when you recommended me last day. Im trrying this again today.

Thanks a lot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

hello again. Ive notice that in android it doesnt show the scroll, like in iphone, so you cant notice that there is a non working scroll. It should be fine if the person see that there is a scroll that doesnt work in his device.

About Xcode, im having problems. It says that there is an error, and installation failed. Dont know why. Ill try again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Re: Android, I’ve updated the Gist with a better test that should get other mobile WebKit browsers.

Walter

On May 19, 2012, at 1:37 PM, rakeljuice wrote:

An extract: iOS is different.
My concern is that in the long term, as iOS and OSX converge (as they seem to be with Lion and more so with Mountain Lion), you may find this model appearing on desktop machines. So it’s worth trying to get your brains around it now.

Thanks Paul for your explanation. So, do you mean that apple desktop it will be like mobile devices in a future?

Let me know if this helps!

Thanks Walter for your help.

  • It works in iPhone.
  • It doesnt work in Android.
  • I dont know in iPad because I have no one, and I couldnt install the Xcode to simulate the enviroment, when you recommended me last day. Im trrying this again today.

Thanks a lot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello walter. Thanks again.

I have pasted your new code, and in my Android, it doesnt work. Have you test it in and android? Perhaps is the OS version.

I havent tried yet in iphone or ipad. I have no one here now. I hope along the afternoon I could do. Im downloading again the xcode 3.2.6, to try to install it again.

I have the test in http://www.godelia.tv/test.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What browser are you using in Android? This will only work if you’re using a browser that identifies itself as WebKit and identifies the platform as Android (both case-insensitive) This will not work (because -webkit-overflow-scrolling is not defined) in Firefox or Opera.

It is my understanding that the native browser that ships with most Androids is WebKit-based.

Could you please visit this page in your Android (I don’t own one or know anyone who owns one) and tell me precisely what the page reports as your browser identification string:

http://scripty.walterdavisstudio.com/browser.php

Thanks,

Walter

On May 21, 2012, at 9:01 AM, rakeljuice wrote:

Hello walter. Thanks again.

I have pasted your new code, and in my Android, it doesnt work. Have you test it in and android? Perhaps is the OS version.

I havent tried yet in iphone or ipad. I have no one here now. I hope along the afternoon I could do. Im downloading again the xcode 3.2.6, to try to install it again.

I have the test in http://www.godelia.tv/test.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for answering. I get it:

Hello!
You seem to be using:

Mozilla/5.0 (Linux; U; Android 2.1-update1; es-es; HTC Hero Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari /530.17

And the xCode doesnt want to be installed. aarrgggg!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That version of WebKit may be too old to have the one-finger scroll support. What happens if you scroll the area with two fingers?

Does the scroller get hidden when you visit your test page under Android? If your custom scroller is hidden, then the code I posted is working as far as it can.

If the version of WebKit in your Android isn’t new enough (matching or exceeding the version of MobileSafari in iOS 5) then you will only get what used to be the only way to scroll overflow areas – the two-finger scroll.

Walter

On May 21, 2012, at 10:42 AM, rakeljuice wrote:

Thanks for answering. I get it:

Hello!
You seem to be using:

Mozilla/5.0 (Linux; U; Android 2.1-update1; es-es; HTC Hero Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari /530.17

And the xCode doesnt want to be installed. aarrgggg!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If I scroll with two fingers, it doesnt scroll. It makes a zoom in and out. With your code, the scroll is hidden at first. Not now because I have deleted the line that make it hidden because if it doesnt work I prefer the user see there is a scroll that doesnt work in his device.

My HTC has more than 2 years. I have updated it twice, but I think one year has passed from the last one. Iwill update it again.

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And the xCode doesnt want to be installed. aarrgggg!!

Ah, and this is what I am lost in. Ive tried with Xcode 3.2.6 iOS SDK 4.3 and it makes an installation fail. Ive downloaded 3.2.5 and it says mounting failure. I will try with the 3.2.3. My OS is 10.6.7


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Even the very latest Ice Cream Sandwich Andoid doesn’t support this, I just found out. If anyone has WebOS or Blackberry to test, that would be useful info as well. What I would recommend here is an inline layout, so you could simply remove the need for overflow on the browsers that don’t support it. Have three stages to the test: if it’s iOS, then turn on native scrolling and hide the scroller. If its a broken webkit, then make the outer box the same size as the inner box, and hide the scroll bar. If its a desktop browser, then show the scroll bar.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 May 2012, 5:38 pm, rakeljuice wrote:

An extract: iOS is different.
My concern is that in the long term, as iOS and OSX converge (as they seem to be with Lion and more so with Mountain Lion), you may find this model appearing on desktop machines. So it’s worth trying to get your brains around it now.

Thanks Paul for your explanation. So, do you mean that apple desktop it will be like mobile devices in a future?

That seems to be the way things are going at the moment. I’m not privy to any internal roadmaps at Apple, so my guess is going to be as good as the next man’s. Right now, the obstacle for making the desktop OS even closer to iOS (or just iOS) is the lack of a touch interface. Give them a couple of years or so to crack that particular nut.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello. Ive just came back from a store to try this in diffrent devices. The last surprise in iPad is that the scroll works but it doesnt show the hidden text. It make the scroll but just over the first lines what can be seen at the first screen. Other lines after are in blank. I hope I made me understood…

On the other hand, i dont know what I should do whe you say:

What I would recommend here is an inline layout, so you could simply remove the need for overflow on the browsers that don’t support it. Have three stages to the test: if it’s iOS, then turn on native scrolling and hide the scroller. If its a broken webkit, then make the outer box the same size as the inner box, and hide the scroll bar. If its a desktop browser, then show the scroll bar.

What is an inline layout? The protaculous action and the code should be the same you pasted in the last Gist?

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What is an inline layout?

An inline layout is sometimes referred to as a Box Model Layout - the construction consists of nesting Divs inside other Divs.

Dan J had a tutorial video on it which someone here may point you towards a copy.

An alternative is to use the RPL Action which goes a long way towards creating this for you more easily.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello Dave. Ive downloaded the RPL action. For me it doesnt work, because its supposed to colour the items, Isnt it? when you preview on a browser, but the browser doesnt preview the .php. I dont understand very well how to use it to make an inline layout. Sorry.

What I understand from what an inline is, is the construction we use when using the scroll with the protacolous action, because the content is inside a layered html item called innerDiv that is inside another layered html item called outerFrame.

Should I put this OuterFrame inside another layered item with the track and thumb items aswell? Well, now Ive done it this way, in www.godelia.tv/test.php and it doesnt work… in android. Later I will try in iphone, but not in ipad.

And Ive not found the xcode solution to simulate webs on ipad. And I dont want to buy one… !! Is really limited!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello again. I have two test, with different results. Ive made the inline in both of them, but nothing has changed. Now I’m at this point:

  1. www.godelia.tv/test.php
    The item to be scrolled is a text written in an html box. It works properly in iphone. You make a scroll with finger and the text is scrolled

  2. www.escuelamiriamsicilia.com/test.php
    The thing to be scrolled is a list of teachers, made via WebYep. Now I have insert two teachers. The problem I have is that when you scroll, the box is scrolled, but you don’t see the second teacher, just the first one, and then, blank space.

I’ve made the test with iphone. I suppose ipad works the same. In android it doesn’t work, but I suppose is because my OS version. Im changing the phone this month, but if you have any device to test it, please do it.

My main problem now is what I have explained about the school web.

Please, any help with this?

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello again. I had a look in the OS install DVDs, and a xcode was inside!! Ive installed it, but dont know how to simulate ipad with it. Searching, Ive found this link:

and I’ve followed point one. Testing my two webs with this procedure I have the results:

  1. www.godelia.tv/test.php
    It doesn’t scroll. Perhaps is for the background image?

  2. www.escuelamiriamsicilia.com/test.php
    Two sliders has appeared, like the default one for safari browser. The scroll works, but it should be on the left side. Is it possible to change it?

Please, can you have a look and tell me if this kind of test Im doing are valid? Now Im really happy, thinking of I’ve found a way of testing webs on ipad, but I don’t know if I am on the good way.

Thanks a lot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello again. I could try this in an iPad. Its different from what I get in the iMac Safari simulator (Im supossing I did it ok).

The results are:

  1. www.godelia.tv/test.php. The text is in html item. It doesn’t scroll. Perhaps is for the background image?

  2. www.escuelamiriamsicilia.com/test.php. The text is web yep elements in html item. It make scroll but only with the info you see at first. In this page ther are two teachers, but only appears the first one, and scroll over it

The code is:

var inner = $(‘innerDiv’); //change innerDiv to whatever your inner box is called
var thumb = $(‘thumb’); //change thumb to whatever your slider control is called
var track = $(‘track’); //change track to whatever your slider track is called
//testing for WebKit on a mobile device
var ua = navigator.userAgent, mobile = false;
if( ua.match(/WebKit/i) && (
ua.match(/Android/i) ||
ua.match(/webOS/i) ||
ua.match(/Blackberry/i))
){
mobile = true;
}
if(Prototype.Browser.MobileSafari || mobile){
inner.setStyle(‘position:relative;’);
inner.up(‘div’).setStyle(‘overflow:scroll; -webkit-overflow-scrolling:touch;’);
track.hide();
}else{
var s = new Control.Slider(thumb,track, {axis:‘vertical’});
var f = function(value){
var h = (inner.getHeight() - inner.up(‘div’).getHeight());
inner.style.top = (Math.round(value * h) * -1) + ‘px’;
}
s.options.onChange = function(value){
f(value);
};
s.options.onSlide = function(value){
f(value);
};
}

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options