I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.
I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.
Related
I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?
Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
I have set up a swipeleft event in my app to move between fields of a form. All of the fields are dynamically generated, so I'm not swapping between pages, I'm clearing and re-generating all the DOM elements. The problem is the swipe event only fires every other time I swipe on the page or if I touch or tap anything on the page.
Here's the code that sets up the events:
$(document).delegate("#scorePage", "pageshow", function() {
$.event.special.swipe.scrollSupressionThreshold = 10;
$.event.special.swipe.horizontalDistanceThreshold = 30;
$.event.special.swipe.durationThreshold = 500;
$.event.special.swipe.verticalDistanceThreshold = 75;
$('#divFoo').on("swipeleft", swipeLeftHandler);
$('#divFoo').on("swiperight", swipeRightHandler);
tableCreate(traits[0].keyboardID);
});
For context, tableCreate is putting a dynamically generated table into divFoo that contains information a user can pick from. Here's the event code itself:
function swipeLeftHandler() {
$("#divFoo").empty();
traitIndex++;
tableCreate(traits[traitIndex].keyboardID);
}
Why is my swipe event only firing every other time there is a swipe on the page?
Primarily testing on Android right now, if that makes a difference.
Edit I'm using JQuery Mobile version 1.4.4
I figured out a way around this problem by simply rolling my own implementation of these events. There's some sample code on how to do something similar here:
https://snipt.net/blackdynamo/swipe-up-and-down-support-for-jquery-mobile/
If anyone else uses this code to fix my same problem, make sure to be aware that the article is implementing swipeup and swipedown so you will have to adapt it. In the end, I'm not entirely sure about the differences between this code and the actual implementations of swipeleft and swiperight, but this works consistently so I'm cutting my losses and going with it.
I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:
$("#page3").on("pagecreate", function(e) {});
It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...
jQuery Mobile 1.4.0
You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.
The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.
$(document).on("pagecontainerbeforeshow", function (e, ui) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if(activePage == "page3") {
doSomething();
}
});
Demo
I am using the localstorage option to set a variable for using it in another page.The platform is Android
Just to simulate the problem, i just created 2 simple JQM pages and set the variable in page 1 and use it in page 2. That works fine for the first time. When i'm going back to page 1 and set a new value for the variable, page 2 tells me that it is the previous value(!). I'm a little bit lost how to use it. Can someone give me a clue how to manage this? The weird thing is that on an old Android version (like 2.3.3) it works fine, but on a new one (like > 4) it fails. I think it has something to do with ready() event?
Page 1 - Main page:
$(document).ready(function () {
$('#Klant_Lijst').delegate('li', 'click', function () { var x = $(this).data('nummer'); localStorage.setItem("Nummer", x);});
});
Page 2 - sub page
$(document).ready(function () {
GetFustInfoKlant(localStorage.getItem('Nummer'));
});
I hope someone can give me an hint in a direction. Thanks!
Please dont use ready() method, use JQM page events like pageshow, pagecreate, pagebeforeshow, etc..
I am using Prototype JavaScript library for creating dynamic drop-down menus. Before the page loads, there is no event attached to the select statements with id, id_bran and id_gen. As can be seen, the init_image is called when the page loads, and the onclick event is attached to those select statement.
This works fine in desktops where I can use a mouse to execute the click event. It however does not work in my Android and iPhone browsers. When the page loads, the init_image is called and the getval function is executed. Later however, when I make a selection in the dropdown menu, the onclick event does not call the getval function. So I am confident that the prototype library is working on my Android and iPhone as the ajax request is made on page load but it fails subsequently. What's going wrong here?
<!--
MY HTML body->onload
The init_image is called the first time when the page is loaded
-->
<body onLoad="init_image();">
//Javscript function called on page load
function init_image() {
getval();
//Assigning the event to id_gen and id_bran for mouse clicks
document.getElementById("id_gen").onclick = getsize;
document.getElementById("id_bran").onclick = getsize;
};
//Javascript function called on page load and during mouse click on the select
//statement with id = id_bran and id_gen
function getval() {
ur = 'szv/c1--'+$F('id_bran')+'/g1--'+$F('id_gen');
new Ajax.Request(ur,
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText;
$('id_val').replace(response);
}
});
};
First of all, you're force-injecting events and the load event which may lead to potential cross-browser issues. If you're using prototype.js, rely on it's native methods which are cross-browser:
<script type="text/javascript">
document.observe("dom:loaded", function() {
.. your code here ..
});
</script>
Then again for properly localizing and observing the click events, instead of:
document.getElementById("id_gen").onclick = getsize;
Use something like:
$('id_gen').on('click', getsize(e).bindAsEventListener(this)); // for prototype 1.7 branch
Or:
$('id_gen').observe('click', getsize(e).bindAsEventListener(this)); // for prototype 1.6 branch
Also by setting passing the e variable there, your getsize() function will have the Event object there, so you could stop it's native behaviour (like leading to #):
function getsize(e) {
e.stop();
.. your code here ..
}
Additionally, it would be best and much less bloated if you lock your whole logic into class and create an object for it... but that's a whole different story... :)
prototype.js is a powerfull tool, but needs some care.
I would suggest you reading some basics on the framework and following the API documentation later on:
http://prototypejs.org/learn/
http://api.prototypejs.org/