Problem

I'm using Calendar with the jCalendar popup windows to display event content. This is great, except when the popup window needs a scrollbar (for events with long descriptions) there are some mobile devices on which:

  1. the scroll bar doesn't display, and
  2. single finger scrolling of the popup window doesn't work

I'm thinking specifically of iPhones and iPod touch devices previous to iOS5. Better scrolling behavior was introduced with iOS5 (http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/).

Possible solution

Support the iScroll library (http://cubiq.org/iscroll-4). This makes it so a scrollbar appears and single-finger scrolling works on iOS previous to version 5.

A patch is attached. Libraries API is used, and if the iScroll library is in the sites/all/libraries directory then jCalendar will use it. If not it won't.

Note that the iScroll library seems to need to be called with the selector for the existing page element which will be scrolled:

new iScroll('calpopup-body')

And because of that, it is necessary to add that inside the AJAX callback which fills in the popup body:

       // If sucessful call this
       function domCallback(msg) {
         $('#calpopup-body').html(msg);
+
+        // use the iScroll library, if installed, on touch screen devices.
+        if (isTouchDevice() && typeof iScroll == 'function') {
+          var myScroll = new iScroll('calpopup-body');
+        }
       }

(I understand if this is too specific to be included; mostly just wanted to get a patch up here for future reference and so others who may have had this issue have somewhere to start. Thanks!).

CommentFileSizeAuthor
jCalendar-support-for-iScroll.patch2.71 KBshark
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

shark’s picture

People interested in the usability issue of two-finger scrolling might want to read this:
http://www.uxbooth.com/blog/5-ios-behaviors-your-users-probably-don%E2%8...

"1. Two fingered embedded DIV scroll

Whenever there is a scrollable area (typically a DIV) that is embedded within another web page, this area can be scrolled on the iPad by swiping up or down with two fingers (this also includes scrollable areas within lightbox overlays). Unfortunately, there is nothing intuitive about this control, nor any reason a user would expect it to work. Of the users I observed, none used this technique. In fact, through my personal conversations with even the most hard-core Apple lovers, I have yet to find someone who knew about this gesture before I introduced it to them. Surely some users are aware of it, but my evidence suggests that most are not. As such, designers need to understand that any content hidden behind this scroll will likely be inaccessible for most users.

The obvious solution to this problem is to not use this technique with pages that will be accessed on iOS devices. Unfortunately, since this may already apply to any publicly available website, the design decision may have already been made, and the cost and effort to change it may be too high.

Another option would be to use CSS to sense the iOS device and then alter the display. If there is room to expand the area to fit the content (which may be the case in the image above), that may be the best solution. If not, a message could be displayed to iOS users that explains how to view the hidden information. It is not the most elegant solution, and could get unruly if you add too much messaging, but it may still pay dividends if the hidden content is crucial for task success."

As noted here, there are other solutions if people are interested in them (I wasn't, for this particular project).

Neslee Canil Pinto’s picture

Status: Active » Closed (outdated)

The D6 branch is no longer supported so we're closing this issue. If you think this issue still exists in D7 you can open a new one.