How to place a div in certain coordinates?

Question

I want to place a DIV in certain coordinates? How can I do this with Javascript?

Answer 1

Script its properties left and top as the number of pixels from the left edge and top edge, respectively. It should have position: absolute;

 var d = document.getElementById('yourDivId'); d.style.position = "absolute"; d.style.left = x_pos+'px'; d.style.top = y_pos+'px'; 

Or do it as a function so that you can attach it to an event like onmousedown

 function placeDiv(x_pos, y_pos) { var d = document.getElementById('yourDivId'); d.style.position = "absolute"; d.style.left = x_pos+'px'; d.style.top = y_pos+'px'; } 

Answer 2

You do not need to use Javascript for this. Using plain css:

 div.blah { position:absolute; top: 0; /*[wherever you want it]*/ left:0; /*[wherever you want it]*/ } 

If you feel that you must use javascript or try to do it dynamically using jQuery, this affects all divs of the blah class:

 $('.blah').css('position', 'absolute'); $('.blah').css('top', 0); //or wherever you want it $('.blah').css('left', 0); //or wherever you want it 

Alternatively, if you should use plain old javascript, you can capture id

 document.getElementById('myElement').style.position = "absolute"; document.getElementById('myElement').style.top = 0; //or whatever document.getElementById('myElement').style.left = 0; // or whatever 

Answer 3

Well, it depends, if all you need is to position the div and then nothing else, you do not need to use a java script for this. You can only achieve this with CSS. The important thing is which container do you want to position your div, if you want to position it relative to the body of the document, then your div should be absolute and its container should not be relative or absolute, in this case your div will be located relative to the container.

Otherwise, with Jquery, if you want to position the element relative to the document, you can use the offset () method.

 $(".mydiv").offset({ top: 10, left: 30 }); 

if relative to the offset of the parent position, the parent is relative or absolute. then use the following ...

 var pos = $('.parent').offset(); var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent'; var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent'; $('.mydiv').css({ position:'absolute', top:top, left:left }); 

Answer 4

You can also use the fixed property of the css position.

 <!-- html code --> <div class="box" id="myElement"></div> /* css code */ .box { position: fixed; } // js code document.getElementById('myElement').style.top = 0; //or whatever document.getElementById('myElement').style.left = 0; // or whatever 

Answer 5

Here is a correctly described article, as well as a sample code. JS coordinates

As per requirement. below is the code that is finally published in this article. You must call the getOffset function and pass an html element that returns the top and left values.

 function getOffsetSum(elem) { var top=0, left=0 while(elem) { top = top + parseInt(elem.offsetTop) left = left + parseInt(elem.offsetLeft) elem = elem.offsetParent } return {top: top, left: left} } function getOffsetRect(elem) { var box = elem.getBoundingClientRect() var body = document.body var docElem = document.documentElement var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft var clientTop = docElem.clientTop || body.clientTop || 0 var clientLeft = docElem.clientLeft || body.clientLeft || 0 var top = box.top + scrollTop - clientTop var left = box.left + scrollLeft - clientLeft return { top: Math.round(top), left: Math.round(left) } } function getOffset(elem) { if (elem.getBoundingClientRect) { return getOffsetRect(elem) } else { return getOffsetSum(elem) } } 

Answer 6

I clipped this and added "px"; It works very well.

 function getOffset(el) { el = el.getBoundingClientRect(); return { left: (el.right + window.scrollX ) +'px', top: (el.top + window.scrollY ) +'px' } }`enter code here` to call: //Gets it to the right side el.style.top = getOffset(othis).top ; el.style.left = getOffset(othis).left ;