Disable resizeable element when they cover 100% of the screen height & width

Question

I want to make a conditionnal from the execution of a script. When a window inside the browser is at 100% width and 100% height, I want to disable a script from running. The script is the one here https://stackoverflow.com/a/71189606/9444690

element = document.getElementById("window");

let heightPercentage = Math.round(
 (element.clientHeight / window.innerHeight) * 100
);
let widthPercentage = Math.round(
 (element.clientWidth / window.innerWidth) * 100
);

if (heightPercentage < 100 && widthPercentage < 100) {
  makeResizable(element, 400, 225, 10);
}

function makeResizable(element, minW = 100, minH = 100, size = 20) { ...

I tried this and I also tried to change the type of the script on the push of a button. It changed to type="application/JSON" as mentionned in this post: https://stackoverflow.com/a/26483433/9444690 but nothing happened.

score 0 · Answer 1 · answered Dec 27 '22 at 15:27

I think the best way would be to use computed values: that's 100% sure it's the real size you have on screen...

values();


function values() {
  let compStyles = window.getComputedStyle(document.body);
  let w = compStyles.getPropertyValue('width');
  let h = compStyles.getPropertyValue('height');
  document.querySelector('#bodyValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
  console.log(parseFloat(w), parseFloat(h));

  compStyles = window.getComputedStyle(document.querySelector('.container'));
  w = compStyles.getPropertyValue('width');
  h = compStyles.getPropertyValue('height');
  document.querySelector('#containerValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
  console.log(parseFloat(w), parseFloat(h));
}

body {
  background-color: #3b404e;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: red;
}

<div class="container">
  <button id="plus">+</button>
  <div id="bodyValues"></div>
  <div id="containerValues"></div>
</div>

Now you can compare the real value of the element with body size. Get computed style width give back value with px, parseFloat (of if you prefer in int parseInt) get rid of the px.

Disable resizeable element when they cover 100% of the screen height & width

1 Answers1