Detecting Mobile Devices with JavaScript [duplicate] - javascript

This question already has answers here:
Detecting a mobile browser
(46 answers)
Closed 8 years ago.
I am using the below code to detect for mobile and I want to detect either Android only or iOS only. I tested the mobile detect with if( isMobile.iOS() ) alert('iOS'); and it shows the alert.
But I want to display the Android Google Play badge if it is Android and the Apple store badge if it is iOS but for some reason the below code isn't working. Can someone tell me what I am doing wrong?
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad /i);
},
};
if (isMobile.Android()) {
document.getElementById("googlePlayBadge").innerHTML = "<img src='modal-img/googlePlayBadge.png' alt='Google Play' class='img-responsive' />";
} else {
if (isMobile.iOS())
document.getElementById("appStoreBadge").innerHTML = "<img src='modal-img/appStoreBadge.png' alt='App Store' class='img-responsive' />";
};
<section class="text-center">
<div id="appStoreBadge"></div>
<div id="googlePlayBadge"></div>
</section>

Reliably detecting devices using JS is hard, man. Most sane people will avoid it.
There are libraries that do this, but if that's too much overhead:
var useragent = navigator.userAgent.toLowerCase();
var isAndroid = useragent.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
alert('I am an android device');
}
If for some reason you don't care at all about anything other than android or iOS (such as windows phones, blackberries, etc.) you could check if a touch event is available, then check if it's iOS (since that is more reliable), and if it != iOS but does have touch, you can show the play store icon.
sorry, I should also mention that I've used that JS successfully, but it's from here: http://davidwalsh.name/detect-android

Related

How to open fullscreen video on tap for mobile browsers

I figured out how to make a video full screen on click for desktop devices, however, the same code doesn't work on mobile devices. How can I make it work for mobile screens as well? This is my js code:
<script>
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}, false);
</script>
The fullscreen API is not supported for all mobile devices. https://caniuse.com/#feat=fullscreen
You can use Screenfull to avoid all the checks and complexities to handle the fullscreen experience. It exposes a property isEnabled which tells you if you are allowed to enter fullscreen. You can request fullscreen based on its value.
Maybe you got a 'playsinline' in your Videotag?
Just remove it
myVideo.removeAttribute('playsinline');

How to disable javascript code in mobile version [duplicate]

This question already has answers here:
If mobile disable certain scripts
(2 answers)
Closed 3 years ago.
I have a script of audioplayer, I need to replace it to play/pause icons in mobile version and I did it, but I need to disable audioplayer.js in mobile version. In computer version I need audioplayer.js, but in mobile No. How can I disable script? I tried to use this:
$(window).resize(function(){
if($(this).width() < 494) {
$('#script').attr('src', '')
console.log($('#script').attr('src'));
}
else {
$('#script').attr('src', 'js/audioplayer.js');
console.log($('#script').attr('src'));
}
})
but it did not help me. I need to disable script only in mobile version.
Full sample here
if (window.matchMedia("(min-width: 480px)").matches) {
document.write('<script type="text/javascript" src="js/audioplayer.js"></script>');
}
You can use this to prevent including audioplayer.js on mobile devices

Very Simple Redirect for Tablet

I am using a very simple HTML site and need to re-direct to a separate URL for Tablet and Mobile. I have the Mobile working with the following. Is there something I can add that is not too complex so it works for tablets as well?
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "https://www.londonontariomortgages.ca/m/index.html";
}
//-->
</script>
Nowdays you dont check for specific devices. Why? Because ther are too many to keep track of.
Thats why you check for features to act accordingly.
modernizr
You can make your Website responsive aswell. Take a look at Bootstrap.
By using this you configure your site to behave like "put that down there if the screen is medium sized" (they have standard breakpoints to determine if a screen is small medium large etc., which are widely used)
EDIT
To actually detect devices-types: mobile-detect
you can try to use navigator.userAgent and Regex to check user device
function Init(){
if( /Android|iPhone|iPad/i.test(navigator.userAgent) ) {
//mobile device
document.location = "https://www.londonontariomortgages.ca/m/index.html";
}else {
document.location = "https://stackoverflow.com/questions/50994561/very-simple-redirect-for-tablet/50994679?noredirect=1#";
}
}
Init();
you may want to use mobiledetect package.
composer require mobiledetect/mobiledetectlib
$detect = new Mobile_Detect;
// any mobile devices
if ( $detect->isMobile() ) {
// do something for mobile users
}
// Any tablet device.
if( $detect->isTablet() ){
// do something for tablet users
}

How to solve jquery error in mobile/tablet devices

A couple of days i found an issue that my jquery wasn't responding on ios devices. Now i found what the problem was. It was a perfect working code. Now i thought i will not include this on mobile so i used this code
This is the code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === false ) {
var muziek = getCookie("Muziek");
// Save progression when leaving window
window.onbeforeunload = () => {
var prog = $('#muziek audio')[0].currentTime;
console.log("current time = ", prog);
sessionStorage.setItem('audioProgression', prog);
};
}
I test this on the google element inspector on the different sizes and it worked. But on my ipad it still doesn't, is there a way i can use this code to run and not block the jquery on my ios device? I do not need the music in the ios devices or other mobile/tablet devices. But i still need it on my computer browser. Does anybody know a way i can solve this?
Kind regards
Dylan

Cross-browser bookmark/add to favorites JavaScript [duplicate]

This question already has answers here:
How do I add an "Add to Favorites" button or link on my website?
(5 answers)
Closed 9 years ago.
Is there any cross-browser bookmark/add to favorites using JavaScript.
Searched for some list but none is working. Can you please suggest any?
jQuery Version
JavaScript (modified from a script I found on someone's site - I just can't find the site again, so I can't give the person credit):
$(document).ready(function() {
$("#bookmarkme").click(function() {
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(location.href,document.title,"");
} else if(window.external) { // IE Favorite
window.external.AddFavorite(location.href,document.title); }
else if(window.opera && window.print) { // Opera Hotlist
this.title=document.title;
return true;
}
});
});
HTML:
<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
IE will show an error if you don't run it off a server (it doesn't allow JavaScript bookmarks via JavaScript when viewing it as a file://...).
function bookmark(title, url) {
if (window.sidebar) {
// Firefox
window.sidebar.addPanel(title, url, '');
}
else if (window.opera && window.print)
{
// Opera
var elem = document.createElement('a');
elem.setAttribute('href', url);
elem.setAttribute('title', title);
elem.setAttribute('rel', 'sidebar');
elem.click(); //this.title=document.title;
}
else if (document.all)
{
// ie
window.external.AddFavorite(url, title);
}
}
I used this & works great in IE, FF, Netscape.
Chrome, Opera and safari do not support it!
How about using a drop-in solution like ShareThis or AddThis? They have similar functionality, so it's quite possible they already solved the problem.
AddThis's code has a huge if/else browser version fork for saving favorites, though, with most branches ending in prompting the user to manually add the favorite themselves, so I am thinking that no such pure JavaScript implementation exists.
Otherwise, if you only need to support IE and Firefox, you have IE's window.externalAddFavorite( ) and Mozilla's window.sidebar.addPanel( ).

Categories

Resources