iPhone compatibility

sub

+1

what exactly then happens on iphone? does that mean that items that require a page are not accessible?
describe the issue please.

javascript file couldn't be loaded message alert happens. Works ok in desktop!

i asked a friend with an iphone. he did not tell me that there are errors.

On safari iPhone it doesn't work

In mobile safari it doesn't throw an error, just fails silently. Switching the user-agent to iphone in desktop Safari infinite scroll still works so it's not the user-agent.

Update: Jan. 23, 2012 - Depending on the views formatter views infinite scroll may or may not work on an iPhone. Using table or grid to output the view will work, unformatted list, fluid grid and probably others will not.

#7 Is there a way to make it work with fluid grid?

Hi,

we run into the same problem on a project. There are two problems in that runs people.

1) After ajax load of content it calling Drupal. attachBehaviors() this is a normal behavior for drupal... but a lot of modules dont use the drupal jquery once plugin right or ensure that the javascript code is called once per object. This is not a problem of this module...

2) On mobile Hardware like the iphone we can resize the window size but sometimes it happens automatically (content with is more than 980px)

so how it can fixed. I think we need a resize event and recalculating the offset positions on this event. If i got more time i will try a fix.

+1

Hi sorry, why Feature Request ? This is clear a bug and prevent the usage of this module on devices with autosize detection.

I agree that this is a bug and not a feature, and naturally with it not working on the iPhone it won't work on the iPad either.

a friend of mine also mentioned that the loading only works if the page is loaded 100% and then scrolled. by default iphone loads the page in some zoom mode that is like 30%. if you scroll there, it does not work

I looked at this issue briefly, and the problem isn't with the Drupal implementation. The jQuery autopager plugin itself has the problem, which you can see on its demo page http://lagoscript.org/jquery/autopager/demo. (The demo does have a "next" link that works as a fallback for iphone, but it has its own issue that makes for a frustrating UX. If you zoom in, you get the autoscroller. Then if you zoom back out and click "next", the next button doesn't know where the auto scroller left off, and takes you right back to the last thing you saw before clicking "next".)

Fixes would have to be on the plugin-end. There doesn't seem to be an issue queue or process for submitting bug fixes for that plugin. It doesn't seem to be actively maintained.

I'm going to have to look into the plugin more to see if it can be fixed.

What you can do to fix the issue on your site now is to use the viewport meta tag in your theme. The catch is that it requires your theme to be mobile optimized -- which is kind of a good idea anyway.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Here's an updated version of the autopager plugin that should get it to work on iPhone and iPad. I tested it to work on both.

https://github.com/cristinawithout/jquery-autopager-too

Please test if you can. You'll need to rename the file jquery.autopager-too.js to jquery.autopager-1.0.0.js and replace that file in the libraries/autopager directory.

The fix to the autopager plugin in #17 works great! The autopager now successfully triggers when the user pans to the bottom of the page. However, the three little boxes that appear to indicate that the scroller is currently loading the next page actually get rendered below the bottom of the screen. I used this CSS to fix it:

#views_infinite_scroll-ajax-loader {
  margin-top: -25px;
}

Also, since the iPhone doesn't show the scrollbar except while the user is actively scrolling, There's no indication that new content has arrived after the autopager triggered. To remedy this, I added a call to window.scrollBy(0, 50) in my mobile theme's Drupal.behaviors.attach() function, and set it to not call scrollBy until the second call to attach(). This makes the user aware that more content has loaded.

Thanks for this fix, cristinawithout! This would have been a serious problem for my team's mobile site, which I probably wouldn't have been able to solve myself.

i tested #17, works!

Upon further review, I discovered that (due to no fault of cristinawithout) the fix in #17 is somewhat inconsistently successful. This is because different browsers report slightly different values for the elements that jquery-autopager looks at to determine if the user has scrolled to the bottom of the page. So, I patched the $.autopager.loadOnScroll() function to make it slightly more lenient about what "bottom of the page" means.

My patched fork of cristina's repo is here: https://github.com/coredumperror/jquery-autopager-too, and I've submitted a pull request.

I created a patch that chooses the jquery.autopager-too.js file over jquery.autopager-1.0.0.js.

But your fork is not working for me iOS 6.0...

Hmmm, I don't see any problems with iOS 6 myself (tested in iOS Simulator and on an iPhone 5). Check out http://m.caltech.edu/news to see my fork in action.

I forgot to add the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The plugin still seems to work only with it... right?

I took the viewport tag out of my test site, but the infinite scroller continued to work. Which exact iDevice are you running iOS 6 on where you see this problem?

Do you have the issue on a live site that I could go check out for myself? Maybe there's something about the site itself which is breaking the infinite scroller.

I am on a iPhone 4s on iOS 6.0.

No, my site is unfinished... I cannot send you the link. I am using Zen Grids. But I don't think that this can be causing the issue...

Anyone else experiencing this problem?

@coredumperror Thanks for testing and for working on additional fixes. I replied to you over at github. Once I test, I can merge your fix.

@Lukas von Blarer I tested the autoscroller with iOS 6 on iPhone 4 for the site I'm currently developing. I don't have access to a 4s though.

Have you tried your site on any other iOS devices? If so, did you see the same results?

Have you tried on your site with different themes like Bartik? If the auto scroller works with another theme, then it's something that would need to be changed at your theme level. If it doesn't work with other themes, it could be the plugin or it could be something else on your site.

I'm going to send you privately a link to a dev site I have. It's just a site I use for testing, so I can't have links to it posted publicly, but if it works on your device, there's a good chance your site has an issue independent of the plugin.

It works on your test site. I will try with another theme...

Besides that my site will be responsive. So having a solution like this isn't a problem.

Thanks cristina, it works for me.

Is it the proper fix for this? If so we need to document it.

#17 it works, thanks.

#17 worked for us too

There's not a patch in #17. To be 'RTBC' this needs a patch.

The patch should not only include the updated file if available, but also fix the views_infinite_scroll_drush_autopager_download command.

See http://drupal.org/node/1335792#comment-7258336 for a patch that uses the updated jQuery plugin that's compatible with iPhone. If that issue gets resolved, this one can be as well.

#17 worked for me.. thanks !

#17 works for me. thanks!!

Any chance someone could test 7.x-2.x and see if it works for them?

7.x-2.x is working fine on iPhone in my current project, using unformatted lists.