Paul Paul - 1 month ago 19
CSS Question

Issue getting menu to swipe

I am using jQuery's swipeLeft and it works for the most part except for one thing I cannot figure out. If I put the div that I am trying to swipe off the page, ie: treating this as a mobile menu that I would swipe to display, the function no longer works.

I am using the exact code jQuery has on their site.

The only thing I changed was

div.box {
width: 50%;
height: 3em;
background: #108040;
margin-left: 101%;
}
div.box.swipeleft {
background: #7ACEF4;
margin-left: 50%;
}


Anyone have any ideas why this will not swipe if I take it off the page or how I can get it work off the page?

See the fiddle, though it doesn't work on it for some reason. If someone wants to see this live just let me know.

Answer

For start your External Resources was in wrong order. You should start with Jquery library and Jquery Mobile after, its must because Jquery Mobile relies on the main Jquery library.


This is the correct order:

  1. jquery.mobile-1.4.5.min.css
  2. jquery-1.10.2.min.js
  3. jquery.mobile-1.4.5.min.js

And to your question, look at this example: Fiddle demo

(Just remove the border if you need a white page)


Note: for loader hiding use this line:

$.mobile.loading().hide();