Response title
This is preview!
Move this topic
Swiping works on desktop but not on mobile
in jQuery Mobile
•
8 years ago
Hallo,
today I started checking my pages on my new mobile (Samsung Ace 3). One problem I encountered was that swiping pages works on my desktop computer but not on my mobile, e. g. on this page:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearl.php
Resizing the images and the video for responsive behaviour works fine, thus javascript seems to be activated. The buttons for paging are also working fine. Any ideas what's the problem and how I can fix it?
Best regards - Ulrich
today I started checking my pages on my new mobile (Samsung Ace 3). One problem I encountered was that swiping pages works on my desktop computer but not on my mobile, e. g. on this page:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearl.php
Resizing the images and the video for responsive behaviour works fine, thus javascript seems to be activated. The buttons for paging are also working fine. Any ideas what's the problem and how I can fix it?
Best regards - Ulrich
1
Replies(5)
Re: Swiping works on desktop but not on mobile
8 years ago
I see you are registering your swipe callback inside a pageshow callback. This is a pretty bad idea, as it requires the messy .off().on() sequence you've done as a work-around.
Better to set your callbacks in pageinit.
As well, all your selectors are global. Search for stuff inside of specific pages, not globally!
Leave a comment on watusiware's reply
Re: Swiping works on desktop but not on mobile
8 years ago
I changed the event to pageinit, but I had the same problems with multiple swiping, so I had to keep the .off().on()
With this version swiping doesn't work on my mobile either:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearlpageinit.php
The reason why I choosed "pageshow" was that I needed the class "ui-page-active" to be set in order to determine the correct hrefs.
Don't understand this. Can you please explain it more detailed?
With this version swiping doesn't work on my mobile either:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearlpageinit.php
The reason why I choosed "pageshow" was that I needed the class "ui-page-active" to be set in order to determine the correct hrefs.
all your selectors are global
Don't understand this. Can you please explain it more detailed?
Leave a comment on ulr.ba's reply
Re: Swiping works on desktop but not on mobile
8 years ago
$('.some-selector') is a "global" selector. It's searching for elements with class some-selector anywhere in the document.
Instead, search on a specific page.
All your selectors are global. Doing this results in an unmanageable mess. It's no wonder the code has problems. You are coding as if the DOM contained only one page. That's not true with jQuery Mobile. At least during page transitions, you have at least two pages in the DOM.
I typically structure page callbacks like this:
$(document).on('pageinit', '.some-page', function() {
// First, get a convenient reference to this page
// As well, get jQuery objects for anything we'll be working with on the page
var $page = $(this);
var $fooButton = $page.find('.foo-button');
// Do anything here that you want to do each time the page is loaded
// ..
// ..
$page.on('pagebeforeshow', function() {
// Do anything here that you want to do before each time the page is shown
});
$fooButton.on('click', function() {
// do something when they hit the foo button on this page
});
)};
BTW, if you are wondering about the $, I like using $ as the first character for variables that hold a jQuery object.
You can use this for a single page, a group of pages (all with the same CSS class, for example, but you can use any selector that will select the pages you are interested in), or all pages (use .ui-page as selector).
If you don't understand the purpose of this code structure, you don't understand jQuery Mobile Ajax and page events. I'd go back and re-read the docs until you get it.
You shouldn't code as if the one page your code concerns is the only page in the document. Because that isn't true. You're writing code from a false assumption, and it will get you in a world of hurt.
Leave a comment on watusiware's reply
Re: Swiping works on desktop but not on mobile
8 years ago
Hallo watusiware,
thank you for this detailed answer. Yes, I was already aware that JQM keeps more than one page in one document. Please note that I used the .ui-page-active selector in order to limit my actions to the page currently visible in the browser.
By alerting I found out that the pageshow event wasn't fired. Therefore I deleted all the code above it and now it fires. I also found out that I don not need the .off() when I use the .ui-page-active selector. But although my alerts are indication that the path where the swipe events are registered are executed, swiping doesn't work reliably.
My current test page:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearlpageinit.php
thank you for this detailed answer. Yes, I was already aware that JQM keeps more than one page in one document. Please note that I used the .ui-page-active selector in order to limit my actions to the page currently visible in the browser.
By alerting I found out that the pageshow event wasn't fired. Therefore I deleted all the code above it and now it fires. I also found out that I don not need the .off() when I use the .ui-page-active selector. But although my alerts are indication that the path where the swipe events are registered are executed, swiping doesn't work reliably.
My current test page:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearlpageinit.php
Leave a comment on ulr.ba's reply
Re: Swiping works on desktop but not on mobile
8 years ago
This will run on pageshow of every page on your site. I doubt this is really what you want:
$(document).on('pageshow', function(e) { ...
You definitely need the .off() calls if you are going to code this way. (But don't!) Otherwise, you will accumulate multiple callbacks. They'll multiply like rabbits! ;)
I also wouldn't be using global variables. Wrap your JS in a self-executing function and put the "global" variables there.
Why are you listening for your swipe events on $(document)? Listen on a page, or a part of a page where you want the user to swipe.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to ulr.ba's question