I am developing a PhoneGap apps and have the following page flow.
registrationPage > areaSelectionPage > orderDetailPage > areaSelectionPage
I would like the back button only appear on the last areaSelectionPage. If areaSelectionPage is coming from registrationPage, the back button should not appear. How can I do it?
I haven't tested the code, but you can take the following approach.
pagebeforeshow receives two arguments, event and ui. To get the previous page use, ui.prevPage and then apply the check.
$("#areaSelectionPage").on('pagebeforeshow', function(event, ui) {
if (ui.prevPage.attr('id') === 'registrationPage') {
//hide back button here
$('a[data-rel="back"]').hide();
}
});
Related
For some web pages we use the swipe left and right functionality of iPhone to pull up the menus.
Now with iOS7, they have introduced the ability to go back and forward to previous and next pages of browser history on swipe left and right motions.
But is there a way to disable it for specific pages so as to not have conflicting behavior on the swipe actions?
No, this is done at the OS level, and webpage doesn't get any callback
See this summary of safari changes in iOS7 that might cause problems to your website (including this swipe gesture)
You can't disable it directly, but the native swipe back only happens if there is something in the browser history.
It won't work in every case, but if you have a single page web app opened in a new tab, you can prevent it from adding to the history by using
window.history.replaceState(null, null, "#" + url)
instead of pushState or
document.location.hash = url
I had to use 2 approaches:
1) CSS only fix for Chrome/Firefox
html, body {
overscroll-behavior-x: none;
}
2) JavaScript fix for Safari
if (window.safari) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
Over time, Safari will implement overscroll-behavior-x and we'll be able to remove the JS hack
If no history then no swipe.
document.body.addEventListener('click', function(evt) {
const a = evt.target.closest('a:not([href^="#"])');
if (!a) { return; }
evt.preventDefault();
history.replaceState({ }, '', a.href);
location.reload();
});
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
I am a newbee on this jquery mobile platform.
I have a splitview in my application... As in left page(which is 20%) and right page(which is 80%).
I have states coming from the database in the left panel and when one of the state is clicked... their corresponding information in the right panel....(the information too is coming from the database).
Now the problem is... when I click on any state for the first time.. its information gets displayed on the right panel...
But when I click any state for the second time... the previous state information only stays.. the right panel is not getting refreshed as and when I click on the other states...
Thanks in advance....
$('#main').live('pageshow', function(event, ui) {
console.log("States show");
onDeviceReadyStates();
});
$('#content').live('pageshow', function(event, ui) {
console.log("Content show");
onDeviceReadyContent(sid);
console.log("contentsid: " + sid);
});
Made use of the router plugin....to pass the parameters....
I have a screen in my app where I would like users to have to taphold a div instead of just tap.
The only problem is that about every third time, the copy/paste ipad dialog pops up... this is annoying and if I cannot stop it, I will have to come up with a different solution.
But I would really like to just turn that iPad option off, but just while on that page.
EDIT:
I found out you have to disable right-clicking.
$(function(){
document.oncontextmenu = function() {return false;};
$(document).mousedown(function(e){
if ( e.button == 2 )
{
alert('Right mouse button!');
return false;
}
return true;
});
});
I'm guessing this isn't possible since I received no answers yet... I just changed the event to swipe as opposed to tapHold which works just as good for me.
All of the JQuery Mobile documentation I can find about navigating backwards assumes I am going to do this using an anchor tag and suggest I add data-rel="back" to the tag.
I'm not navigating from a tag, I'm mixing with PhoneGap which means I'm calling javascript functions like PhoneGap.something(goForwardOnSuccess,goBackwardsOnFailure);
where
function goFowardOnSuccess()
{
$.mobile.changePage('#next', { transition: 'pop' });
}
function goBackwardOnFailure()
{
$.mobile.changePage(/* I HAVE NO IDEA WHAT GOES HERE */);
}
One of the main things I'm using this sort of thing for is putting up a "Busy Doing Something In Native Code Don't Touch Me..." click shield screen with the "loading" stuff and then closing it in the completion functions.
However, I find when I try that from a button on a screen I "popped" into place, I find myself back at the home page (goes back two levels).
The documentation is maddeningly vague about how to navigate backwards from pure javascript. Any clues would be very nice.
Notice also that I tend to pop these busy screens from everywhere so explicitly coding a transition back to the screen I want isn't really an option.
It's definitely not clear in the documentation, but there are small allusions to it.
Try using:
$.mobile.back();
it makes sense to use data-rel="back" for something like that:
<a href="#" data-rel="back" ...
but it is better to use history.back(); inside javascript code blog i.e
.....
.....
var cId = $(this).val();
// do something with control ID then
.....
.....
goBackParent();
}
function goBackParent(){
history.back();
}
Why not just use data-rel="back" as an attribute to your back button, this will take the user back 1 page.
Also equivalent to history.back()
You are going back "two levels" because if you fire changePage programmatically via
$.mobile.changePage('#next', { transition: 'pop' });
and omit all the other options, you are triggering two functions:
changePage
hashChange
Normally on a regular transition, the hashChange is blocked, while on backwards transitions, the changePage should be blocked (not sure here...). So in your case you have your (wanted) hashChange and an unwanted (changePage) transition.
Check the JQM docs for the options you can pass along in your changePage call or look in the 1.0 source code #3140 for all available options. I would try also passing changeHash:false or fromHashChange:true along in your function call and see what happens.
If you want to dig deeper you will have to look for ignoreNextHashChange and how its value changes though JQM.
A call to history.back() will do that.
Add changeHash: true from where you are redirecting.
And then use 'history.back()' or 'history.go(-1)' from your current page. It will only take you 1 page back.
$.mobile.changePage("yourpage.html",{ transition: "flip", changeHash: true});