CODEWITHSUNDEEP
javascriptmacosconditional-statementswindowresize
Yohann DCz
Yohann DCz

Reputation: 21

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

I want to make a conditional 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.

This is the script: 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 mentioned in this post: https://stackoverflow.com/a/26483433/9444690 but nothing happened.

Upvotes: 0

Views: 108

Answers (1)

pier farrugia
pier farrugia

Reputation: 1570

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.

Upvotes: 0

Related Questions