Author: John Au-Yeung

Sometimes, we want to hide a mobile browser’s address bar with JavaScript.

In this article, we’ll look at how to hide a mobile browser’s address bar with JavaScript.

How to hide a mobile browser’s address bar with JavaScript?

To hide a mobile browser’s address bar with JavaScript, we scroll down the page slightly.

For instance, we write

window.addEventListener("load", () => {
  setTimeout(() => {
    window.scrollTo(0, 1);
  }, 0);
});

to scroll down the page when it’s loaded.

We listen to the load event with addEventListener.

Then we call window.scrollTo to scroll down the page by 1 pixel in the setTimeout callback when the load event is triggered when the page is loaded to hide the address bar.

Conclusion

To hide a mobile browser’s address bar with JavaScript, we scroll down the page slightly.

Sometimes, we want to show or hide controls programmatically in a HTML5 video with JavaScript.

In this article, we’ll look at how to show or hide controls programmatically in a HTML5 video with JavaScript.

How to show or hide controls programmatically in a HTML5 video with JavaScript?

To show or hide controls programmatically in a HTML5 video with JavaScript, we can add or remove the controls attribute programmatically.

For instance, we write

<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

to add the video and p element.

Then we write

const video = document.getElementById("myvideo");

function toggleControls() {
  if (video.hasAttribute("controls")) {
    video.removeAttribute("controls");
  } else {
    video.setAttribute("controls", "controls");
  }
}

to select the video element with getElementById.

When we click on the p element, toggleControls is called.

In it, we check if the controls attribute is added to the video element with hasAttribute.

If it is, we call removeAttribute to remove it.

Otherwise, we call setAttribute to add it.

Conclusion

To show or hide controls programmatically in a HTML5 video with JavaScript, we can add or remove the controls attribute programmatically.

Sometimes, we want to fix Axios Network Error with React.

In this article, we’ll look at how to fix Axios Network Error with React.

How to fix Axios Network Error with React?

To fix Axios Network Error with React, we enable CORS in our back end.

For instance, we write

const app = express();
const cors = require("cors");

app.use(cors());

to add the cors middleware in our Express app.

Then we won’t get CORS error when we make requests to it.

We install cors by running

npm i cors

Conclusion

To fix Axios Network Error with React, we enable CORS in our back end.

Sometimes, we want to block device rotation on mobile web pages with JavaScript.

In this article, we’ll look at how to block device rotation on mobile web pages with JavaScript.

How to block device rotation on mobile web pages with JavaScript?

To block device rotation on mobile web pages with JavaScript, we call the screen.orientation.lock or screen.lockOrientation method.

For instance, we write

screen.orientation.lock();

to lock the screen to the current orientation.

Or we write

screen.lockOrientation("portrait-primary");

to call screen.lockOrientation to lock the screen to the normal portrait orientation.

We can also call it with 'portrait-secondary' to lock it in the upside down portrait mode.

'landscape-primary' locks it to the normal landscape mode.

'landscape-secondary' locks it to the upside down landscape mode.

Conclusion

To block device rotation on mobile web pages with JavaScript, we call the screen.orientation.lock or screen.lockOrientation method.

Sometimes, we want to capture window.onbeforeunload with JavaScript.

In this article, we’ll look at how to capture window.onbeforeunload with JavaScript.

How to capture window.onbeforeunload with JavaScript?

To capture window.onbeforeunload with JavaScript, we return a value in the method.

For instance, we write

window.onbeforeunload = () => {
  return false;
};

to return false in window.onbeforeunload to show an alert box.

Conclusion

To capture window.onbeforeunload with JavaScript, we return a value in the method.