Develop Reference

Datepicker Alignment Issue

Open above of its own input element or sometimes vertically anywhere on page. I need that it should open below input element.
now its overlay its own input element.
I find it may be the top issue in position function.
the following code:
setElemPosition() {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
if (this.domele) {
this.domele.style.position = 'absolute';
this.domele.style.top = rect.top + this.elementRef.nativeElement.scrollHeight + 'px';
this.domele.style.left = rect.left + 'px';
this.domele.style.width = Math.floor(rect.width) + 'px';
this.domele.style.zIndex = '9999999999';
}
}

Just used window.pageYOffset. The issue get resolved and the alignment is now showing properly.
setElemPosition() {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
if (this.domele) {
this.domele.style.position = 'absolute';
this.domele.style.top = rect.top + window.pageYOffset + this.elementRef.nativeElement.scrollHeight + 'px';
this.domele.style.left = rect.left + 'px';
this.domele.style.width = Math.floor(rect.width) + 'px';
this.domele.style.zIndex = '9999999999';
}

Moving absolute positioned resize icons with the rectangle

I've a rectangle and when I'm dragging, I want the resizer icons move together. I set each of 4 resizer icons absolute position and using mousemove event and setting top, left positions on each movement.
screenshot of rectangle with resizers
But it seems to laggy, what are other options to do this?
// I used useRef for referencing resizer icons.
resize1.current.style.top = top - 10 + "px";
resize1.current.style.left = left - 10 + "px";
resize1.current.hidden = false;
resize3.current.style.top = top - 10 + "px";
resize3.current.style.left = left + offsetWidth + "px";
resize3.current.hidden = false;
resize5.current.style.top = top + offsetHeight + "px";
resize5.current.style.left = left + offsetWidth + "px";
resize5.current.hidden = false;
resize7.current.style.top = top + offsetHeight + "px";
resize7.current.style.left = left - 10 + "px";
resize7.current.hidden = false;

Creating div element dynamically using javascript not supporting while changing the screen resolution

im adding a image inside the div at mouse clicked position by getting the X and Y coordinates of div. its working well and the image is added at the mouse clicked position. but when I try to change the screen resolution, images are moved some where they are not in the div. I need to design this screen to support all screen resolution(for mobile and surface also). can anyone help me on this. thanks in advance.
here is my working code:
<script language="JavaScript">
function mouseclicked(event) {
var img = document.createElement('img')
img.src = "Printers/printer2.jpg";
img.width = '50';
img.height = '50';
img.style.position = "absolute";
img.style.left = event.pageX + "px";
img.style.top = event.pageY + "px";
$('#maindiv').append(img);
}
</script>

add this to your code before appending img to maindiv (mydiv being your maindiv element):
var divPos = mydiv.getBoundingClientRect ();
img.style.position = "relative";
img.style.left = divPos.left + (event.pageX - divPos.left) + "px";
img.style.top = divPos.top + (event.pageY - divPos.top) + "px";

Position of click within div

I'm trying to get the position of a click inside a div so that when I position a window as the mouse drag moves it, the mouse cursor will be exactly on the spot (relative to the moving window) where the initial click occurred.
Here's the window:
<div id="PopUp" class="Popup">
<div id="PopUpTitleBar"><img class="xOut" onclick="ClosePopUp();" src="/images/xOut.png"></div>
<div class="InnerPopup">
<!-- <p>Here is the body of a pop up element.</p> -->
<p id="PopUpBody"></p>
</div>
</div>
And I have these methods to handle the clicking and dragging:
var firstClick = true;
var offsetX = 0;
var offsetY = 0;
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
firstClick = true;
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('PopUp');
if (firstClick == true) {
offsetX = $('#PopUpTitleBar').offset().left;
offsetY = $('#PopUpTitleBar').offset().top;
firstClick = false;
}
var spotX = e.pageX - offsetX;
var spotY = e.pageY - offsetY;
div.style.top = spotY + 'px';
div.style.left = spotX + 'px';
}
This sorta works, except that my offsetX and offsetY are returning the position of the top left corner of PopUpTitleBar instead of the position of the click within PopUpTitleBar.
How can I correct this so my offsets are relative to the inside top left corner of PopUpTitleBar?
Thanks.

You have the click position on the screen. And then you have the position of the div. Substract the main position with the div position and youll have the finger position relative to that div.
$('#PopUpTitleBar').click(function (e) {
var posX = $(this).offset().left, posY = $(this).offset().top;
alert("e.pageX: " + e.pageX + " posX:" + posX + " e.pageY:" + e.pageY + " posY:" + posY);
});

To get the value of the Position of click within div use the event e parameter in your callback.
function divMove(e){
var div = document.getElementById('PopUp');
if (firstClick == true) {
// use $(e).target
offsetX = $( $(e).target ).offset().left;
offsetY = $( $(e).target ).offset().top;
firstClick = false;
}
var spotX = e.pageX - offsetX;
var spotY = e.pageY - offsetY;
div.style.top = spotY + 'px';
div.style.left = spotX + 'px';
}

This is what ultimately worked:
function divMove(e){
var div = document.getElementById('PopUp');
var titleBar = document.getElementById('PopUpTitleBar');
if (firstClick == true) {
offsetX = e.pageX - $('#PopUpTitleBar').offset().left;
offsetY = e.pageY - $('#PopUpTitleBar').offset().top;
firstClick = false;
}
var spotX = e.pageX - offsetX;
var spotY = e.pageY - offsetY;
div.style.top = spotY + 'px';
div.style.left = spotX + 'px';
}
First, I calculate the position in the titlebar by subtracting the top left corner of the title bar from the point at which the first click occurred. Then, as the mouse moves, the subsequent positions of the mouse must all subtract that offset so that the top left corner remains the same distance from the original click. Thanks everyone for the suggestions - they helped me wrap my head around the problem better.

How to draw a line between two divs?

I'm currently trying to draw a diagonal line between the bottom right corner of one div to the top right corner of another. If possible, I would like to do it without jQuery. Is this possible?

http://jsfiddle.net/cnmsc1tm/
This won't work with IE8 or below because of CSS limitations.
function getOffset( el ) {
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}
function connect(div1, div2, color, thickness) { // draw a line connecting elements
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
// alert(htmlLine);
document.body.innerHTML += htmlLine;
}
The Distance Formula
Finding the Center Of Two Points
Finding the Angle Between Two Points
CSS Transform:Rotate
HTML Element offset[Width|Height|Top|Left] properties
Edit (for others with the same problem):
If you need to, for example, create a line from two corners that are not the top right and bottom right divs, go to this section of the code:
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
where you see + off1.width and + off1.height, that means that the code is calculating the position of the bottom or the right of the div. Remove the + off1.width or the + off1.height to get the left or the top of the div.
EDIT updated to a more standard getOffset function. If you want to get really anal you'd probably also have to add document.documentElement.client[Left/Top] and walk the offsetParent tree, but I think getBoundingClientRect() and window.page[X/Y]Offset are sufficient for an example like this.

There is a way to do it without jQ.
Find the position of your divs using offset.
Find the slope
draw 1x1px points from start to end position using the slope in your loop.