Fancybox 2 uses this code
isTouch = document.createTouch !== undefined
to determine if the browser is a touch device. This seems to be a problem with QTWebKit because this function exists. Another way also fails because this attribute is null instead of undefined:
document.documentElement.ontouchstart
So I checked for both
isTouch = document.createTouch !== undefined && document.documentElement.ontouchstart != null
Or is there another solution?
I have been using
window.isTouch = !!('ontouchstart' in window && window.ontouchstart != null);
This works in QtWebkit and in Chrome's Webkit. I have not done further browser testing.
Related
I am trying to detect if a client is an iPad, and to do that I'm trying to use window.navigator.platform and window.navigator.maxTouchPoints.
I'm trying to do this from Vue, by setting it as a computed property.
One device I have to test this with is an MDM-device, an iPad running the latest iOS and using Safari as the browser.
This is my computed property:
// ...
computed: {
isIpad() {
return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0;
}
}
And this is the view:
<div class="feature">
<div v-if="isIpad" class="feature-desktop">This feature is only available on desktops.</div>
</div>
In my vue-inspector on MacOS/Firefox the computed property is correct, returning false as expected. When I try to emulate an iPad through Firefox, it returns true, as expected. However, if I open the page using Safari on my MDM-enabled iPad, this property returns false.
Sadly, I cannot connect with developer tools as the iPad is locked down, but I can manually put javascript on the page to print out the result of both navigator.platform and navigator.maxTouchPoints, and they return the expected MacIntel platform and 5 touch points.
<script type="application/javascript">
document.getElementById('app').innerHTML = navigator.platform + ' ' + navigator.maxTouchPoints; // Prints MacIntel and 5
</script>
Does anyone have any experience with this sort of thing? I've yet to attempt setting a data-property with mounted().
Using the mounted event handler to set a data-property solved my problem.
Hit an issue with our mobile app (home screen safari app) in that it started reporting since iOS 13 that there was no html5 database support.
It tries to detect support for WebSQL with the following code:
function getDBType() {
if (typeof window.openDatabase == "function") {
return "WebSQL";
}
return "IndexedDB";
}
Unfortunately this is reporting that, despite WebSQL being removed from Safari 13, WebSQL is available, only to fall over with an exception later when it tries to call window.openDatabase().
On closer inspection it seems that something weird is happening:
(typeof window.openDatabase == "function") == true
(typeof window.openDatabase == "undefined") == true
(typeof window.openDatabase == "randomstring") == false
window.openDatabase == [object Function] /* not native function */
Test Page: http://locutus.sorcerer.co.uk/demo/safari-openDatabase.html
So the question is, how to properly test for WebSQL support that will work on safari 13?
One thought is to do the following to detect Safari 13's lack of support (with comment explaining the seeming pointless test)
if (typeof window.openDatabase == "function" && typeof window.openDatabase != "undefined") {
return "WebSQL";
}
Side Note: It is possible to enable WebSQL in Safari 13 on iOS is settings, Safari -> Advanced -> Experimental Features -> disable the 'Disable WebSQL' option. Only works in Safari app though, home screen safari apps still don't get WebSQL support.
Our code uses if (!window.openDatabase) throw 'No WebSQL support'; and that seems to be enough to detect the disabled setting on iOS13
I have seen similar topics, but I haven't been able to figure out why this issue is still showing for me.
Let me explain.
In react native I show data in a list. Which works fine, but when I try to look for a specific data: data.hasread.userId, I get the famous red error screen, saying:
TypeError: undefined is not an object (evaluating 'data.hasread.userId')
So in my code I try to ignore data that is undefined and only get those who aren't.
const dataUserId = typeof data.hasread.userId !== "undefined" && data.hasread.userId;
For one data I get true (as it contains the userId), but anything else shows the typeError.
It shouldn't.
Any idea why?
BTW, this is how that hasread structure is looking (firestore data):
hasread
userId -> uid
I might have found the solution, although not sure if it is the best, but as least it seems to work.
I changed:
const dataUserId = typeof data.hasread.userId !== "undefined" && data.hasread.userId;
To:
const dataUserId = data.hasread && typeof data.hasread.userId !== "undefined" && data.hasread.userId;
And now the error isn't showing
I have two joomla applications se up with exactly the same versions, the same global configuration settings, and I set up a test application with the following function to load a php into a div on a specific page..
function getDiv(str) {
var id = document.getElementById("appselector").value;
if (id == "") {
document.getElementById("scoffitcategoryedit").innerHTML = "";
return;
}
else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp3 = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp3.onreadystatechange = function() {
if (xmlhttp3.readyState == 4 && xmlhttp3.status == 200) {
document.getElementById("scoffitcategoryedit").innerHTML = xmlhttp3.responseText;
alert("WTF");
}
};
xmlhttp3.open("GET","index.php?option=com_jumi&fileid=23& format=raw&" + str + id, true);
xmlhttp3.send();
}
}
I know its a little long winded, but the problem is that the script works fine in one website, but not in the other. Both of them are loading the same versions of jquery (which as you can see I don't like using), and both have the same templates. The only clue I seem to have found is that when I have text links elsewhere on the site attached with query statements pointing to self (index.php?blastr=bla&drivelstr=drivel), the browser shows index.php/ prepended to the link mentioned above.
I debugged the script and in the non functioning website it hangs on the xmlhttp3.send line.
I know people espouse the beauty of jquery's load() function as a replacement for this, but I cant get it to work (probably because the templates are using jquery versions higher than 1.8.1 when it was deprecated). So i'd rather stick with base js.
Any ideas about this inconsistent behaviour ?
This should be a comment but can't yet :(
I would check your configuration file for this line:
public $live_site = '';
and see if there is something in the failing site besides ''.
I found out what it was, I must have actually installed two different versions of the Jumi application in my websites. one website had a file under components/com_jumi/views/application named view.raw.php while the other did not. This meant that the format=raw in the index.php string could not be interpreted and caused a null response.
I simply copied the file into the other website where it was missing and everything then worked fine. But thanks for the response.
I noticed cordovaInitCallback is called each time Worklight/Cordova is initialized in an Android app. In particular, it calls Cordova's "clearHistory" to wipe out the WebView history. This has been an issue when I try to make use of window.history in a multi-page app since the history is always reset during the initializtion from page to page.
Since the comment suggests that the purpose for this clearHistory call is to prevent going back to an old page in a direct update scenario, could the condition be strengthened over an Android environment check so that it is only called if a direct update has just taken place? One case, for example, I can think of is when connectOnStartup=false, then direct update would not occur.
wlclient.js:
var cordovaInitCallback = function(returnedData) {
onEnvInit(options);
if (WL.Client.getEnvironment() == WL.Env.ANDROID) {
if (returnedData !== null && returnedData !== "") {
WL.StaticAppProps.APP_VERSION = returnedData;
}
// In development mode, the application has a settings
// widget in which the user may alter
// the application's root url
// and here the application reads this url, and replaces the
// static prop
// WL.StaticAppProps.WORKLIGHT_ROOT_URL
// __setWLServerAddress for iOS is called within
// wlgap.ios.js's wlCheckReachability
// function because it is an asynchronous call.
// Only in Android we should clear the history of the
// WebView, otherwise when user will
// press the back button after upgrade he will return to the
// html page before the upgrade
if (**WL.Env.ANDROID == getEnv()**) {
cordova.exec(null, null, 'Utils', 'clearHistory', []);
}
}
I am currently using Worklight 5.0.5, and have checked this same condition exists in 5.0.5.1.
Thanks!
The architectural design of Worklight is SPA (Single Page Application).
cordovaInitCallback should be called only once in the life cycle of the application.
That said, you can, if you wish, override it.