Offset seems to be drasticly different per item i click

Question

I have been working with creating a selection box around some cells, The selection box is absolute so it can reach everywhere it needs to, to create a click and drag box around some cells.

It seems that based on the mousedown event, the position of the box is set correctly for class hour but not for half-hour. While it is the same code, hour offset will return me the corrdinates of the item. relative to the doc, whereas the half-hour will return approx (0,6) which sets the top:left to the upper right corner.

Right now, my dom looks like this:

<div class="row">
  <div class="cell hour">
    <div class="half-hour"></div>
    <div class="half-hour"></div>
  </div>
</div>

and the CSS is:

.hour{
  position:relative;
}
.half-hour{
  display:inline-block;
  float:left;
  width: 50%;
  height: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: solid 1px black;
  width: 20px;
  text-align: center;
  cursor: pointer;
}

From what it looks like is that the offset I am getting when selecting the half-hour is the offset to the parent hour and the hour i think is getting his relative to the page?

After looking at these, I was thinking that setting half-hour to: *position:relative;` might do the trick, but it didnt do anything. it is the same.

I am thinking i need to modify something. im just not sure what.

I will eventually be doing this same design for a class called: quarter-hour which will have 2 in each of the half-hour divs.

Edit based on the question below, I just have a simple: ` which is on the page, and then on mousedown it would:

1- Set Top:Left values based on mouse.target.offsetTop && mouse.target.offsetLeft respectively.

2- Set position absolute (though it should be already)

3- set dimensions, Height and Width accordingly.

Edit 2 I managed to recreate my issue with this fiddle https://jsfiddle.net/838vqboe/ I am currently giving 3 options in the DDL. Hour works as expected, but not HH or QH.

1. Where in the above markup is the selection box? .. or you add it dynamically on click? ... 2. How does its markup/CSS look like? — Asons, Dec 14 '16 at 16:11
I have a div with `position: absolute` i add to the page. Then I would set its position and dimensions dynamically. It just seems that right now: in my event handler: mouse.target.offsetLeft && mouse.target.offsetTop is not returning the dimensions i was expecting. I was expecting something similar to more defined based on the document, not the parent. — Fallenreaper, Dec 14 '16 at 16:15
So it appears you get the wrong coordinates, and since we can't see the code?, does this one give some answers how and what to expect: http://stackoverflow.com/questions/3234977/using-jquery-how-to-get-click-coordinates-on-the-target-element — Asons, Dec 14 '16 at 16:26
This doesnt seem to really solve it. Let me see about getting an example up and running. — Fallenreaper, Dec 14 '16 at 16:49
i ended up copying the output from my dom-repeater, but the fix should really just be somewhere in mousedown OR in the classes. — Fallenreaper, Dec 14 '16 at 17:29

score 0 · Accepted Answer · answered Dec 14 '16 at 19:31

I ended up coming up with a solution which worked in Javascript, but when converting it to Dart, specifically with Polymer, the concepts behind shadowdom was alien to me. This I think is the issue I was having as it was determining a local root it was applying positions to while the mouse gave me positions in relation to the screen.

To resolve this, I noticed that something which extends PolymerElement has get getBoundingClientRect(), so i ended up doing something like the following in javascript:

var _mouseDown = function(e){
  var selectedHtml = e.target;
  var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left
  var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top 
  _selectionDiv.css({left:left, top:top});
}
$selection.on("mousedown", _mouseDown);

and in Dart:

Function _mouseDown(MouseEvent mouse){
  HtmlElement selectedElement =- mouse.target;
  var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left;
  var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top ;
  _selectionDiv.style.top = "${top}px";
  _selectionDiv.style.left = "${left}px";
}

Offset seems to be drasticly different per item i click

1 Answers1