I want to append a div inside another div after some specific pixel. For example, First, I created a Div than I calculate its Height with offsetHeight. Now I want to append a Div Inside parent Div in middle (Half of parents div height)
var ts = document.querySelectorAll('article')[0];
var ks = ts.offsetHeight;
var lirf = ks/2;
<article>Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
</article>
Want to Append Child at lirf px in above code
Find Answer Close Enough
When I use absolute position my div overlap other as shown in below code:
<div id='get' style=''>kad</div>
<article >Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
Giving some Height to it.<br/>
</article>
<script>
var ts = document.querySelectorAll('article')[0];
var ks = ts.offsetHeight;
var lirf = ks/2;
var kk = document.getElementById('get');
kk.style.position = "absolute";
kk.style.top=lirf+'px';
</script>
var ts = document.querySelectorAll('article')[0];
var ks = ts.offsetHeight;
var lirf = ks/2;
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.position = 'absolute';
div.style.top= lirf+'px';
document.querySelectorAll('article')[0].appendChild(div);
Hope this helps!
If vertically centering an element is your aim, go through this https://vanseodesign.com/css/vertical-centering/
Related
There is another question asking how to calculate the browser's scrollbar sizes.
My question is about the solution implemented in the npm package scrollbar-wdith. Can somebody explain why it works?
For reference, here is the relevant code (.coffee):
scrollbarWidth = null
getScrollbarWidth = (recalculate = false) ->
return scrollbarWidth if scrollbarWidth? and not recalculate
return null if document.readyState is 'loading'
div1 = document.createElement 'div'
div2 = document.createElement 'div'
div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'
div1.style.overflow = 'scroll'
div2.style.overflow = 'hidden'
document.body.appendChild div1
document.body.appendChild div2
scrollbarWidth = Math.abs div1.scrollHeight - div2.scrollHeight
document.body.removeChild div1
document.body.removeChild div2
scrollbarWidth
Here's what i did. Took the crux of the code and simplified it a bit.
<html>
<head>
</head>
<body>
</body>
<script>
var scrollbarWidth;
scrollbarWidth = null;
getScrollbarWidth = function(recalculate) {
var div1, div2;
div1 = document.createElement('div');
div2 = document.createElement('div');
div1.id = "div1";
div2.id = "div2";
div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px';
div1.style.overflow = 'scroll';
div2.style.overflow = 'hidden';
document.body.appendChild(div1);
document.body.appendChild(div2);
scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight);
alert(scrollbarWidth);
return scrollbarWidth;
};
getScrollbarWidth();
</script>
<html>
This let me play around with the elements.
what happens is that they create two identical divs, one with a scroll bar and another without a scrollbar and then they query the scrollHeight property for both of them, which ignores the scrollbar (just the element and padding).. see here - http://www.w3schools.com/jsref/prop_element_scrollheight.asp
The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin.
the difference in the scrollHeights yields the required scrollbar's height (since one of the elements has a scrollbar and the other one does not)
as it turns out, div2 scrollHeight = 100 px (=height) while div1's scrollHeight was only 83px and so chrome has a scrollbar of height 17px
Let me know if that makes sense to you
Here's a simpler snipped that also sets the scrollbar's pixel size to a CSS custom property of --scrollbar (if your browser supports the spec):
(function(node, body){
node.style.display = 'inline-block';
node.style.position = 'absolute';
node.style.height = '0';
node.style.overflow = 'scroll';
body.appendChild(node);
body.style.setProperty('--scrollbar', node.offsetWidth + 'px');
body.removeChild(node);
})(document.createElement('scrollbartester'), document.body);
I am trying to position an element relative to another element that is not its parent using jquery. The problem is that the non-parent element is dynamic and changes in height depending on the item. My goal is to position the element in the bottom right corner of the nonparent element and have it stay in the position relative to that nonparent element regardless of height. I also am a total noob when it comes to jquery.
// Reposition DIV
var nonparent = $('.DIVtoBeRelativeTo');
var position = nonparent.offset();
var child1 = $('.ChildDIV').offset
var width = nonparent.width();
var height = nonparent.height();
var position = nonparent.position();
var bottomLeftX = position.left;
var bottomLeftY = position.top + height;
var bottomRightX = position.left + width;
var bottomRightY = position.top + height;
Use this way:
nonparent.offset().left;
nonparent.offset().top;
Let's say we have this image:
So you need to use:
Element.css("left", NonParent.offset().left + NonParent.width() - Element.width());
Code:
// Reposition DIV
var NonParent = $('.DIVtoBeRelativeTo');
var Element = $('.ChildDIV');
Element.css("left", NonParent.offset().left + NonParent.width() - Element.width());
function sizeChange() {
var container = document.getElementById('container');
var main = document.getElementById('main');
var content = document.getElementById('content');
var h = window.innerHeight;
container.style.height = h;
main.style.height = h*.9;
content.style.height = (h*.9)*.9;
}
document.addEventListener("resize", sizeChange);
I'm trying to manipulate the items in my html so the height of the container is constantly the height of the window and that when it's scaled, the height of the container scales. I have it set up so it gets the ID of each element it's going to manipulate and then adjusts by a % of what I want it to be. Does anyone have any feedback on why this is happening?
I would think most of what you are doing could be done with CSS. If you want to stick with JS, then you need to add units to your values. So change the code to something like
container.style.height = h+"px";
main.style.height = Math.floor(h*.9)+"px";
content.style.height = Math.floor((h*.9)*.9)+"px";
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!
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();
http://jsfiddle.net/u3ay74bs/
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
I am writing a jQuery plugin which makes use of two nested <DIV> elements.
The outer div has a fixed width with overflow:scroll and the inner div (which is much wider) contains the content which I want to scroll around.
This all works fine apart from the fact that I want to use some JavaScript (with jQuery) to set the height of the inner div to exactly match the height of the outer div, less the height of the horizontal scroll bar.
At the moment I'm setting it to the height of the outer div, less about 20 pixels. This sort of works, but it's not going to be browser independent and is definately a hack!
Any help would be very much appreciated!
You need to use element.clientHeight. In jQuery that would be something like:
var heightWithoutScrollbar = $('#outer')[0].clientHeight;
I found a function which can get the width of a scrollbar
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
OS Scrollbars are uniform in width, whether displayed vertically or horizontally, so you can use the width returned as the height of a horizontal scrollbar.
Edit: My original code same didn't work, however I've updated my code to a working function. You can see it in action here: http://jsbin.com/ejile3
The page will alert the width of the scrollbar.