javascript – Learn how to dynamically change background shade of ios statusbar inside webapp

October 25, 2022

1

var physique = doc.querySelector( 'physique' );
var one = doc.getElementById( 'one' );
var three = doc.getElementById( 'three' );

operate colorBackground() {
  physique.type.backgroundColor="#0bb";
}
operate removeBackground() {
  physique.type.backgroundColor="#eee";
}

one
  .addEventListener( 'mouseover', colorBackground );

one
  .addEventListener( 'mouseout', removeBackground );

three
  .addEventListener( 'mouseover', colorBackground );

three
  .addEventListener( 'mouseout', removeBackground );

html, physique, nav, div {
  margin: 0;
  top: 100%; width: 100%;
}
html, div {
  font-family: Arial;
  background-color: #eee; shade: #444;
  user-select: none;
}
physique {
  filter: brightness( 103.75% );
  font-size:1.5rem;
}
nav, div {
  show: flex; flex-direction: column;
}
div {
  define: 1px stable #ddd; cursor: pointer;
}
div:hover {
  background-color: #0bb; shade: #eee;
}
div:energetic {
  filter: brightness( 0% );
}
p {
  margin: auto; text-transform: uppercase;
}
@media( orientation: panorama ) {
  nav, div {
    flex-direction: row;
  }
}

<!DOCTYPE html>
<html lang='us-EN' ontouchstart>
  <head>
    <meta charset="UTF-8">
    <meta 
      title="viewport"
      content material="width=device-width, initial-scale=1.0"
    >
    <hyperlink rel="stylesheet" href="https://stackoverflow.com/questions/74197660/css/base.css">
    <title>trifold</title>
  </head>
  <physique class="preload">
    <nav>
      <div id='one'>
        <p>one</p>
      </div>
      <div id='two'>
        <p>two</p>
      </div>
      <div id='three'>
        <p>three</p>
      </div>
    </nav>
    <script src="js/origin.js"></script>
  </physique>
</html>

When “one” or “three” is tapped/hovered the physique background shade modifications to match. When the buttons are scaled smaller it is simpler to see what’s occurring like on this snippet beneath ( hover over ‘one’ or ‘three’ and spot the background change ):

var physique = doc.querySelector( 'physique' );
var one = doc.getElementById( 'one' );
var three = doc.getElementById( 'three' );

operate colorBackground() {
  physique.type.backgroundColor="#0bb";
}
operate removeBackground() {
  physique.type.backgroundColor="#eee";
}

one
  .addEventListener( 'mouseover', colorBackground );

one
  .addEventListener( 'mouseout', removeBackground );

three
  .addEventListener( 'mouseover', colorBackground );

three
  .addEventListener( 'mouseout', removeBackground );

html, physique, nav, div {
  margin: 0;
  top: 100%; width: 100%;
}
html, div {
  font-family: Arial;
  background-color: #eee; shade: #444;
  user-select: none;
}
physique {
  filter: brightness( 103.75% );
  font-size:1.5rem;
}
nav, div {
  show: flex; flex-direction: column; rework: scale( 0.9 ); /*added rework*/
}
div {
  define: 1px stable #ddd; cursor: pointer;
}
div:hover {
  background-color: #0bb; shade: #eee;
}
div:energetic {
  filter: brightness( 0% );
}
p {
  margin: auto; text-transform: uppercase;
}
@media( orientation: panorama ) {
  nav, div {
    flex-direction: row;
  }
}

<!DOCTYPE html>
<html lang='us-EN' ontouchstart>
  <head>
    <meta charset="UTF-8">
    <meta 
      title="viewport"
      content material="width=device-width, initial-scale=1.0"
    >
    <hyperlink rel="stylesheet" href="https://stackoverflow.com/questions/74197660/css/base.css">
    <title>trifold</title>
  </head>
  <physique class="preload">
    <nav>
      <div id='one'>
        <p>one</p>
      </div>
      <div id='two'>
        <p>two</p>
      </div>
      <div id='three'>
        <p>three</p>
      </div>
    </nav>
    <script src="js/origin.js"></script>
  </physique>
</html>

This downside is just obvious on cell. Particularly IOS on iphone.

https://imgur.com/q6PRgaV < click on to view display recording of iphone gif

Utilizing javaScript I am forcing the web sites background shade to alter.

one
  .addEventListener( 'mouseover', colorBackground );

one
  .addEventListener( 'mouseout', removeBackground );

Nonetheless the ios statusbar ( the very prime of the gif with the battery and name sign icons ) stays the unique #eee background shade when the ‘one’ button is tapped.

Right here is the stay web site for cell viewing that may be accessed from iphone:
https://user-railcoil.github.io/

Much more bizarre the colour of the statusbar background does change on IOS however solely after a button is hovered and the cellphone is rotated into panorama mode after.

Goal: Is there a solution to pressure the standing bar shade on iPhone to replace with the remainder of the background utilizing vanilla JS?

Supply hyperlink