I'm trying to build a mobile-safari/iphone web-app using jQuery code I already wrote for the desktop version of the app. The problem I'm having is that when my phone goes to sleep with the web-app running, when I wake it up (slide to unluck) the JavaScript event handlers no longer function. In this case meaning when I click on a link that used to perform an AJAX update via an onclick event it actually follows the link by opening the page in a new Safari window, breaking the appearance of the native iPhone app.
The code that stops working:
$(function() {
var ajaxLoad;
var ajaxClick = function(e) {
e.preventDefault();
e.stopPropagation();
$("body").load( $(this).attr("href"), ajaxLoad );
}
ajaxLoad = function() {
$(this).find("a").click( ajaxClick );
}
$("a").bind( "click", ajaxClick );
});
When the code works the result of the link will open in the web-app frame, when it breaks, the code will open in a new safari window, breaking the look of an actual app.
Not tested - but would it help to add 'return false' to the end of the ajaxClick function so that the link does not activate.
Related
So I'd like to use ratchet to create a mobile web experience (and not a phone gap/hybrid app experience), and ratchet seems like a good fit for that. However, I don't want the functionality to be broken if a user views my prototype from a desktop browser (it can be ugly ). I've noticed that some of the javascript like the modals don't work in a desktop and only on the mobile device.
What's the work around to get something like the modal working on a desktop browser as well?
I noticed in the js file that I can just add the same event listener to the click event from the touched event like so:
window.addEventListener('click', function (event) {
var modal = getModal(event);
if (modal) {
if (modal && modal.classList.contains('modal')) {
modal.classList.toggle('active');
}
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
}
});
Any suggestions on doing a side by side with say bootstrap? Is that feasible?
I am new to createJS toolkit (Flash CS6), My concept is I have a multiple buttons on the stage, each button click will have different animations in different frames.
my code is
'/* js
this.stop();
this.btnname.onPress = function()
{ this.parent.gotoAndPlay("cone"); }
*/'
it is perfectly working in all browsers and android mobile, but in iPhone it is not working,
I am trying to click on the button but canvas is highlighting in iphone,
when I change my code to the following code,
'/* js
this.stop();
this.onPress = function()
{ this.gotoAndPlay("cone"); }
*/'
It is working in iPhone, but I have multiple button clicks, here is my major problem.
Please help me find a solution to this issue.
Use addEventListener and listen for the "click" or "mousedown" event instead of assigning an onPress function. Like this:
/* js
this.stop();
this.btnname.addEventListener("click", function(){
this.parent.gotoAndPlay("cone");
});
*/
You need to create a shape, cache it and use it as the hitArea of your button. john has answered your question here: http://community.createjs.com/discussions/easeljs/5663-touch-on-ios-only-seems-to-work-with-bitmaps
I have been making a Phonegap / Cordova 2.0 app with backbone.js which has all been fine until I tried to build in a form. The form is displayed but the click events do not trigger the keyboard.
I played around with different events and found that adding ontouchstart="this.focus()" brought up the keyboard fine. I added a catchall in the view function to bring focus:
window.PageView = Backbone.View.extend({
initialize: function() {
this.template = _.template(tpl.get('page'));
},
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
$('input', $(this.el)).bind('touchstart',function(event) {
$(this).focus();
});
return this;
}
});
But even with this if I change bind('touchstart'... to 'click' it doesn't get triggered.
I have found a couple of other posts like: click event doesn't fire in an underscore template
which suggests it is to do with the underscore.js templating process but nothing is very clear.
I guess I could make a timer function on touchstart to simulate this but it's kindof mysterious so I want to know what's going on really.
Thanks.
Try this:
this.$(':input').bind(...)
It turns out it was iScroll causing the problem.
onBeforeScrollStart: function (e) { e.preventDefault(); },
Specifically. I just commented out the e.preventDefault(); and it worked a treat!
Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.
Opening my mobile webpage from my homescreen (after adding it to my homescreen), it starts in fullscreen mode, so far so good.
After logging in (form/submitbutton), the 'app' is still in fullscreen mode, which is also the desired result.
Now, when I click a link that has the rel="external" attribute, webkit opens a new window in Safari, so it exits the fullscreen 'app' I started from my homscreen, I would like it to stay in fullscreen mode.
data-ajax="false" has te same result. Removing data-ajax="false" and rel="external" will not exit fullscreen, but this way you can't link to a multi-page document (1 document with different data-role="page").
Does anyone has the same problem, or even better, a solution?
I do not really care about the transitions, I just want the webpage to remain in fullscreen mode, (the user has to log in again when the new window has opened).
iPhone 3gs
M_webkit / 5.0.2
Why not create a script that pulls out the href and goes to the new url via javascript.
If you use jQuery it's as simple as:
$("a[rel='external']").bind("click",
function() {
if (this.href) {
location.href = this.href;
return false;
}
});
Without jquery you'll need to use object detection and attach a click event to it with the same logic inside the anonymous function above.