How do I get the position of a Div relatively to its parent Div? Using .position() and .offset() always gives me its position to the document.
HTML:
<div id="frame">
<div id="inner"></div>
</div>
CSS:
Let's assume frame is centered with margin: auto; and width: 1024px.
inner has left: 300px;, top: 200px and position: relative;.
What I want:
A nice function for getting inners's position data 300 and 200 (e.g. without px when using .css('left') etc.
Is there anything?
If you give the parent a "position" of "relative", then using .position() should be its position inside of the parent.
Using .offset actually should always give you its position based off the document, while using .position gives you its "position" based off its first parent whose "position" is not "static" (default).
Here's examples:
http://jsfiddle.net/Z2VNx/
http://jsfiddle.net/Z2VNx/1/
The first example uses <br /> to add space at the top of the container, while the second example uses padding-top to add space at the top of the container. Both return a value greater than 0 for the child's top position.
The only problem is that position does not account for the child's margins, padding, and borders when calculating its position. This is because all of those are part of the element, so even though you may not visually see them, they wouldn't be included in the element's position calculation. So of course, depending on exactly what part of the element you want to see its position of, you need to add that to the result of .position. Some people want the "position" to return to top-left position of the border, which would mean adding the margin. Something like this:
http://jsfiddle.net/Z2VNx/2/
Related
I have something like a carousel with elements inside of a container with overflow: hidden
I can scroll left and right and I want to determine which elements are not visible at all or only half is visible (like on this picture) and when add to this invisible and half visible elements a class.
Width of each element is for example 100px but width of container depends on screen size. I can get number of elements which are visible (by dividing offsetWidth of container by width of one element)
Alse I know that there is such thing as getBoundingClientRect() but not sure how to use it in this case.
example
Here you can see how I try to implement getBoundingClientRect but I can't figure out which elements to target. I want to add class to the div which is partially seen (4th) and if on the first click part of the first div would be seen - to it too.
I'm running into an issue hiding graphs in a modal. The user can click through the modal and the click events are hiding the other elements. However, some of the charts are out of the flow of the document by the hidden charts with position:absolute. I read up on position: absolute on MDN and the elements should be placed to their closest parent and they're not. Am I missing something?
absolute
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
Screenshots
Graph in intended flow
Other Charts out of flow
Code
$(".table-bordered").css({'visibility': 'hidden'});
$(".kendoOptionsLinear").css({'visibility': 'hidden'});
$(".kendoOptionsChart").css({'visibility': 'hidden'});
$(".kendoOptionsRadial").css({'visibility': 'visible'});
<div style="position:relative">
<div kendo-chart class="kendoOptionsChart"
k-options="options1" style="position:absolute;"></div>
<div kendo-radialGauge class="kendoOptionsRadial"
k-options="options2" style="position:absolute;"></div>
<div kendo-linearGauge class="kendoOptionsLinear"
k-options="options3" style="position:absolute;"></div>
<div kendo-radialGauge class="kendoOptionsRadial"
k-options="options4" style="position:absolute;"></div>
</div
When you apply the CSS style visibility: hidden, the element you have hidden is still part of the document flow. Though you cannot see the element, it takes up space in the layout and affects where sibling elements appear in the layout.
If you want to hide an element and not have that element continue to take up space and affect where other elements appear, use display: none
Elements with absolute position are taken out of the document flow. Their position is relative to the viewport. For example, an absolutely positioned element with top: 10px; left: 10px; would appear in the upper left hand corner of the viewport, 10 pixels from the top and 10 pixels from the left. If however, the parent container has position: relative, the absolute position of the child will be relative to its parent. Thus, the child would be 10 pixels from the top and 10 pixels from the left of its parent. not the viewport.
I hope this helps.
I have a div called .A coded as height:auto that has a height rendered based on the text contained within. I have another div on the page called .B that I need to animate down using jQuery based on the height of the first div, .A.
I have attempted using the following jQuery function, without much luck. The idea was to have jQuery ascertain the height of .B then apply a padding to .B, however it is not grabbing the correct height. I have also tried using 'marginTop'
jQuery('div.A').animate({'paddingTop': jQuery('div.B').height()},500);
Desparate for help! Will pay with up-votes and generous compliments.
I think you need .outerHeight(true):
jQuery('div.A').animate({ paddingTop : jQuery('div.B').outerHeight(true)},500);
Description for .outerHeight() from docs
Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
Note:
The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.
<div style="width: 50px;">
<div id="theElement" style="position: relative; left 25px;">textMuchLongerThan50[</div>
</div>
document.getElementById("theElement").clientWidth always returns 50, which is width of the parent element, while it is obvious the element's content is much wider
(The element itself actually has this width, but I need to know its "natural" width, i.e. width of its content.)
Experiencing this behaviour in Chrome and IE. If anoyne knew how to determine the actual dimensions of a relatively positioned DIV residing in another DIV with pre-set/limited width...?
You are interested in scrollWidth: Example
This is because it's a block element, and it is actually taking its width from its parent. The text inside it is overflowing outside of its container, but isn't affecting the container's actual width.
You can prove this by adding a border style to the inner <div>.
You can cause the element to take its width from the width of the text by changing its display type.
If you set it to display:inline-block;, it will report the correct width.
And if you add a border now, you'll notice that it has changed as well.
Is there a way of finding the absolute position of an element, i.e. relative to the start of the window, using jQuery?
.offset() will return the offset position of an element as a simple object, eg:
var position = $(element).offset(); // position = { left: 42, top: 567 }
You can use this return value to position other elements at the same spot:
$(anotherElement).css(position)
Note that $(element).offset() tells you the position of an element relative to the document. This works great in most circumstances, but in the case of position:fixed you can get unexpected results.
If your document is longer than the viewport and you have scrolled vertically toward the bottom of the document, then your position:fixed element's offset() value will be greater than the expected value by the amount you have scrolled.
If you are looking for a value relative to the viewport (window), rather than the document on a position:fixed element, you can subtract the document's scrollTop() value from the fixed element's offset().top value. Example: $("#el").offset().top - $(document).scrollTop()
If the position:fixed element's offset parent is the document, you want to read parseInt($.css('top')) instead.
In case the element is not visible $(element).offset(); and $(element).position(); retun 0 for both top and left instead of the elements real value.
i had to use
parseInt($(element).css("top"))
parseInt($(element).css("left"))
to return the needed information.
the element has position: absolute;.