I'm attempting to produce kind of like a Fullscreen experience while on landscape mode but nothing seems to work so far. I got a video that fakes going fullscreen mode as I have my own controls, unfortunately iOS doesn't support entering fullscreen on nothing except HTML5 <video> tags, so since I'm forced to use Fullscreen API and can't control those native buttons' visibility while on fullscreen state, I need to do something else which is faking it.
I want to produce the same effect as when going to "Aa button" on Search Bar > Hide Toolbar. It collapses everything and shows almost the entire screen space.
I tried going the CSS way or the window.scrollTo(0, 1) trick. Not working in my case as I have a fixed non-scrollable container holding the video and occupying the entire screen.
Also tried with this and many other codepens & jsfiddles on my Safari, none worked.
/*!
Intelligent auto-scrolling to hide the mobile device address bar
Optic Swerve, opticswerve.com
Documented at http://menacingcloud.com/?c=iPhoneAddressBar
*/
var bodyTag;
var executionTime = new Date().getTime(); // JavaScript execution time
// Document ready
//----------------
documentReady(function() {
// Don't hide address bar after a distracting amount of time
var readyTime = new Date().getTime()
if((readyTime - executionTime) < 3000) hideAddressBar(true);
});
// Run specified function when document is ready (HTML5)
//------------------------------------------------------
function documentReady(readyFunction) {
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
readyFunction();
}, false);
}
// Hide address bar on devices like the iPhone
//---------------------------------------------
function hideAddressBar(bPad) {
// Big screen. Fixed chrome likely.
if(screen.width > 980 || screen.height > 980) return;
// Standalone (full screen webapp) mode
if(window.navigator.standalone === true) return;
// Page zoom or vertical scrollbars
if(window.innerWidth !== document.documentElement.clientWidth) {
// Sometimes one pixel too much. Compensate.
if((window.innerWidth - 1) !== document.documentElement.clientWidth) return;
}
// Pad content if necessary.
if(bPad === true && (document.documentElement.scrollHeight <= document.documentElement.clientHeight)) {
// Extend body height to overflow and cause scrolling
bodyTag = document.getElementsByTagName('body')[0];
// Viewport height at fullscreen
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
setTimeout(function() {
// Already scrolled?
if(window.pageYOffset !== 0) return;
// Perform autoscroll
window.scrollTo(0, 1);
// Reset body height and scroll
if(bodyTag !== undefined) bodyTag.style.height = window.innerHeight + 'px';
window.scrollTo(0, 0);
}, 1000);
}
// Quick address bar hide on devices like the iPhone
//---------------------------------------------------
function quickHideAddressBar() {
setTimeout(function() {
if(window.pageYOffset !== 0) return;
window.scrollTo(0, window.pageYOffset + 1);
}, 1000);
}
Any clue on how to produce this "fullscreen landscape" effect on mobile browser (Safari/Chrome) ?
I'm in the process of updating our site to use modern browsers, but I still need to support the cavemen on IE7. I'm experiencing an issue with jQuery UI's position utility. The strange behavior occurs for the Windows 7 OS, using IE 11, emulating IE7 (document mode 7). The strange behavior is nonexistent to me, Windows 8 OS, using IE 11, emulating IE7 (document mode 7).
I need someone to see if this happens to them using either IE7 (not emulated) or with the same setup as our testers experiencing the issue.
The issue occurs when you hover over the missing image element in the upper right of the div. The unordered list shows up once on hover, then any subsequent hovers nothing appears. Either that or the hover never brings up the unordered list to begin with.
Here's a fiddle where the issue should appear if you have a similar work space to what I've mentioned above.
https://jsfiddle.net/bpdxL1e6/
var hoverCollection = $('.current-menu-item');
$.each(hoverCollection, function(index, object) {
$(object).hover(function() {
$(object.lastChild).position({
my: "right top",
at: "bottom right",
of: object.parentElement,
collision: "flipfit"
});
});
});
Its hard to tell the position utility is working at all in jsFiddle, as the purpose of it is mainly to keep the unordered list visible in the viewport on hover.
I have a local html doc on my desktop with the contents of the fiddle to see the effects of the position working.
Here's a link to a download of the full html file.
http://www.filedropper.com/testhtmlfiddle
I just wrote my own positioning utility. Its called hoverCopter. Supports IE7 as well as all other modern browsers.
var hoverCollection = $('.current-menu-item');
var hoveringCollection = [];
$.each(hoverCollection, function(idx, object) {
hoveringCollection.push(object.lastChild);
});
hoverCopter(hoverCollection, hoveringCollection);
function hoverCopter(objectsToTriggerHover, objectsToHover) {
$.each(objectsToTriggerHover, function(idx, object) {
$(object).hover(function() {
var bool = true;
var objWidth = $(object).offset().left + $(objectsToHover[idx]).width();
var winWidth = $(window).width() + $(window).scrollLeft();
var objHeight = $(object).offset().top + $(objectsToHover[idx]).height();
var winHeight = $(window).height() + $(window).scrollTop();
if (objWidth > winWidth) {
var left = (objWidth - $(object).width() / 2) - winWidth + (winWidth - $(object).offset().left);
$(objectsToHover[idx]).css({
'left': -left + 'px'
});
} else {
$(objectsToHover[idx]).css({
'left': 0 + 'px'
});
}
if (objHeight > winHeight) {
var top = (objHeight - $(object).height() / 2) - winHeight + (winHeight - $(object).offset().top);
$(objectsToHover[idx]).css({
'top': -top + 'px'
});
bool = false;
} else {
$(objectsToHover[idx]).css({
'top': 0 + 'px'
});
}
// this is a zIndex hack for IE7 so that the ul display above the images
var elements = $('[name="homepart_nav_wrap"]');
var int = 100;
$.each(elements, function(idx, object) {
if (bool == false) {
$(object).css("zIndex", idx);
} else {
$(object).css("zIndex", int);
}
int--;
});
});
});
}
And here's a jsFiddle. https://jsfiddle.net/bpdxL1e6/3/
I'm having issues setting scrollTop cross browser. I did a search which said to use the solution below.
I've currently got:
var body = document.documentElement || document.body;
body.scrollTop = 200;
this works in IE, not chrome
if I switch it round:
var body = document.body || document.documentElement;
body.scrollTop = 200;
it works in chrome, not IE
how to fix this?
There are some interoperability issues and incompatibilities in this area. In order to avoid user agent sniffing (and to ease migration to the standard API, where document.documentElement.scrollTop controls the viewport, rather than document.body.scrollTop), a new API was implemented in modern browsers.
Basically, have a function for scrolling that does this -
function scrollViewport(top, left)
{
var eViewport = document.scrollingElement
if (eViewport)
{
if (typeof top !== "undefined")
{
eViewport.scrollTop = top;
}
if (typeof left !== "undefined")
{
eViewport.scrollLeft = left;
}
}
else
{
// Do your current checks or set the scrollLeft and scrollTop
// properties of both of documentElement and body, or user agent
// sniffing, if you must.
// Example -
// var scrollTop = 200;
// Chrome, Internet Explorer and Firefox, I think.
// document.documentElement.scrollTop = scrollTop;
// Safari, at least up to version 11, I think.
// document.body.scrollTop = scrollTop;
// Or just (I am not sure I recommend this)...
// window.scrollTo(0, scrollTop);
}
}
Read the Opera article for more information.
Use
var body = document.documentElement;
body.scrollTop = 200;
It should be cross browser, unless you've done something wrong, like missing the html-tag or something like that.
Reference
I currently have this piece of code:
canvas.onmousewheel = scroll;
function scroll(event) {
event.preventDefault();
var mousex = event.clientX - canvas.offsetLeft;
var mousey = event.clientY - canvas.offsetTop;
var wheel = parseInt(event.wheelDelta, 10) / 120; //n or -n
var zoom = 1 + wheel / 2;
[... do some action on canvas ...]
};
Sadly, this doesn't work in Firefox. According to MDN:
Gecko doesn't have a plan to implement this event due to legacy event
type and non-standard.
How can I get my code work for Chrome and Firefox?
edit: The full code is here (one file, about 550 LOC)
You can try the following link
From the page:
onmousewheel event and Firefox's equivalent
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)
I faced this problem and I wrote code to use different events depending on the browser. Certainly jQuery or other frameworks would do it easily, but I am a Vanilla Javascript programmer.
For chrome: onmousewheel and document.body.scrollTop works.
For firefox: onscroll and event.pageY do the same.
if( Browser.chrome){
window.onmousewheel=function(e){
if( document.body.scrollTop > 60){
/* code to run on scrolled window */
} else {
/* code to run when on top */
}
};
} else {
window.onscroll=function(e){
if(e.pageY > 60){
/* code to run on scrolled window */
} else {
/* code to run when on top */
}
};
}
Browsers library available at http://software.sitesbr.net/utils/
Is it possible to detect change in orientation of the browser on the iPad or Galaxy Tab using javascript? I think it's possible using css media queries.
NOTE: orientationChange is deprecated
Instead use screen.orientation using the screenOrientation interface
var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
if (orientation === "landscape-primary") {
console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
console.log("The orientation API isn't supported in this browser :(");
}
However note the support as of July 2022
The screen.orientation is not supported by Safari at all
Older answers
The older orientationChange should still work for Safari
window.addEventListener("orientationchange", function() {
alert(window.orientation);
}, false);
MDN:
window.addEventListener("orientationchange", function() {
alert("the orientation of the device is now " + screen.orientation.angle);
});
or jQuery mobile orientationchange
$(window).on("orientationchange", function( event ) {
$("#orientation").text( "This device is in " + event.orientation + " mode!");
});
Older answer
http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
Safari on the iPad does support the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As reminder of this functionality:
window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)
There is also the orientationchange event that fires on the window object when the device is rotated.
You can also use CSS media queries to determine if the iPad is being held in vertical or horizontal orientation, such as:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
<script type="text/javascript">
var updateLayout = function() {
if (window.innerWidth != currentWidth) {
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
window.scrollTo(0, 1);
}
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>
You can use mediaMatch to evaluate CSS media queries, e.g.
window
.matchMedia('(orientation: portrait)')
.addListener(function (m) {
if (m.matches) {
// portrait
} else {
// landscape
}
});
CSS media query fires before the orientationchange. If you are looking to capture the end of the event (when the rotation has been completed), see mobile viewport height after orientation change.
In 2022, instead of adding a window orientationchange listener (listener not recommended due to deprecation) you should listen for a screen.orientation change event:
if (screen.orientation) { // Property doesn't exist on screen in IE11
screen.orientation.addEventListener("change", callback);
}
All browsers except IE and Safari now support it. (here is a screenshot of screen from IE11:
... notice that orientation is not a supported attribute of screen in IE11)
The Screen Orientation API is thoroughly documented. The main focus is the ScreenOrientation interface, which extends Screen. Here are 2 screenshots of the orientation attribute of Screen, which shows how the angle changes from 0 (portrait) to 90 (landscape) on an Android device:
You can use the orientationchange event like so:
window.addEventListener('orientationchange', function(event) {
/* update layout per new orientation */
});
I realized that nobody mentioned what happens when the device is held upside-down in this thread.
window.orientation returns -90 or 90 when held horizontal. It returns 0 or 180 when held vertical. Some devices do and some don't support being held upside-down. I recommend,
window.addEventListener("orientationchange", function() {
if ( window.orientation == 0 || window.orientation == 180) {
// WHEN IN PORTRAIT MODE
} else {
// WHEN IN LANDSCAPE MODE
}
}, false);
Also note that window.orientation returns undefined on desktops.
From "Cross-device, cross-browser portrait-landscape detection"
This is about finding out whether a mobile device is in portrait or landscape mode; you don't need to care about its orientation. For all you know, if you hold your iPad upside down, it's in portrait mode.
$(window).bind("resize", function(){
screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});
90 means landscape, 0 means portrait, cross browser, cross device.
The window.onresize event is available everywhere, and it's always fired at the right time; never too early, never too late. As a matter of fact, the size of the screen is always accurate as well.
The JavaScript version would be this, correct me please if I am wrong.
function getScreenOrientation() {
screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
console.log("screenOrientation = " + screenOrientation);
}
window.addEventListener("resize", function(event) {
getScreenOrientation();
});
getScreenOrientation();
window.orientation is what you're looking for. there's also an onOrientationChange event
works for android, iphone and, i'm mostly sure, for ipad
Adding to the #mplungjan answer, I found better results using the webkit "native" (I don't really how to called it) event, 'deviceorientation'.
In the Mozilla Developer network they have a good explanation about how to normalize between webkit and Gecko that helped me to solve this problem.
An easy to use snippet :
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
// alert('landscape');
$('#portrait').css({display:'none'});
$('#landscape').css({display:'block'});
break;
default:
// alert('portrait');
$('#portrait').css({display:'block'});
$('#landscape').css({display:'none'});
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// First launch
doOnOrientationChange();
orientationChange is deprecated and also not supported in some browsers,
innerHeight and outerHeight sometimes give inconsistent results in ios
so we can use document.documentElement to check orientation along with resize event
const { clientWidth, clientHeight } = document.documentElement;
if (clientHeight > clientWidth) {
setOrientation("portrait-secondary");
} else {
setOrientation("landscape-primary");
}
As of 2022
Once you get ready like this,
let theDeviceIsRotated;
function handlePortraitOrLandscape() {
setTimeout(afterAnUnnoticableDelay,100); // This solves the wrong-firing-order issue on Samsung Browser.
function afterAnUnnoticableDelay() {
if (screen.orientation) { // Mainly for Android (as of 2022)
// Returns 0 or 90 or 270 or 180
if (screen.orientation.angle == 0) { theDeviceIsRotated="no"; }
if (screen.orientation.angle == 90) { theDeviceIsRotated="toTheLeft"; }
if (screen.orientation.angle == 270) { theDeviceIsRotated="toTheRight"; }
if (screen.orientation.angle == 180) { theDeviceIsRotated="upsideDown"; }
} else { // Mainly for iOS (as of 2022)
// Returns 0 or 90 or -90 or 180
if (window.orientation == 0) { theDeviceIsRotated="no"; }
if (window.orientation == 90) { theDeviceIsRotated="toTheLeft"; }
if (window.orientation == -90) { theDeviceIsRotated="toTheRight"; }
if (window.orientation == 180) { theDeviceIsRotated="upsideDown"; }
}
}
}
handlePortraitOrLandscape(); // Set for the first time
window.addEventListener("resize",handlePortraitOrLandscape); // Update when change happens
you can
if (theDeviceIsRotated == "no") {
// Do your thing
} else if (theDeviceIsRotated == "toTheLeft") {
// Do your thing
} else if (theDeviceIsRotated == "toTheRight") {
// Do your thing
} else if (theDeviceIsRotated == "upsideDown") {
// Do your thing
} else {
// The mysterious 5th orientation nobody has ever seen yet
}
but note that
RESIZE does not fire when switching from 90 to 270 directly (without triggering a portrait view in between)
THEREFORE WE CANNOT RELY ON
window.addEventListener("resize",screenOrientationHasChanged);
AND THERE IS THE EXACT SAME PROBLEM WITH
window.screen.orientation.addEventListener('change',screenOrientationHasChanged);
ALSO WITH
window.addEventListener("orientationchange",screenOrientationHasChanged);
THIS SADLY MEANS THAT AS OF 2022 THERE IS NO RELIABLE WAY TO DETECT SCREEN ORIENTATION CHANGE even by using setInterval
BECAUSE neither screen.orientation.angle nor screen.orientation.type is updated when you go from 90 to 270 without triggering a portrait view in between.
So the following is not any better than resize on mobile devices
if (screen.orientation) {
window.screen.orientation.addEventListener('change',screenOrientationHasChanged); // https://whatwebcando.today/screen-orientation.html
} else {
window.addEventListener("orientationchange",screenOrientationHasChanged); // https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event
}
You may try to lock the screen orientation to avoid errors but that does not work on iOS as of 2022 and it only works with fullscreen mode on Android.