CODEWITHSUNDEEP
javascripthtmlangularjscssposition
Baama
Baama

Reputation: 2632

Javascript: Find position of div with respect to viewport irrespective of scroll

Hi I have a div that is fixed to the middle of the screen. like a modal. It contains other elements withing. How do i find the position of the div as well as some of the elements inside it. The css class for the div is

.timepicker {
    box-shadow: 0 5px 5px -3px lightgray, 0 8px 10px 1px lightgray, 0px 3px 14px 2px lightgray;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
    min-width: 280px;
   position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    display: table;
    -ms-border-radius: 3px;
    border-radius: 3px;
    line-height: normal;
    overflow: hidden;
    z-index: 99999;
}

Upvotes: 0

Views: 1453

Answers (3)

Deepthi S
Deepthi S

Reputation: 273

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return [curleft, curtop];
  }
}

Use this function to find the position of the div:

findPos(document.getElementById('time'));

Reference: https://www.quirksmode.org/js/findpos.html

Upvotes: 0

Pineda
Pineda

Reputation: 7593

You can use vanilla javascript by first getting the div element, then it is simply a case of referencing the .offsetLeft and .offsetTop properties respectively of the returned <div>:

var div = document.querySelector('div.timepicker');
div.offsetLeft;  // x position
div.offsetTop);  // y position

Here's a snippet for you to try:

var div = document.querySelector('div.timepicker');
console.log('x position: ' + div.offsetLeft);  // x position
console.log('y position: ' + div.offsetTop);   // y position
.timepicker {
    box-shadow: 0 5px 5px -3px lightgray, 0 8px 10px 1px lightgray, 0px 3px 14px 2px lightgray;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
    min-width: 280px;
   position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    display: table;
    -ms-border-radius: 3px;
    border-radius: 3px;
    line-height: normal;
    overflow: hidden;
    z-index: 99999;
}
<div class='timepicker'>DIV</div>

Upvotes: 0

hyrumcoop
hyrumcoop

Reputation: 362

You can use the getBoundingClientRect method of an element to get the position. Here is an example:

var pos = document.getElementById('myDiv').getBoundingClientRect();
console.log(pos.left, pos.top);
#myDiv {
  position:fixed;
  left:150px;
  top:110px;
}
<div id="myDiv">
  Fixed position
</div>

The left and top attributes of the returned object will give you the x and y coordinates, but you can also access the bottom and right attributes to get the distance from the bottom of the viewport and the distance from the right of the viewport.

Upvotes: 1

Related Questions