HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>moveBy() — nudge pad</title>
</head>
<body>
  <button type="button" id="openBtn">Open popup</button>
  <button type="button" data-dx="0" data-dy="-15">Up</button>
  <button type="button" data-dx="0" data-dy="15">Down</button>
  <button type="button" data-dx="-15" data-dy="0">Left</button>
  <button type="button" data-dx="15" data-dy="0">Right</button>
  <pre id="out">Open popup, then use direction buttons.</pre>
  <script>
    var popup = null;
    document.getElementById("openBtn").onclick = function () {
      popup = window.open("", "Nudge", "width=280,height=160,left=240,top=140");
      popup.document.write("<p>Use the direction buttons</p>");
      document.getElementById("out").textContent = "Popup opened.";
    };
    var buttons = document.querySelectorAll("[data-dx]");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function () {
        if (popup && !popup.closed) {
          popup.moveBy(Number(this.getAttribute("data-dx")), Number(this.getAttribute("data-dy")));
          document.getElementById("out").textContent = "Popup nudged by (" + this.getAttribute("data-dx") + ", " + this.getAttribute("data-dy") + ").";
        } else {
          document.getElementById("out").textContent = "Open the popup first.";
        }
      };
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript moveBy() — direction pad (Try It)