Hello, World!

by SiwakornpcJSF

HTML

<div class="e">
  <p id="showWindowDimension"></p>
  <p id="showBoxDimension"></p>
  <p id="showCalc"></p>
</div>

<div id="modalImg"> 
  <div id="containerLimit">
    <img id="box" width="1000" src="https://siwakornpc.neocities.org/images/msp11d/13.png">
  </div>
</div>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#box" ).draggable({ containment: "#containerLimit", scroll: false });
  } );
</script>

CSS

* {
  margin: 0px;
  padding: 0px;
}

#box {
  background-image: red;
}

.e {
  position: absolute;
  color: white;
  text-shadow: 2px 2px 2px black;
  z-index: 1000;
}

body {
  overflow: hidden;
}

#modalImg {
  display: flex;
  align-items: center;
  justify-content: center;
}

#containerLimit {
  background: black;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  /* -1/2 height */
}

img:active {
  cursor: all-scroll;
}

JavaScript

const ww = window.innerWidth;
const wh = window.innerHeight;
document.getElementById('showWindowDimension').innerHTML =
  `width: ${ww} height: ${wh}`;

const bw = document.getElementById('box').offsetWidth;
const bh = document.getElementById('box').offsetHeight;
document.getElementById('showBoxDimension').innerHTML =
  `width: ${bw} height: ${bh}`;

const leftoverw = bw - ww;
const leftoverh = bh - wh;

let checkNegw = leftoverw * 2;
let checkNegh = leftoverh * 2;

if (checkNegw < 0) {
  checkNegw = 0;
}
if (checkNegh < 0) {
  checkNegh = 0;
}

document.getElementById('showCalc').innerHTML =
  `width: ${ww + (checkNegw)} height: ${wh + (checkNegh)}`;

document.getElementById('modalImg').style.width = ww + 'px';
document.getElementById('modalImg').style.height = wh + 'px';

document.getElementById('containerLimit').style.width = ww + checkNegw + 'px';
document.getElementById('containerLimit').style.height = wh + checkNegh + 'px';

window.addEventListener('resize', () => {
  const ww = window.innerWidth;
  const wh = window.innerHeight;
  document.getElementById('showWindowDimension').innerHTML =
    `width: ${ww} height: ${wh}`;

  const leftoverw = bw - ww;
  const leftoverh = bh - wh;
  let checkNegw = leftoverw * 2;
  let checkNegh = leftoverh * 2;

  if (checkNegw < 0) {
    checkNegw = 0;
  }
  if (checkNegh < 0) {
    checkNegh = 0;
  }

  document.getElementById('showCalc').innerHTML =
    `width: ${ww + (checkNegw)} height: ${wh + (checkNegh)}`;
  // Perform actions based on the new window width

  document.getElementById('modalImg').style.width = ww + 'px';
  document.getElementById('modalImg').style.height = wh + 'px';

  document.getElementById('containerLimit').style.width =
    ww + checkNegw + 'px';
  document.getElementById('containerLimit').style.height =
    wh + checkNegh + 'px';
});