According to w3schools, the relative position value is defined as follows.
relative - The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.
I know that I can get the DOM object of whatever I positioned relatively and using that, I can get the left or top position w/ respect to the origin.
My question is, how can I get the "normal" position?
Thanks,
mj
Maybe, I misunderstand your question, but wouldn't this just be simple subtraction of the relative offset?
"normal" position is where the element will be positioned with left:0; top:0;. You can get this position by substracting the offset from the current position (tested in Chrome):
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#container { width: 100px; height: 100px; margin: 100px auto; border: 1px solid red; }
#item { position: relative; top: 10px; left: 10px; width: 80px; height: 80px; border: 1px solid green; }
</style>
<script type="text/javascript">
window.onload = function () {
var container = document.getElementById('container');
var item = document.getElementById('item');
var computed = window.getComputedStyle(item);
item.innerHTML = 'Normal: (' + (item.offsetLeft - parseInt(computed.left))
+ ', ' + (item.offsetTop - parseInt(computed.top) + ')');
};
</script>
</head>
<body>
<div id="container"><div id="item"></div></div>
</body>
</html>
to normal position just set position value to: static
position:static
Related
I have a div that will be set according to the hovered element position in window. At first I thought this was a JQuery bug, but after more investigating and changing to vanilla, it's still the same.
I have created a code snippet to demonstrate my problem. If you mouse enter white div from top, the position is correct and orange box cover entire white box, but if you enter it from other sides, it's incorrect by few pixel:
var inspector_rect2= document.getElementById('inspector_rect');
$(window).mouseover(function(event) {
inspector_rect2.style.left= event.target.getBoundingClientRect().x+'px';
inspector_rect2.style.top= event.target.getBoundingClientRect().y+'px';
inspector_rect2.style.width= event.target.getBoundingClientRect().width+'px';
inspector_rect2.style.height= event.target.getBoundingClientRect().height+'px';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<style>
html, body {
height : 100%;
margin : 0;
width : 100%;
}
.MyCSS {
background-color : silver;
}
.Container {
height : 100%;
margin : auto;
width : 50%;
}
.Header {
height : 5%;
padding : 2% 0;
width : 100%;
}
.MainContent {
background-color : white;
height : 70%;
width: 100%;
}
.inspector{
position: absolute;
pointer-events: none;
z-index: 999;
background: rgba(255, 166, 0, 0.5);
}
</style>
<body class="MyCSS">
<div class="Container" >
<div class="Header" ></div>
<div class="MainContent" ></div>
</div>
</body>
<div id=inspector_rect class=inspector></div>
It seems to be caused by an interaction between requesting .getBoundingClientRect() and setting width and height.
Generally, you should just make one request, store it, then re-use as needed.
$(window).mouseover(function(event) {
const rect = event.target.getBoundingClientRect();
inspector_rect2.style.left= rect.x+'px';
inspector_rect2.style.top= rect.y+'px';
inspector_rect2.style.width= rect.width+'px';
inspector_rect2.style.height= rect.height+'px';
});
I'm trying to build a 3D viewer with three.js, that has full height but leaves space for a side panel. The vertical layout works as expected, but as soon as I append the render's dom element, a horizontal scroll bar appears.
Attached is a minimal working example. I would expect to just see the (black) canvas element and the red body. But after v.append(renderer.domElement), the page gets larger (filled with blue, html element) and a horizontal scroll bar appears. It seems the page is larger than its body.
See https://jsfiddle.net/5jnvt4jh.
Has anybody an idea, what may be happening there? I couldn't find any margin or padding with Chrome and Firefox. Thanks :).
MWE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>
Change style of body to:
body {
margin: 0px;
height: 100vh;
background-color: red;
overflow:hidden;
}
jsfiddle: https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/
I have a parent div with two child divs. The first child should be fixed when the parent is in viewport. The second child should scroll into position and overlap the first. Both child divs should be removed and follow the parent as soon as they reach the bottom of the parent.
Right now, I'm adding a class on scroll position but I'm not sure how to detect when the child is at bottom of parent and then remove the class.
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= 70) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
How can I make the child divs follow the parent in the best way? I've tried to search for something similar what I want but couldn't find any good explanation.
This fiddle is what I've got so far.
If I am understanding this correctly, what you could do is measure bottom of parent div and child sticky div relative to the document.body, and if child element's bottom crossing parent's bottom you can remove .fixed class.
Something like this.
$(window).scroll(function(){
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= 70) {
sticky.addClass('fixed')
}else {
sticky.removeClass('fixed');
}
if(getBottom('.sticky') >= getBottom('.holder')){
sticky.removeClass('fixed');
}
});
function getBottom(element){
var $elm = $(element);
var offset = $elm.offset();
var top = offset.top;
return top + $elm.outerHeight();
}
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px;
}
div {
width: 300px;
height: 100px;
}
.holder {
border: 1px solid black;
width: 500px;
height: 200px;
position: relative;
}
.sticky {
top:30px;
left:10px;
background: orange;
z-index: 9999;
position: relative;
}
.other-div {
background: gold;
top: 20px;
z-index: 0;
}
.fixed {
position: fixed;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Divs</title>
</head>
<body>
<section>
<div class="holder">
<div class="other-div fixed">This div should stay fixed for a while</div>
<div class="sticky">This div will become fixed on scroll</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Jsfiddle of the above snippet https://jsfiddle.net/azs06/3ubshm4t/7/
Note, I made some css changes, which you can adjust as you need.
I want to get the position of an element relative to its parent element. So for this i am using jquery position function I created a JsFiddle.
In this fiddle i am accessing the top & left position of #child element. It should return top : 0 and left : 0 because it is the children of #p element and its position is relative but it is returning top : 223px and left : 1px. Can anyone please help me ?
here is the tweak
The problem was you did not specify the parent's position as relative. So the child position was calculated with respect to body
<style type="text/css">
#gp {
width: 500px;
height: 200px;
margin: 0;
border: 1px solid black;
background-color:gray;
overflow:hidden;
}
#p {
width: 600px;
height: auto;
float: left;
position: relative;
}
#child{
position: relative;
}
</style>
<div id="gp">
<div id="p">
<div id="child">
</div>
</div>
</div>
jQuery(document).ready(function(){
alert($("#child").position().top + " " + $("#child").position().left);
});
Perhaps something like this :
function relative_pos(node) {
var parentOf = $(node).parent().offset();
var child = $(node).offset();
return {top: child.top - parentOf.top, left: child.left - parentOf.left};
}
console.log(relative_pos("#child"));
Try !!!
I want to detect where in the div with id clickdetectiondiv have i clicked. The code that I am using gives me the position with respect to the top left of the body of the HTML page. I have spent lot of time in figuring out how this could be done but am unable to find the answer.
One solution i have is to subtract the position of this absolutely positioned div. But not always will I get the position of the div, as the screen sizes may vary. Please tell me an alternate method to do this.
Thanks in advance,
<html>
<head>
<script type="text/javascript">
function clicked(event){
var x=event.clientX
var y=event.clientY
document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}
</script>
<style type="text/css">
#clickdetectiondiv{
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 500px;
background: gray;
}
#outputdiv{
position: absolute;
top: 300px;
left: 100px;
height: 100px;
width: 500px;
background: #eee;
text-align: center;
}
</style>
</head>
<body>
<div id="clickdetectiondiv" onmousedown="clicked(event);"></div>
<div id="outputdiv"></div>
</body>
</html>
You want to use a javascript framework like jquery or mootools, they have functions to get relative position of an element to any other element you want already written in a cross-browser manner. Why reinvent the wheel?
If you can use jquery
$('#A').click(function(e) { //Default mouse Position
alert(e.pageX+ ' , ' + e.pageY);
});
I suppose this can be solution:
function clicked(event){
var x = event.x;
var y = event.y;
var divClicked = document.getElementById("clickdetectiondiv");
x -= divClicked.offsetLeft;
y -= divClicked.offsetTop;
document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}