TLDR;
I can detect if the browser has gone to full screen through the full screen API but I cannot detect that the browser has gone to full screen through f11 or the browser menu (specifically chrome).
Original:
Currently I am using screenfull to go to full screen and detect that the browser is in full screen. The problem is that I do not want to display my full screen toggle button when the browser has gone to full screen through a browser function (i.e. f11 or full screen through the browser menus). This is because the javascript full screen API does not seem to be able to detect that you are in full screen or get you out of full screen when you have gone there through a browser function. I could just detect if f11 was hit, but this doesn't work on mac or when full screen has been initiated through the browser menus.
Any ideas on how to detect if full screen was initiated through a browser function? I'm only targeting webgl compatible browsers so that cuts down on a lot of gotchas.
I haven't tested this for reliability but this is my take.
//without jQuery
window.addEventListener('resize', function(){
if(screen.width === window.innerWidth){
// this is full screen
}
});
//with jQuery
$(document).ready(function() {
$(window).on('resize', function(){
if(screen.width === window.innerWidth){
// this is full screen
}
});
});
This seems to work when pressing the F11 button and other methods, so it should catch the edge cases that the full screen api does not. Although I'm not sure the comparison of screen.width vs. window.innerWidth is a reliable way to check for full screen. Maybe someone else can add to/critique this.
Use fullscreenchange event to detect a fullscreen change event, or if you don't want to handle vendor prefixes than you can also listen to the resize event (the window resize event that also triggers when fullscreen is entered or exited) and then check if document.fullscreenElement is not null to determine if fullscreen mode is on. You'll need to vendor prefix fullscreenElement accordingly. I would use something like this:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx has a good example for this which I quote below. They have used the fullscreenChange event, but you could listen for the "resize" event
document.addEventListener("fullscreenChange", function () {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
After trying a lot of approaches across different browsers and devices, the following solution worked for me reliably.
window.addEventListener("resize", () => {
setTimeout(() => {
const windowWidth = window.innerWidth * window.devicePixelRatio;
const windowHeight = window.innerHeight * window.devicePixelRatio;
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
console.log(windowWidth/screenWidth);
console.log(windowHeight/screenHeight);
if (((windowWidth/screenWidth)>=0.95) && ((windowHeight/screenHeight)>=0.95)) {
console.log("Fullscreen");
}
else {
console.log("Not Fullscreen");
}
}, 100);
})
Related
How do I turn Javascript off when my page is viewed on mobiles?
I need a sort of media query that will disable all javascript on a page when viewed on a specific device.
So far I have this but do not know how to actually disable all javascript
if(screen.width < 480) {
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
Thanks
You could use matchMedia.js (found at https://github.com/paulirish/matchMedia.js) and check if the screen is below a certain size.
Eg.
if (matchMedia('(max-width: 480px)')) {
// Run Code Here
}
You can check the
navigator.userAgent
property with Javascript. This will show the used browser and you can determine if its mobile or not.
Documentation:
userAgent Docs
You can do it also width the viewport width of your users browser in pure Javascript:
var w = document.documentElement.clientWidth;
I have a site that opens a modal upon click that contains a form. I noticed on my iPad that when the soft keyboard is open it covers several fields of the form, and as I am near the bottom of the screen, I cannot scroll to reveal those hidden fields.
In researching this issue I came across this answer which includes code from this answer. However, neither of these answers seem to work when tested on iOS 8.3.
Here is what I would like to achieve:
Detect when the keyboard is opened.
Find the height of the keyboard.
Add padding to the bottom of the footer to accommodate the height of the keyboard.
When the keyboard is dismissed or closed, the padding is removed.
There are a few things to note:
If someone is using a connected keyboard (including bluetooth keyboards) don't do anything as the soft keyboard shouldn't appear
jQuery is okay to use.
A solution must run via client side code.
I prefer a solution that covers iOS and Android. Preferably, any device that can use a soft keyboard.
How could I achieve a solution that will increase the padding in my footer, that will work on the majority of devices, when someone is using a soft keyboard as a means of filling out a form in a modal?
I bumped into a problem similar to this not too long ago and I found a small solution to this, when a mobile or tablet is being used and a keyboard is activated it triggers a resize event of the screen so you could use that to trigger a function.
var lastHeight = $(window).height(); // store the intial height.
var lastWidth = $(window).width(); // store the intial width.
var keyboardIsOn = false;
$(window).resize(function () {
if ($("input").is(":focus")) {
keyboardIsOn =
((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
}
if(keyboardIsOn){
var keyboardHeight = lastHeight - $(window).height();
$("footer").css("padding", keyboardHeight+"px");
} else{
$("footer").removeAttr("style");
//or if you just want to remove the padding
//$("footer").css("padding", 0);
}
});
//An alternative solution is by checking if the height of the screen
//change on input/textarea focus.
$('input, textarea').focus(function() {
keyboardIsOn =
((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
if(keyboardIsOn){
var keyboardHeight = lastHeight - $(window).height();
$("footer").css("padding", keyboardHeight+"px");
} else{
$("footer").removeAttr("style");
//or if you just want to remove the padding
//$("footer").css("padding", 0);
}
});
I'm using Bootstrap Markdown on my site. In the demo here, when I enter fullscreen, my browser's scrollbar (Firefox) disappears. However, on my site this does not happen (the scrollbar sticks around). I am wondering how exactly the demo is accomplishing this.
I'm assume this is part of your browsers settings but if you want to accomplish it with javascript it is actually very simple
//Check for fullscreen
if ((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)){
document.body.style.overflowY = "hidden"
} else {
document.body.style.overflowY = "auto";
}
I used this Checking if browser is in fullscreen post to figure out how to determine if the window was fullscreen so you can refer to that for further information on that.
I need to be able to detect whether there are scrollbars (both vertical and horizontal) on a browser window. I've been using this code but it isn't working reliably in Firefox 5.
JFL.GetScrollbarState = function () {
var myWidth = 0;
var myHeight = 0;
if (document.documentElement && document.documentElement.clientWidth) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return ({
vScrollbar: document.body.scrollHeight > myHeight,
hScrollbar: document.body.scrollWidth > myWidth
});
}
Is there a better way to do this that will work cross browser. My browser targets are Firefox 4-5, Chrome, Safari 4+, Opera 10+.
If you're interested in why I need to know if there are scrollbars, it's because I have some spinning CSS3 transitions that (due to the nature of their spinning) may temporarily go beyond the edges of the current document size (thus making the document temporarily larger). If were no scrollbars initially present, the CSS3 transition may cause scrollbars to show up during the transition and then go away when the transition is finished, leading to an ugly scrollbar flash. If I know that there are no scrollbars present, I can temporarily add a class that will set overflow-x or overflow-y to hidden and thus prevent the scrollbar flash during the CSS3 transition. If scrollbars are already present, I don't have to do anything because they may move a little, but they won't go on/off during the transition.
Bonus points if one can actually tell not only if scrollbars would generally be required, but whether they are actually there or not.
After running into flicker problems with the scrolling version proposed by David in some browsers (Safari and IE), I've settled on this code that does not have the flicker problem:
function getScrollBarState() {
var result = {vScrollbar: true, hScrollbar: true};
try {
var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
result.vScrollbar = root.scrollHeight > root.clientHeight;
result.hScrollbar = root.scrollWidth > root.clientWidth;
} catch(e) {}
return(result);
}
It's a derivative of what I was using and the general technique was referenced in the post that fanfavorite posted. It seems to work in every browser I've tried even in IE6. For my purposes, I wanted any failure to return that there was a scrollbar so I've coded the failure condition that way.
Note: this code does not detect if a scrollbar has been forced on or off with CSS. This code detects if an auto-scrollbar is called for or not. If your page might have CSS settings that control the scrollbar, then you can get the CSS and check that first.
Have you taken a look at this other post? How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
It's actually pretty easy. This will work in every modern browser:
// try scrolling by 1 both vertically and horizontally
window.scrollTo(1,1);
// did we move vertically?
if (window.pageYOffset != 0) {
console.log("houston, we have vertical scrollbars");
}
// did we move horizontally?
if (window.pageXOffset != 0) {
console.log("houston, we have horizontal scrollbars");
}
// reset window to default scroll state
window.scrollTo(0,0);
Has anyone noticed this behavior? I'm trying to write a script that will trigger upon a resize. It works fine on normal browsers, works fine on iPhone, but on iPad, will only trigger going from horizontal to vertical viewport, not vice versa.
Here's the code:
$(window).resize( function() {
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iphone') != -1));
var is_ipad = ((agent.indexOf('ipad') != -1));
if(is_iphone || is_ipad){
location.reload(true);
} else {
/* Do stuff. */
};
});
If I understood you correctly, you want to do something when the user tilts the iPad. Here you go:
window.onorientationchange = function(){
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0){
// iPad is in Portrait mode.
}
else if (orientation === 90){
// iPad is in Landscape mode. The screen is turned to the left.
}
else if (orientation === -90){
// iPad is in Landscape mode. The screen is turned to the right.
}
}
I think what you want would be to use the iPad Orientation CSS, which looks like this:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
Also, the orientationchange event fires when the orientation is changed, according to iPad web development tips.
Together, that should give you tools enough to deal with the change.
This includes all orientations.
Here are two options:
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
or
// Checks to see if the platform is strictly equal to iPad:
if(navigator.platform === 'iPad') {
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
}
The only thing I could find from apple:
Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.
I understand the "works on the iPhone" part...but maybe it doesn't anymore? This could be a change in OS/mobile Safari since the latest public iPhone OS release shipped (the above documentation is from March 2010).
I'm going to re-tag this question adding iPhone to it, maybe one of the guys with the developer 4.0 OS release can test this? If it is the case it's been removed, this should be a bug filed/fixed before it goes live...I'm not sure on how the procedures are on this with Apple are though.
You want this fix for the orientation bug on iphone and ipad.
read about it here:
http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
github newest version here:
https://gist.github.com/901295
use the second version on the page.
Check your version of iOS.
The "orientationchange" event does not work in iOS 3.*, but it does in 4.*
do a nice check if your platform is iPad,
handle the iOS specific event orientationchange by catching window.onorientationchange
if(navigator.platform == 'iPad') {
window.onorientationchange = function() {
// handle orientationchange event
// (here you can take advantage of the orientation property
// - see the good answer above by Vincent)
}
}