Fiddle <---See Fiddle
Here I want to return the relative distance of two divs with their parent div. It seem that .offsetTopcannot return a correct answer. The result I expected is marked as green lines, the distance in 2 and 3.
And it's strange that why the border of their parent div was also included in the of .offsetTop?
Thanks!
What if you gave .paper{ position:relative }, then the children would have coords offsets relative to it?
http://codepen.io/snypelife/pen/AqtIC
Can't you just subtract the parent's offset top as well:
var re = document.getElementById("result");
var num2 = document.getElementById("2");
var num2Parent = num2.parentNode;
var num3 = document.getElementById("3");
var num3Parent = num3.parentNode;
re.innerHTML="position:<br/>box1 = "+ (num2.offsetTop - num2Parent.offsetTop)+"<br/>box2 = "+ (num3.offsetTop - num3Parent.offsetTop) ;
Related
How to add to the outerHeight() function additional pixels?
So we have a variable, that gets .pg-sect `s outerHeight:
var $section = $('.pg-sect').outerHeight();
And what I want is to add to the height we got additional 70 px. What would the code look alike?
var $section = $('.pg-sect').outerHeight() + 70px;
Okay, let me clarify:
I'd like to add a condition: whether the scrolling area equals to the area of .pg-sect - 100 px before an outerHeight, we do something. And the question is how to get these - 100px of the elements outerHeight
var $section = $('.pg-sect').outerHeight();
//Here you're just assigning a value rather than modifying the element itself
var $section = $('.pg-sect').outerHeight() + 70;
To modify the element:
var $section = $('.pg-sect').outerHeight() + 70;
$('.pg-sect').outerHeight($section);
I tried
document.getElementById('first').style.top = document.getElementById('second')
.style.top + 80;
but that doesn't seem to work. How can this be accomplished?
Yes, you can do it with parsing the position and rebuilding a string with the new value and unit part string.
var match = document.getElementById('second').style.top.match(^(\d+(?:\.\d+)?)(.*)$);
document.getElementById('first').style.top = (parseFloat(match[1]) + 80) + match[2];
Nina Scholz's answer is a really wonderful way to do this. More often, in the wild, you may see two other methods. Either by using getComputedStyle and its getPropertyValue method, or most commonly by using offsetTop and offsetLeft
Get Computed Style Example
Computed Style Example
let div1 = document.getElementById('one');
let div2 = document.getElementById('two');
// we use getComputedStyle to get the top and left of div1
// we use slice to remove 'px' from the property value.
div1Top = getComputedStyle(div1).getPropertyValue('top').slice(0,-2);
div1Left = getComputedStyle(div1).getPropertyValue('left').slice(0,-2);
//we can now manipulate the value any way we please
//and set the values to the second div.
div2.style.top = (div1Top + 30) + 'px';
div2.style.left = div1Left + 'px';
Offset Top and Left Example
Offset Example
let div1 = document.getElementById('one');
let div2 = document.getElementById('two');
div2.style.top = (div1.offsetTop + 30) + 'px';
div2.style.left = div1.offsetLeft + 'px';
Offset is more commonly used because, as you can tell, it's more readable while simultaneously being more concise.
I have this problem. I would like the set to and left position of the element be implemented , which I haven't been able to work it out. Anyone with suggestion of a working solution thanks.
$(document).ready(function (){
//lets assign a value to a variable, but in my case the value is obtained from different part but that has no problem.
//Note in real case this value changes.
var number = 4;
//we create a function to count the top and left dimensions
//Note the values given are exactly as I want. the param given is number of current rect and second is total rect to be drawn.
function dim(i,a)
{
var top = '';
if((i%2)==0){top = 0;}
else if ((i%2)==1){top = ((document.documentElement.clientHeight)*1/3)/2; top = Math.floor(top);}
//We have gotten the top value if odd 0px if even halfway our container.
//Now for the left.
var y = (((a/2)+1)-i);
y = y*(-1);
var W = document.documentElement.clientWidth;
var left = Math.floor(((W/2)+(30*y)));
//alert(top+' , '+left);
return ([top,left]);
}
function draw()
{
//This is the main function.
for (i = 1; i <= number; i++ )
{
var cd = document.createElement('div');
var node = document.createTextNode("This is new.");
cd.appendChild(node);
cd.style.width = '30px';
cd.style.background = 'rgb('+10*i+','+20*i+','+15*i+')';
cd.setAttribute ('position','relative');
var x = Math.floor(((document.documentElement.clientHeight)*1/3)/2);
cd.style.height = x+'px';
cd.className = 'rect'+i;
var di = dim(i,number);
cd.style.top = di[0]+'px';
cd.style.left = di[1]+'px';
document.body.appendChild (cd);
}
}
draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
I do not want it to appear on the same line with no alignment of top and left. thanks.
I want find top position of rotated div from element, I can able find top position of element but I want top(Y pos) position from left(x) position.
I am used this
var degree = degree;
if (degree < 0) {
var sign = -1;
} else {
var sign = 1;
}
var numY = Math.abs(myElem.position().top + sign * ((myElem.outerHeight() / 2) - Math.sin(degree)));
var numX = 0
var bottom = myElem.position().top + myElem.outerHeight(true);
y = numY;
Thanks in Advance
Slope:20 deg, height: 20px,width:400px, left 150px i want find top position
I want to re arrange dragged items after rotation for that I am finding top position.
Please find the jsbin link drop weights into plank.
I think it makes more sense to add the draggable image into the rotated div and to let everything rotate together, rather than worrying about the position of the draggable image. Here is a jsfiddle with your code updated (I only implemented dropping on the right side): http://jsfiddle.net/brendaz/17wwtffz/
drop:
// ...
var offset = ui.draggable.offset();
var rotateOffset = $('.rotatableAra').offset();
// Take the weight out of it's parent div and add it to the rotatable area
ui.draggable.remove();
ui.draggable.addClass("dropped");
ui.draggable.addClass("rightPlankDropped");
$('.rotatableAra').append(ui.draggable);
ui.draggable.css("top", ($('.rightPlank').position().top- ui.draggable.height()).toString() + "px");
ui.draggable.css("left", (offset.left - rotateOffset.left).toString() + "px");
rightArray[ind] = $textval * pos;
// ...
I've been trying to make a javascript to get a X and Y coordinates of a div element. After some trying around I have come up with some numbers but I'm not sure how to validate the exact location of them(the script returns the X as 168 and Y as 258) I'm running the script with a screen resolution of 1280 x 800. This is the script I use to get this result:
function get_x(div) {
var getY;
var element = document.getElementById("" + div).offsetHeight;
var get_center_screen = screen.width / 2;
document.getElementById("span_x").innerHTML = element;
return getX;
}
function get_y(div) {
var getY;
var element = document.getElementById("" + div).offsetWidth;
var get_center_screen = screen.height / 2;
document.getElementById("span_y").innerHTML = element;
return getY;
}
Now the question is. Would it be reasonable to assume that these are accurate coordinates returned by the function or is there an easy to to just spawn a little something on that location to see what exactly it is?
And finally how would I go about making this div element move? I know I should use a mousedown event handler and a while to keep moving the element but yeah any tips/hints are greatly appreciated my biggest concern is to how to get that while loop running.
By far, the easiest way to get the absolute screen position of an element is getBoundingClientRect.
var element = document.getElementById('some-id');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;
// Et voilà!
Keep in mind, though, that the coordinates don’t include the document scroll offset.
Here a simple way to get various information regarding the position of a html element:
var my_div = document.getElementById('my_div_id');
var box = { left: 0, top: 0 };
try {
box = my_div.getBoundingClientRect();
}
catch(e)
{}
var doc = document,
docElem = doc.documentElement,
body = document.body,
win = window,
clientTop = docElem.clientTop || body.clientTop || 0,
clientLeft = docElem.clientLeft || body.clientLeft || 0,
scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
You need to find the position using the parent's position too. There's a very good tutorial here: http://www.quirksmode.org/js/findpos.html
I think you could use jQuery .offset() http://api.jquery.com/offset/
Given the element...
<div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div>
If the element is in the main document you can get the DIV's coordinates with...
var X=window.getComputedStyle(abc,null).getPropertyValue('left');
var Y=window.getComputedStyle(abc,null).getPropertyValue('top');
If the element is in an iframe you can get the DIV's coordinates with...
var X=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('left');
var Y=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('top');
NB: The returned values should be in the format "190px" and "350px".