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
}
I have a function that's supposed to adjust some elements within navigation for mobile devices, but it doesn't work on Android 2.3, can you please tell me what's wrong with it?
function mobileNavTop () {
if($(document).scrollTop() <= 25) {
$('#mobile-navigation').css({'position':'absolute', 'right':'0', 'top':'18px'});
$('.jq1').css({'position':'absolute'});
$('.move_up').hide();
} else {
$('#mobile-navigation').removeAttr('style');
$('.jq1').removeAttr('style');
$('.move_up').removeAttr('style');
}
}
Also I see that Android browser doesn't support scrollTop() property, how could I replace that?
I want to autoplay video in fullscreen. I searched and found out that Fullscreen API can be used to do this and found out that code similar to this can be used.
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
This code works fine. But this will need some triggering event like mouse click or some keyboard input. But is it possible playing a video automatically in fullscreen without any triggering event as soon as the html file is opened?
Nope. From MDN:
NOTE: Fullscreen requests need to be called from within an event handler or otherwise they will be denied.
How can I enable/disable the fullscreen option of one video from my post tag HTML in Wordpress? I'm using Video.js.
I would not like to make it for ever, just decide which video I want with it or without it, anytime. I tried AllowFullScreen="true/false" but it doesn't work.
Current version of video-js (6.x.x) supports disabling of fullscreen button also by fullscreenToggle option. You can simply set it during init of the player like this:
videojs("my-video", {
controlBar: {
fullscreenToggle: false
}
});
However, I observed that it doesn't mean that you are not able to enter fullscreen by hand gesture on mobile devices. (For example reverse pinch on iPad - two fingers on the screen and moving them apart). That's another story - I'm dealing with it by listening for fullscreenchange event and checking isFullscreen() state of the player (fullscreenchange event triggers on opening but on closing of the fullscreen as well), if it's in fullscreen then I'm calling exitFullscreen() function. Just like this:
videojs("my-video",{controlBar: {fullscreenToggle: false}}).ready(function(){
let myPlayer = this;
myPlayer.on("fullscreenchange", function(){
if(myPlayer.isFullscreen()){
myPlayer.exitFullscreen();
}
});
});
Add class to video as below
.vjs-nofull .vjs-fullscreen-control {
display:none;
}
to
<video class="video-js vjs-default-skin vjs-nofull" ....></video>
Hope it works
Looking through the video.js documentation, getting the child component named FullscreenToggle is a pretty involved process. For me, only myPlayer.children()[5].children()[7] did the trick, where myPlayer is defined here:
videojs("lodestar_video").ready(function(){
myPlayer = this;
});
However, calling .disable() and .disposed() didn't work and returned undefined.
What worked for me was a CSS solution: making sure it doesn't appear using display:none and then setting the appropriate margin so the volume control doesn't go out of place.
.vjs-fullscreen-control {
display: none;
}
.vjs-default-skin .vjs-volume-control {
margin-right: 20px;
}
The downside of this is the small overhead since the fullscreen button is still created and loaded, only not displayed, but this should be near-negligible in the light of loading an entire video.
In 7.5.0 you can use this to hide the full-screen button and disable double-click
videojs("my-player", {
controlBar: {
fullscreenToggle: false
},
userActions: {
doubleClick: false
}
});
In Javascript/jQuery, how can I detect if the client device has a mouse?
I've got a site that slides up a little info panel when the user hovers their mouse over an item. I'm using jQuery.hoverIntent to detect the hover, but this obviously doesn't work on touchscreen devices like iPhone/iPad/Android. So on those devices I'd like to revert to tap to show the info panel.
var isTouchDevice = 'ontouchstart' in document.documentElement;
Note: Just because a device supports touch events doesn't necessarily mean that it is exclusively a touch screen device. Many devices (such as my Asus Zenbook) support both click and touch events, even when they doen't have any actual touch input mechanisms. When designing for touch support, always include click event support and never assume any device is exclusively one or the other.
Found testing for window.Touch didn't work on android but this does:
function is_touch_device() {
return !!('ontouchstart' in window);
}
See article: What's the best way to detect a 'touch screen' device using JavaScript?
+1 for doing hover and click both. One other way could be using CSS media queries and using some styles only for smaller screens / mobile devices, which are the ones most likely to have touch / tap functionality. So if you have some specific styles via CSS, and from jQuery you check those elements for the mobile device style properties you could hook into them to write you mobile specific code.
See here: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
isTouch = true;
} else {
isTouch = false;
}
Works every where !!
return (('ontouchstart' in window)
|| (navigator.maxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
Reason for using maxTouchPoints alongwith msMaxTouchPoints:
Microsoft has stated that starting with Internet Explorer 11,
Microsoft vendor prefixed version of this property (msMaxTouchPoints)
may be removed and recommends using maxTouchPoints instead.
Source : http://ctrlq.org/code/19616-detect-touch-screen-javascript
I use:
if(jQuery.support.touch){
alert('Touch enabled');
}
in jQuery mobile 1.0.1
Google Chrome seems to return false positives on this one:
var isTouch = 'ontouchstart' in document.documentElement;
I suppose it has something to do with its ability to "emulate touch events" (F12 -> settings at lower right corner -> "overrides" tab -> last checkbox). I know it's turned off by default but that's what I connect the change in results with (the "in" method used to work in Chrome).
However, this seems to be working, as far as I have tested:
var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
All browsers I've run that code on state the typeof is "object" but I feel more certain knowing that it's whatever but undefined :-)
Tested on IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome for iPad 21.0.1180.80 and iPad Safari. It would be cool if someone made some more tests and shared the results.
Wrote this for one of my sites and probably is the most foolproof solution. Especially since even Modernizr can get false positives on touch detection.
If you're using jQuery
$(window).one({
mouseover : function(){
Modernizr.touch = false; // Add this line if you have Modernizr
$('html').removeClass('touch').addClass('mouse');
}
});
or just pure JS...
window.onmouseover = function(){
window.onmouseover = null;
document.getElementsByTagName("html")[0].className += " mouse";
}
For my first post/comment:
We all know that 'touchstart' is triggered before click.
We also know that when user open your page he or she will:
1) move the mouse
2) click
3) touch the screen (for scrolling, or ... :) )
Let's try something :
//--> Start: jQuery
var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';
//attach a once called event handler to window
$(window).one('touchstart mousemove click',function(e){
if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
isTouchDevice = 'yes';
});
//<-- End: jQuery
Have a nice day!
I have tested following code mentioned above in the discussion
function is_touch_device() {
return !!('ontouchstart' in window);
}
works on android Mozilla, chrome, Opera, android default browser and safari on iphone...
all positive ...
seems solid for me :)
A helpful blog post on the subject, linked to from within the Modernizr source for detecting touch events. Conclusion: it's not possible to reliably detect touchscreen devices from Javascript.
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
This works for me:
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
If you use Modernizr, it is very easy to use Modernizr.touch as mentioned earlier.
However, I prefer using a combination of Modernizr.touch and user agent testing, just to be safe.
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));
if (isTouchDevice) {
//Do something touchy
} else {
//Can't touch this
}
If you don't use Modernizr, you can simply replace the Modernizr.touch function above with ('ontouchstart' in document.documentElement)
Also note that testing the user agent iemobile will give you broader range of detected Microsoft mobile devices than Windows Phone.
Also see this SO question
In jQuery Mobile you can simply do:
$.support.touch
Don't know why this is so undocumented.. but it is crossbrowser safe (latest 2 versions of current browsers).
As already mentioned, a device may support both mouse and touch input. Very often, the question is not "what is supported" but "what is currently used".
For this case, you can simply register mouse events (including the hover listener) and touch events alike.
element.addEventListener('touchstart',onTouchStartCallback,false);
element.addEventListener('onmousedown',onMouseDownCallback,false);
...
JavaScript should automatically call the correct listener based on user input. So, in case of a touch event, onTouchStartCallback will be fired, emulating your hover code.
Note that a touch may fire both kinds of listeners, touch and mouse. However, the touch listener goes first and can prevent subsequent mouse listeners from firing by calling event.preventDefault().
function onTouchStartCallback(ev) {
// Call preventDefault() to prevent any further handling
ev.preventDefault();
your code...
}
Further reading here.
For iPad development I am using:
if (window.Touch)
{
alert("touchy touchy");
}
else
{
alert("no touchy touchy");
}
I can then selectively bind to the touch based events (eg ontouchstart) or mouse based events (eg onmousedown). I haven't yet tested on android.