Category: JavaScript Answers

To show Page Loading div until the page has finished loading with JavaScript, we set the display property of the loading div.

For instance, we write

<div id="loading">
  <img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>

to add a div with a loading image.

Then we write

window.onload = () => {
  document.getElementById("loading").style.display = "none";
};

to set window.onload to a function that selects the div with getElementById and hide it by setting style.display to 'none'.

window.onload is called when the page is loaded.

To detect Ctrl+V, Ctrl+C using JavaScript, we listen for keypresses on the window.

For instance, we write

window.onkeypress = (evt) => {
  const c = evt.keyCode;
  const ctrlDown = evt.ctrlKey || evt.metaKey;

  if (ctrlDown && evt.altKey) {
    return true;
  } else if (ctrlDown && c === 67) {
    // c
    return false;
  } else if (ctrlDown && c === 86) {
    // v
    return false;
  } else if (ctrlDown && c === 88) {
    // x
    return false;
  }
  return true;
};

to set window.onkeypress to a function that checks for various keys.

We check for ctrl or meta key press with evt.ctrlKey || evt.metaKey.

And then we check for keyCode for the 2nd key if ctrlDown is true.

If keyCode is 67, then c is pressed.

If keyCode is 86, then v is pressed.

If keyCode is 88, then x is pressed.

We return false if any of those are true to stop the behavior of copy and paste.

Otherwise, we return true.

To disable HTML button using JavaScript, we set the button’s disabled property.

For instance, we write

document.getElementById("btnPlaceOrder").disabled = true;

to select the button with getElementById.

Then we disable the button by setting is disabled property to true.

To get browser width using JavaScript, we can get the max of a few values.

For instance, we write

const getWidth = () => {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
};

to define the getWidth function.

In it, we call Math.max to get the max of document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, and document.documentElement.clientWidth to get the width of the browser

To get the information from a meta tag with JavaScript, we use the content property.

For instance, we write

const content = document.head.querySelector(
  "[property~=video][content]"
).content;

to select the meta element with the property attribute containing video and has the content attribute with document.head..querySelector from the head element.

Then we get the content attribute from the selected element with the content property.