I am trying to use jQuery's position method to obtain the position of a div. The div has default property for the position property. For some reason it returns Object {top: 0, left: 0}
The HTML for the particular div is shown below:
<div class="col-xs-3" id="increased-width">
<div id="standards">
<label><strong>My Energy Standards</strong></label>
<a class="btn" data-toggle="modal" data-target="#energyStandardModal"><span class="glyphicon glyphicon-info-sign"></span></a>
<br />
</div>
<div id="years">
<h5><strong>My Study Periods (in years)</strong></h5>
<div id="col-1" class="altStudyPeriod"></div>
<div id="col-2" class="altStudyPeriod"></div>
<div id="col-3" class="altStudyPeriod"></div>
<div id="col-4" class="altStudyPeriod"></div>
</div>
</div>
The jQuery code is also shown here:
$(document).ready(function () {
standardDiv = $("#standards").position();
console.log(standardDiv);
});
I also tried using the offset() method but it returns the same values. However, this particular is not located at the origin of the webpage (0,0)
Here's a FIDDLE that might help explain things.
I've used your code, but added some CSS to clarify things.
Borders have been added so your divs can be seen, and a spacer div above your col-xs-3 div to push everything down.
The col-xs-3 parent/holder div needs to have css position: relative.
Note that using .position() on the #standards div gives its position relative to its container div with position: relative - "0" from top (of container div).
Using .offset() on the #standards div gives its position relative to the window - "59" from top (of the window).
JS
$('.putmehere').html( "#standards position.top using .position(): " + $("#standards").position().top );
$('.putmehere2').html( "#standards position.top using .offset(): " + $("#standards").offset().top );
Edit: If you wish, you can add a .spacerdiv10 above your #standards div and see what happens to the top measurements.
duplicate: jQuery get the location of an element relative to window
basically, position returns the css values ( which are correct ), but you seem to want the offset from window.
Edit: Position property denotes the offset from the closest parent container, which has relative positioning. If offset().top returns 0, try comparing it to window's offset as is done in the previously referenced question:
var eTop = $('element').offset().top; //get the offset top of the element
console.log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
Related
I'm attempting to take elements that are statically or relatively positioned and absolutely position them relative their parent container without changing their physical location on the screen.
Here is my approach:
function changePosition(element){
var instance = {};
instance.element = element;
instance.parent = instance.element.parentElement;
instance.dim = instance.element.getBoundingClientRect();
instance.parent.dim = instance.parent.getBoundingClientRect();
instance.element.style.left = instance.dim.left - instance.parent.dim.left + "px";
instance.element.style.top = instance.dim.top - instance.parent.dim.top + "px";
instance.element.style.position = "absolute";
}
changePosition(document.getElementById("thing1"));
changePosition(document.getElementById("thing2"));
The HTML:
<div>
<input id="thing1" />
<input id="thing2" />
</div>
On JSFiddle: http://jsfiddle.net/oumt0nkv/2/
Without the position = "absolute", it calculates and applies left and top as expected. However, when I add that line back in both the left and top get set to 0px.
If I explicitly use 100px instead of variables for the left and top values, it works as expected.
I don't know why this is happening. If the position = "absolute" line was before the lines setting left and top I might understand it. This way, it appears some of these lines of code are happening asynchronously?
This is occurring in both Chrome and Firefox. Thank you!
If #thing1 is statically positioned, it will appear at top-left.
And if #thing2 is statically positioned too, it will be pushed to the right or to the next line by #thing1.
If #thing1 is absolutely positioned with the box offset properties set to auto, it will appear at its static position, i.e. at the place it would be if it wasn't absolutely positioned. That is, at top-left.
But since it's absolutely positioned, it's taken out of flow. So it has no impact on later siblings. Therefore, #thing2 will also appear at top-left, because it won't be pushed by #thing1.
What you can do is iterate backwards. This way, when you get the bounding rectangle, previous siblings won't be absolutely positioned yet, so they will push the current element.
function changePosition(element){
var dim = element.getBoundingClientRect(),
pdim = element.parentElement.getBoundingClientRect();
element.style.left = dim.left - pdim.left + "px";
element.style.top = dim.top - pdim.top + "px";
element.style.position = "absolute";
}
changePosition(document.getElementById("thing2")); // First 2
changePosition(document.getElementById("thing1")); // Then 1
<div>
<input id="thing1" />
<input id="thing2" />
</div>
You are doing it wrong. left and top are set to 0 because you subtract the element's left from the parent element's left, which happen to be the same, so you end up with 0.
What actually happens in the example is that first, the first input is made absolute, which causes the second input to end up in the top left corner of the div, because the first no longer takes up space. Then the second one gets the first treatment as the first.
Solution: calculate the current positions first, then apply position to both of them.
The other answers explain the issue pretty well - by making #thing1 absolute you take it out of the flow, thereby making #thing2 jump to the left, so when you do its recalculation, it's over on the left as well.
One other solution is to defer the updates to the position property until after your code completes. You can do this with setTimeout with a delay of 0
setTimeout(function(){
instance.element.style.position = "absolute";
},0);
http://jsfiddle.net/oumt0nkv/10/
I want to change the position of div according to offset ie top, bottom, left, right is it possible ?
i have tried some jquery but it is not working
$(document).ready(function(){
var offset = $("#myPopup").offset();
$('#popup').css('left',offset.left);
$('#popup').css('top',offset.top);
});
<div id="myPopup"> popup</div>
I am guessing that you did not use a position type in your style. I've put it in your jQuery for easy test, but you better put that in a css...
$(document).ready(function(){
var offset = $("#myPopup").offset();
$('#popup').css('position','relative');//or absolute.
$('#popup').css('left',offset.left);
$('#popup').css('top',offset.top);
});
<div id="myPopup"> popup</div>
I have an unordered list of pictures, and when I hover over one I want the two pictures to the left to fade out, and a div to appear in their place with text. I've gotten this working, except for positioning the div - I've tried this:
div.position({my: 'left top', at: 'left top', of: other_list_item});
but that just returns an Object ( the new location ) of {left: 0, top: 0}.
I've also tried putting the div in another li element, but it's still a no-go. Here's the div HTML:
<div style="width: 255px; height: 110px; position: absolute;" id="name_popup"><p>Jon Jensen</p><p>Chief Technical Officer</p><p>London, England</p></div>
EDIT I'm working on a JSFiddle example, but there's kind of a lot to put in, so idk when it'll be ready. Anyways, I forgot to mention this bit of fun:
when I call .position() by itself on the element that I'm trying to anchor to, it returns the correct offsets, but when I try to use position() on the other element to match their positions, nothing happens.
I did not quite understand the question, but from my reasoning I get that you are trying to position new divs in place of the faded out images, so here is some code that could fit your situation
$('div').click(function(){
//get the positions of the divs to be faded out
var prev_position = $(this).prev('div').position();
var next_position = $(this).next('div').position();
//create and position new divs
$(this).insertBefore('<div style="position:absolute;top:' +prev_position.top+ 'px;left:' +prev_position.left+ 'px;">Replacing DIV</div>');
$(this).insertAfter('<div style="position:absolute;top:' +next_position.top+ 'px;left:' +next_position.left+ 'px;">Replacing DIV</div>');
//hide the divs
$(this).prev('div').fadeOut();
$(this).next('div').fadeOut();
});
Sometimes, if your parent element has a position set, then the .position() will get the position relative to the parent element, and depending in your needs this might throw off your design. So instead you could get the coordinates of the previous and next divs relative to the WINDOW and you could get those like these:
function getPosition($el){
//get the offset coordinates of the recently clicked link
var offset = $el.offset();
var top = offset.top;
var left = offset.left;
//get position of this link relative to the window
var rel_top = top - $(window).scrollTop();
var rel_left = left - $(window).scrollLeft();
}
I have did one example: on scroll down, RHS panel on floating when scroll bar reach the RHS panel header.
http://www.elankeeran.com/test/RHSpanel.htm
But while scroll down RHS panel jump to off screen; I don't why position fixed not referring parent relative position left. it referring body left position.
after changing below css its working fine
#floating-box{position: absolute;width:100%;width:960px; margin:0 auto;}
if anyone known better solution please let me know.
Since you asked why this is happening, see the definition of position : fixed in the CSS spec, notably that
for a fixed positioned box, the containing block is established by the
viewport.
Or, as another site puts it,
the parent element is always the browser window
var wHeight = $(window).height();
$('.right-panel').css("height",wHeight-80);
if ( scrollY > bodyY && isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
// left: wLeft,
top: 10
remove the !isfixed and make it isfixed
I have used jQuery UI library to drag divs within a web page. While dragging, the div changes it's position and modifies CSS postion,top and left properties.
My questions are:
1) Is their a way in javascript to get the values of CSS properties and save on a variable(so that I can submit it to XML)? Those CSS properties are created on real time when dragging the divs.
2) Can I at least read the new coordinates of the div on the webpage?
My goal is to record those values so that when users logs in next time, their modified version of the web page is preserved.
To read the co-ordinates relative to the viewport, use offset():
var offset = $('#someitem').offset();
console.log('top: '+offset.top+'; left: '+offset.left);
To read the co-ordinates relative to the nearest positioned ancestor, use position():
var pos = $('#someitem').position();
console.log('top: '+pos.top+'; left: '+pos.left);
To get CSS properties, just use the css() function:
console.log($('someitem').css('top'));
you can easily get the offset of an element using jQuery.
var offset = $("#some-element").offset();
// Alert the values
alert("top: " + offset.top+ "left: " + offset.left);