Software Archive
Read-only legacy content
17060 Discussions

how to swipe with AppFramework using JQuery Mobile

Osama_R_
Novice
825 Views

guys, i'm trying to handle the swipe event manually using jquery.mobile library.. and the bellow code works normally with a test html page, but in XDK not working!

i'm using AppFramework 3:

declaration in index.html header

<script src="lib/jmobile/jquery-1.11.3.min.js"></script>
<script src="lib/jmobile/jquery.mobile-1.4.5.min.js"></script>

 

in index_user_scripts.js:

$(document).on("pagecreate","#testswipe",function(){
          $("div").on("swipe",function(){
              //$("span").text("Swipe detected!"); //this line written for test if the event fired on not..!
              activate_page("#continue_page");
              
          });                       
        });

 

in index.html body:

<div id="testswipe"  data-role="page" style="height:100px; width:200px; background-color:#999;">
     <span></span>
</div>

 

 the above code works normally with a test html page, but in XDK not working!

any suggestion?

0 Kudos
2 Replies
Chris_P_Intel
Employee
825 Views

Have you tested it on a device?

Remember, "swipe" is a touch based event, not a mouse based event. That might be why it isn't working in the XDK. If you want to map mouse events over to touch, there are a couple of approaches:  

TouchPunch, a jQuery UI plugin.  http://touchpunch.furf.com/   You might be able to use this without changing your code much.  

Hammer.js  , http://hammerjs.github.io/,   Hammer.js provides all the swiping events. We like it a lot, but you might have to change more code. 

Also, if it _is_ working on device, then you could live with it, rather than trying to complicate things by mapping mouse events to touch.

 

But perhaps I've misunderstood your situation. If so, let me know with a fuller description.

0 Kudos
Osama_R_
Novice
825 Views

thank you CHRIS, sure I tested it on device.. but unfortunately not working..

 

regarding Hammer.js, also I tried it with this code in  index_user_scripts.js:

var element = document.getElementById('contact_page');
     Hammer(element).on("swipeleft", function(){
         activate_page("#continue_page");
     });

 

and still not fired! whether in simulator or in device!

you mentioned, I have to change some code, what do you mean, because I added some code, not changing.. :)

I don't know maybe something missing there, any suggestion?

 

0 Kudos
Reply