Home/ Questions/Q 6354119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T22:31:35+00:00

Based on answers from a previous question , both refer to mouse positions (x

  • 0

Based on answers from a previous question, both refer to mouse positions (x and y coordinates).

  • relative to the document and
  • relative to the viewport.

I have read through an article on QuirksMode, however I think I may be missing something. I have put together these two diagrams to help me in my understanding. Is my analysis correct?

enter image description here

Now scroll the document 250px…

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your analysis is correct (and those are very nice diagrams!)

    However regarding your other post, they’re a bit more information than is necessary.

    You just need to understand that there is a document and viewport. The document is stationary and the viewport moves with you (and has a scroll offset).

    In principle, you could place your dialog window relative to either of these. Let’s pretend the dialog is a simple division element:

    <body>
<button id="save">Save</button>
<div id="dialog" style="position:absolute;">Are you sure?</div>
</body>

    And let’s say you want to position that element relative to your button when clicked. You could use the document:

    <script>
document.getElementById("save").onclick = function(e) {
  var dialog = document.getElementById("dialog");

  dialog.style.top = e.pageY + "px";
  /*
  pageY gives the position of the mouse relative to the
  document, when this event occurred.
  */
};
</script>

    Or you could use the viewport:

    <script>
document.getElementById("save").onclick = function(e) {
  var dialog = document.getElementById("dialog");

  dialog.style.top = e.clientY + window.pageYOffset + "px";
  /*
  clientY gives the position of the mouse relative to
  the viewport, when this event occurred. And pageYOffset
  is the distance the user has scrolled.
  */
};
</script>

    You could even use the button itself. This has the added benefit of giving you a consistent position, regardless of where exactly the user clicked:

    <script>
document.getElementById("save").onclick = function(e) {
  var dialog = document.getElementById("dialog");

  dialog.style.top = document.getElementById("save").offsetTop + "px";
  /*
  offsetTop gives the position of the button, relative to its nearest
  positioned ancestor. If the element is deeply nested, you may need
  to do additional calculations. (jQuery's "offset" method will do this
  for you).
  */
};
</script>

    To apply that last method when you’re using jQuery’s dialog class, you can simply do this:

    <script>
  $("#save").click(function(e) {
    $("#dialog").dialog({
      position: {
        my: "top",
        at: "bottom",
        of: $("#save")
      }
      /*
      See this: http://docs.jquery.com/UI/API/1.8/Position
      */
    });
  });
</script>
    • 0