javascript - center div (position:absolute) vertically and horizontally to screen view
Question
I am trying to make a usercript that overlays text boxes over images: It uses a draggable menu using interactjs with fixed position. The menu has a button and I need it to create a div of 20px*60px and show it at the center of the screen view (so not to scroll to the bottom of the page and drag it from there). I can do it (somewhat) by using:
var div = document.getElementById("inserted_div_2");
div.style.position = 'fixed';
div.style.top = '50%'; //relative to screen
div.style.left = '50%';
From there I can drag/resize it to where I want over the image (also using interactjs) but then, how can I change it to position:absolute so it scrolls with the content keeping the same position over the images (eg: in the top left corner of img2)? something like:
var posX = div.getPosX(); //relative to page; in %, px or em
var posY = div.getPosY();
// when I change it from fixed to absolute the div goes back to the bottom of the page
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;
The HTML structure looks something like this:
<body>
...
<div id="content">
...
<img src="/img1.jpg"> // size and number of imgs is variable.
<img src="/img2.jpg"> // are in a strip format.
<img src="/img3.jpg">
...
</div>
...
<div id="overlays">
//eg: div1 was dragged from the center of screen
//into in between img1 and img2
<div id="inserted_div_1">Text</div>
//now I need to do the same for div2,
//dragging it to the top left corner of img2
<div id="inserted_div_2">Text</div>
</div>
</body>
I would prefer not using jQuery or another library, but if it is too difficult then I will use it. Thanks!
2 answers
solution1
1 ACCPTED 2014-09-06 08:46:50
You can use offsetTop and offsetLeft to get the element's position (in px) relative to the page.
var posX = div.offsetLeft;
var posY = div.offsetTop;
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;
UPDATE
The values returned by offsetTop and offsetLeft do not include the transform:translate styles applied. I created a test case - its not dragable but it shows you how to calculate the relative positions by adding the offset and the translate values:
var div = document.getElementById("inserted_div_2");
var content = document.getElementById("content");
function testpos(){
var ol = div.offsetLeft,
ot = div.offsetTop,
cs = window.getComputedStyle(div, null),
tr = cs.getPropertyValue("-webkit-transform") ||
cs.getPropertyValue("-moz-transform") ||
cs.getPropertyValue("-ms-transform") ||
cs.getPropertyValue("-o-transform") ||
cs.getPropertyValue("transform") ||
false;
//outputs something like 'matrix(1, 0, 0, 1, 80, 90)'
var values = tr.replace(/[^0-9\.\,]/g,'').split(','),//split into array
tx = values[4] || 0,//take the x value (else 0)
ty = values[5] || 0;//take the y value (else 0)
//
content.innerHTML+=("<hr />position: "+div.style.position+"<br />");
content.innerHTML+=("offsetLeft:"+ol+", offsetTop:"+ot+"<br />");
content.innerHTML+=("translate-x:"+tx+", translate-y:"+ty+"<br />");
//so the actual position is the offset + the translate ==
var x = parseInt(ol) + parseInt(tx),
y = parseInt(ot) + parseInt(ty);
content.innerHTML+=("x:"+x+" y:"+y+"<br />");
}
/* TEST */
//1 set to fixed
div.style.position = 'fixed';
testpos();//test position
//2 move using transfor:translate
div.style.transform = 'translate(80px,90px)';
testpos();//test position (note the offset does not include the transform)
/3 set to absolute and get the position
div.style.position = 'absolute';
testpos();
solution2
0 2014-09-06 07:49:24
you can use css for center div vertically and horizontally
for example
#content{
position:absolute;
width:100px;
height:100px;
left:50%;
top:50%;
margin-left:-50px; /*half width*/
margin-top:-50px; /*half height*/
}
<div id='content'>
...
</div>
if width equal 100px margin-left equal -50px if width equal 200px margin-left equal -100px and so on
margin-left half width and margin-top half height
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.