title: Creating an html template that looks like windown but have problems with the resizers
body: <p>I'm creating an windown look like template for web but I have a problem with the resizer, the resizer in the bottom right works perfectly but trying to create the top right resizer don't work and I don't know why I have tried everything but it doesn't work.</p>
  
  <p>The window don't resize well when you drag the resizer in the top right. it moves really weird. <a href="https://alhazacod.github.io/windowsxphtmltemplate" rel="nofollow noreferrer">https://alhazacod.github.io/windowsxphtmltemplate</a> try it for yourself.</p>
  
  <p>Here's the Github <a href="https://github.com/alhazacod/windowsxphtmltemplate" rel="nofollow noreferrer">https://github.com/alhazacod/windowsxphtmltemplate</a></p>
  
  <p>The JavaScript code:</p>
  
  <pre><code>dragru.onmousedown = function(event) {
    let shiftLeft = event.clientX - wwindow.getBoundingClientRect().left;
    let shiftTop = event.clientY - wwindow.getBoundingClientRect().top;
    let shiftBottom = - event.clientY + wwindow.getBoundingClientRect().bottom;
  
    function resize(w, h, pageY){
      wwindow.style.top = pageY - shiftTop + 'px';
      if(w&gt;200){
        wwindow.style.width = w + 'px';
      }
      if(h&gt;200){
        console.log(wwindow.getBoundingClientRect().bottom - event.pageY);
        wwindow.style.height = (wwindow.getBoundingClientRect().bottom - event.pageY) + 'px';
  
      }
      //wwindow.style.top = pageY - shiftTop + 'px';
    }
  
    function onMouseMove(event){
      shiftLeft = event.clientX - wwindow.getBoundingClientRect().left;
      shiftBottom = -event.clientY + wwindow.getBoundingClientRect().bottom;
      //if(event.pageY &lt; windowh &amp;&amp; event.pageY &gt; 1 &amp;&amp; event.pageX &lt; windoww &amp;&amp; event.pageX &gt; 1){
        resize(shiftLeft, shiftBottom, event.pageY);
      //}
      /*else{
        document.removeEventListener('mousemove', onMouseMove);
        wwindow.onmouseup = null;
      }*/
    }
  
    document.addEventListener('mousemove', onMouseMove);
  
    wwindow.onmouseup = function(){
      document.removeEventListener('mousemove', onMouseMove);
      wwindow.onmouseup = null;
    };
  };
  </code></pre>