jQuery Mobile popup scrolling with iframe on iOS


Hi,

I recently troubled using popups with jQuery Mobile because the content of the popup inside an iframe was bigger than the current page contents. Mobile Safari just scrolled the whole page instead of scrolling inside the popup contents.

At last I found a solution as a combination of preventing default touch-events when opening the popup plus inserting a snippet of code to wrap the iframe inside a div with some special css directives.

Place the following Javascript-Code anywhere on your page:

$(document).ready(function() {
   $('.popup').on({
      popupbeforeposition: function(event, ui) {
         $("body").on("touchmove", false);
         $('body').css('overflow','hidden');
      }
   });

   $('.popup').on({
      popupafterclose: function(event, ui) {
         $("body").unbind("touchmove");
         $('body').css('overflow','auto');
      }
   });

   $('.popup iframe').wrap(function() {
      var $this = $(this);
      return $('<div />').css({
         width: $this.attr('width'),
         height: $this.attr('height'),
         overflow: 'auto',
         '-webkit-overflow-scrolling': 'touch'
      });
   });
});

Et voila…

R.S.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s