I'm using this function to detect if the device is a touch device:
function is_touch_device()
{
return !!('ontouchstart' in window) || !!('onmsgesturechange' in window);
};
Got this function from here: What's the best way to detect a 'touch screen' device using JavaScript?
But since Chrome 25 (25.0.1364) it returns true on my desktop which isn't a touch device.
Also I've updated IE9 to IE10 and it returns true in IE!
Searched around but couldn't find anything useful to fix this except using a something like this: http://detectmobilebrowsers.com/
What do you recommend?
I'm looking forward to your responses!
The code works just fine, the browser is able to understand touch events, just because your screen isn't touchable doesn't mean that the browser doesn't support the functionality. What you are looking to test is a hardware capability which isn't really testable. You can always use different ways though of seeing if the user is actual using a touch interface after touching it once, such as this article describes, or many others that larger libraries use such as Modernizer.
As a reference the code actually used in the article above is:
function isTouchDevice() {
var el = document.createElement('div');
el.setAttribute('ongesturestart', 'return;');
if(typeof el.ongesturestart == "function"){
return true;
}else {
return false
}
}
This seems to work:
function isTouchEnabled() { return !!document.createTouch; }
You could use Modernizr to detect touch capability.
This question is very similar to What's the best way to detect a 'touch screen' device using JavaScript? and should perhaps be considered a duplicate.
i was experiencing a false positive IE10 touch issue as well when I was visiting the site i've been working on from my laptop. The original is_touch_device method, i used basically the same thing. I modified the latter half of that statement to be the following:
function is_touch_device()
{
return !!('ontouchstart' in window) || (!!('onmsgesturechange' in window) && !!window.navigator.maxTouchPoints);
}
window.navigator.maxTouchPoints seems to be something specific in IE10 based on this post: http://msdn.microsoft.com/en-us/library/hh772144(v=vs.85).aspx
You can use 51dergees.mobi for detection on the server appropriately changing page view. It has HasTouchScreen, IsSmartPhone, IsTablet properties etc.
Related
I'm using a javascript library, DetectRTC, to detect if the browser can use microphone and other stuff.
if(DetectRTC.isWebsiteHasMicrophonePermissions){
//Is ok
}else{
//Can't use microphone
}
The site has the permissions to use the microphone, but DetectRTC.isWebsiteHasMicrophonePermissions is still false. So I tried to print the object on the console and I get that isWebsiteHasMicrophonePermissions is set to true. But when I print the variable alone, it changes to false again.
console.log(DetectRTC); //isWebsiteHasMicrophonePermissions: true
console.log(DetectRTC.isWebsiteHasMicrophonePermissions) //false
Is this a bug or something? How can I fix it?
As covered in the docs, you need to use DetectRTC.load() to wait for detecting audio/video input/output devices.
See this part of the docs for further info.
// This is too early
console.log(DetectRTC.hasMicrophone);
DetectRTC.load(() => {
// This is reliable
console.log(DetectRTC.hasMicrophone);
});
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
In my web application I define my own keyboard event handler and override some default key mappings:
document.onkeydown = function(eventParam)
{
var keycode;
keycode = eventParam.which;
// detect ESC key
if (keycode == 27)
{
//close the window
LightboxFileInfo.close();
}
return true;
};
However, at another point in my web application, i want to clear my custom key mappings and to use again the default ones. This is my problem. Could you please advise how to do just that? How to clear all my keyboard mappings and again to use the default ones without restarting the web-application?
Basically, my web application has numerous windows. The windows are lightboxes. For each window/lightbox I use different functions for the same keys. Remember, that I have a web application, not a website. It means, that everything occurs in one webpage/JavaScript Document, where I display different windows through the already mentioned lightboxes and not as different .html/.php files.
If I need to save the default keyboard mappings before changing them, then fine. Would you please advise how to do that? My JavaScript knowledge simply ends here. Of course, I look for the simplest solution.
I am looking for a solution using:
JavaScript
I do not use jQuery, just plain JavaScript.
Besides that, I use:
HTML 5
CSS 3
PHP 5.5.8
MySQL 5.6.15
Apache 2.4.7
Thank you in advance
Since you aren't disabling the default behavior with eventParam.preventDefault();, the normal defaults should work too in the first place. But to disable your own functionality from being called, you can just override the handler function with empty one
document.onkeydown = function() { };
So I know $.browser has been deprecated and "frowned upon", since jQuery 1.3, but it continues to exist & work in the code.
It's still using the plain javascript: navigator.userAgent to determine the browser being used, as well as the version.
Now is there something about these I don't know about navigator itself, that I shouldn't be using either $.browser or plain vanilla JS to get the browser/version? I just want to make sure when they have IE8 (for example), they really do have it, and I'm not processing the wrong code.
What other alternatives do we have for browser sniffing? I know about $.support, I use modernizr, but sometimes I need just need the down and dirty browser version, instead of seeing what the browser is capable of handling (I think that is a completely different problem solver).
You kind of answer the question yourself. The ideal is to check for feature support. As more browsers and devices come onto the market this approach should scale.
However if you want to do something 'down and dirty' then browser detection of course works, but only so far as you will know your code works in the existing set of browsers (or even just those you've tested your code with).
Generally it's recommended not to try to guess what the browser is but to check if a function is available. There are too many browsers and variants.
To check if a function is available, you simply do this :
if (!Array.prototype.map) {
// not available, shut down computer !
If a "must" to know which browser on the page for me, I use this personally;
(function() {
var re_browsers = {
firefox: /firefox\/([\d\.]+)/,
chrome: /chrome\/([\d\.]+)/,
safari: /webkit.*?version\/([\d\.]+)/,
opera: /opera.*?version\/([\d\.]+)/,
ie: /msie\s+([\d\.]+)/
// ...
};
var ua = window.navigator.userAgent.toLowerCase(), k, re, browser = {};
for (k in re_browsers) {
if (re = re_browsers[k].exec(ua)) {
break;
}
}
browser[k] = true;
browser["version"] = parseFloat(re && re[1]);
browser["versionOrig"] = re[1];
jQuery.extend({browser: browser});
})();
Is there any way to check a browser whether it supports 'HTML5 History API' using JavaScript.
Do I have to check all the browsers and its versions with a long list of condition in if statement.
Or simply like checking any object of function using 'if' statement is enough???...
Checking for the existence of a pushState() method on the global history object should be sufficient.
function supports_history_api() {
return !!(window.history && history.pushState);
}
For more general HTML 5 feature detection I'd look at Modernizer
http://diveintohtml5.info/detect.html#modernizr
This will insulate your code from the messy specifics of each test, making the code more readable and less error prone. With the Modernizer script on your page you'd just do:
if (Modernizr.history) {
// history management works!
} else {
// no history support :(
// fall back to a scripted solution like History.js
}
Checking for history.pushState and history.replaceState objects existence should be sufficient, as it's generally sufficient with feature detection in general.
You can use canisuse.js script to detect if your browsers supports history or not
caniuse.history()
You can check weather or not a function is registered:
if (typeof history.pushState != 'undefined') {
//Enabled
}
Then just replace //Enabled with whatever you wish to do if it's supported.
I'm trying to check if the browser supports onHashChange or not to hide some code from it if not, in this way:
if(window.onhashchange){
...code...
} else {
...other code...
}
I tried this too:
if(typeof window.onhashchange === "function"){
alert("Supports");
} else {
alert("Doesn't Supports");
}
As described on Quirksmode this should work but if I do an alert for example in true state in Safari than alerts me but Safari is not supporting onHashChange :S
What's the problem with it? If I'm not on the right way how should I check it?
You can detect this event by using the in operator:
if ("onhashchange" in window) {
//...
}
See also:
onhashchange - MDC
Detecting event support without browser sniffing
Emulating onhashchange without setInterval
Be warned that you're better off using feature detection rather than existence inference (such as "onhashchange" in window).
#xkit explained to me a good feature test to work around the fact that although IE7 doesn't support onhashchange it would still return true for existence inference such as if("onhashchange" in window){/code/} when using IE7 Standard Document Mode in IE8.
What #xkit suggested was setting a flag (such as var isSet = true;) within a handler function for the onhashchange event. Then changing window.location.hash using JavaScript and see if the flag was set.
It's likely that the version of Safari that you're using has added support for the onhashchange event since the time that that Quirksmode article was written. Tests should still be valid; try it in other browsers you know not to support the event.
Edit: also, you should use the method described by #CMS instead, as the event will not contain a function by default; thus both of those tests will fail.
if (window.onhashchange !== undefined) alert('Supports onhashchange');