JavaScript allows for the hiding of the Android navigation bar on web apps in Chrome, which includes the virtual back, home screen, and other buttons

In the process of developing a web application, I am aiming to provide users with a fully immersive fullscreen experience. This entails hiding not only the Chrome address bar at the top but also the navigation bar at the bottom (which includes virtual back, home, and multitask buttons) for Android devices.

While exploring resources such as the Fullscreen API, article on fullscreen experiences, and screenfull.js library, it has become apparent that these solutions focus on hiding the Chrome address bar rather than the navigation bar at the bottom. However, some browsers like Opera do support hiding the navigation bar. My testing on Xiaomi Mi A2 and Galaxy S8 confirms this behavior.

I believe there is a way to achieve this desired functionality, especially considering that platforms like YouTube and PornHub are able to completely hide this menu when in fullscreen mode, most notably for video elements.

javascriptandroidweb-applicationsfullscreen

Answer №1

Sorry for being a little late to the game, but I hope this information is still useful.

The Fullscreen API's requestFullscreen() method allows for an optional options object to be passed in.

document.documentElement.requestFullscreen({ navigationUI: 'hide' });

Give this a try and see if it works for you.

Answer №2

Implement a webmanifest file. Insert the following code in a new document:

{
   "display": "fullscreen"
}

Next, include this line in the head section of your HTML:

<link rel="manifest" href="/manifest.webmanifest">

Visit this resource for additional techniques: https://developer.mozilla.org/en-US/docs/Web/Manifest

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing a variable with Functions and Objects

I'm curious to know what the index variable returns in this code snippet. I believe it will be 0. function jsTest() { var index = 0; var counter = 0; var obj = {}; obj.index = index; var func = function () { for (index ...

javascript

Building custom directives on AngularJS pages without a specified ng-app module

On some of my basic pages, I don't need to specify a particular application module in the ng-app attribute. However, these pages do utilize some custom directives that I have created. To keep things organized, I have placed all of my directives withi ...

javascriptangularjsdependency-injectionangularjs-directive

How can I assign a reference to a List component using react-virtualized?

Could someone help me with referencing the scrollable List in react-virtualized using a ref? I'm having trouble as my ref keeps showing its current attribute as undefined. Any tips on how to properly use a ref with react-virtualized List? This is wha ...

javascriptreactjsanimationreact-virtualizedrefs

Sending files through ajax with php

Hey there! I've been working on uploading files using Ajax and PHP, following a tutorial. Here's the code I have so far: upload.js: var handleUpload = function (event){ event.preventDefault(); event.stopPropagation(); var fileInput= document.ge ...

javascriptphpajax

What is the process of invoking a PHP webservice from a PHONEGAP Android application?

I attempted to follow this link but couldn't find clear instructions. I have set up a Phonegap project based on the guidelines provided here. How do I make an ajax call to a PHP page on my localhost? Can you please outline the folder structure for ...

phpandroidajaxcordova

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

javascriptjquerycss

Puzzled on how to include a string in the parameter for a GET request?

Following the initial instruction to make a get request for a turtles route and send a JS object of turtles with their colors, I successfully implemented it like this: app.get('/turtles', function(req, res) { data = { Raphael: "Red", Le ...

javascriptnode.js

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

How to pass a prop from Nuxt.js to a component's inner element

I've created a basic component: <template> <div id="search__index_search-form"> <input :bar-id="barId" @keyup.enter="findBars()" type="text" :value="keyword" @input="updateKeyword" placeholder="Search for a b ...

javascriptvue.jsvuejs2nuxt.js

Guidelines on launching an ionic 4 modal using routes

How can I open a modal using routes? I attempted the following approach, but it did not work as expected: ngOnInit() { this.launchModal(); } async launchModal() { const modal = await this.modalController.create({ component: AuthPasswordR ...

javascriptangularionic4

Ways to showcase the chosen image from the input field?

Can someone help me with an issue I'm having regarding displaying selected images? Every time I try, I encounter this error message: Not allowed to load local resource: Any suggestions or insights into why this might be happening? <input type=&a ...

javascripthtmljqueryimage

Copy the content of one input field into another field at the same time

I have encountered an issue that seems simple, yet the proposed solutions have not been effective. Most suggestions involve using jQuery, but Bootstrap 5 has shifted away from jQuery. I am looking for a solution using JavaScript or HTML only. The problem ...

javascripthtmlbootstrap-5

Error: The expression `xmlDoc.load` returns a value of undefined, which is not an object

My current challenge involves loading an XML file using Javascript in IE, Firefox, and Safari. I have yet to find a function that works well across all three browsers. The load function I am currently using is similar to the one found in w3schools tutorial ...

javascriptxmlajax

Exporting JSON data to CSV or XLS does not result in a saved file when using Internet Explorer

Presented below is the service I offer: angular.module('LBTable').service('exportTable', function () { function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, fileName) { //If JSONData isn't an object, parse the ...

javascriptjsonexport

Using jQuery.ajax to manage caching and manipulating timestamps

Currently, I am utilizing the jquery.ajax techniques to transmit GET-requests to the server, with caching disabled by setting cache to false. Everything seems to be working fine so far. It appears that jQuery automatically includes a timestamp (likely epo ...

javascriptjqueryajaxcaching

Capturing rawX and rawY coordinates within an Android ScrollView

I am attempting to capture every touch event on the screen while a user scrolls through a ScrollView in order to log the rawX, rawY, pressure, orientation, and major and minor axis of the touch point. Currently, I can only access the ACTION_DOWN event by u ...

androideventsscrollscrollviewmotionevent

What is the proper location to insert CSS within Laravel?

What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...

javascriptphpcsslaravel

PhpStorm alerts users to potential issues with Object methods within Vue components when TypeScript is being utilized

When building Vue components with TypeScript (using the lang="ts" attribute in the script tag), there is a warning in PhpStorm (version 2021.2.2) that flags any methods from the native JavaScript Object as "Unresolved function or method". For exa ...

javascripttypescriptvue.jsphpstormwebstorm

Is it possible to view the code within the .js files located in the api directory of NextJS using web browsers?

Is it possible to view the code of ".js files" in the "api folder" of NextJS using browsers? I came across a post on Stack Overflow where someone asked if Next.js API is back-end, and one of the answers stated: The back-end or server-side of Next.js res ...

javascriptnode.jsreactjsbrowsernext.js

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

javascriptcssmedia-queries