getClientBoundingRect is a function that gets a position of element relative to viewport.
Is there a function that is able set value instead?
That's what CSS is for. You use CSS to position your elements in the viewport, and since getting the position of an element relative to a viewport and/or other elements is more problematic, you have getClientBoundingRect (and a lot of other element-specific DOM API methods).
Related
My question is fairly straightforward: How can you find the offsetTop of a child element compared to it's parent element (rather than the window top)?
The definition of offsetTop states that the property will return the value by which a child element is offset from the top of an offsetParent, but this doesn't seem to be the case in this JSFiddle: http://jsfiddle.net/h5KBK/.
My goal is to find the offset of the bolded orange text from the top of the scrollable div, not the window top. Is there any way to do this without calculating the heights of the above elements, paddings, margins, etc. and subtracting it from the offsetTop?
I'm looking for a JavaScript only solution. No jQuery please.
By definition offsetTop returns the top position of the object relative to the top side of its offsetParent element, in pixels.
Now offsetParent needs to be an element with a position other than static. If you change the position attribute of scroll element in your fiddle I get a value of 1012 as opposed to 1110 without the position attribute.
Actually, I did some more research and figured out the answer. The offsetParent must have a specified position:absolute or position:relative declaration, as shown in this JSFiddle: http://jsfiddle.net/h5KBK/1/
I suspect I'm misunderstanding something here, but I want to make sure that I'm not crazy. I have some JS that lazy loads some images. Here is a truncated version of what I'm doing:
jQuery(window).scroll(function() {
self.image_holders = jQuery('.image-holder');
jQuery.each(self.image_holders, function(i, placeholder){
if ( jQuery(placeholder).offset() ){
//compare offsets and load image if appropriate
}
});
});
The matched elements that are below the fold or even just partially below the fold are returning null for offset(). What I am trying to accomplish is to load images that are within a certain threshold below the folder before the user scrolls to it. Is this expected behavior for jQuery? How can I get the value of the offsets before they appear above the fold?
Edit: To clarify these elements i need the offset for are NOT hidden or invisible, they are only 'below the fold'.
Right from the Docs:
Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on
the body element.
While it is possible to get the coordinates of elements with visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
I have a scrollable div somewhere on-screen.
I have a child of that div somewhere in it.
How can I scroll the div to place this child in the center of the visible region?
(How would I determine the visible width and height of the div, and how would I scroll to place a rectangular control centered in this?)
element.scrollIntoView() might be what your looking for.
http://jsfiddle.net/a9s2G/
scrollIntoView docs
If you use jQuery you can try scrollTo plugin.
In pure js this can be done using element.scrollTop. You will need to get position of your element inside <div> and than using that value scroll main div.
To calculate inner element position you will need to get it offset top and left property related to the parent element using offsetTop and offsetLeft properties.
To center your element you may also need to use element.scrollLeft
I'm creating some HTML elements dynamically via JavaScript. Something line this:
var author = document.createElement("div");
author.innerHTML = _feed[i].author;
author.className = "author";
The browser returns offsetHeight = 0 if the element is not added to the document yet.
I want to know the element's height before appending them to the document because if the element's resulting height is too big I need to take some actions (make it smaller), and only after that add it to the document.
My suggestion is to add it to the page with a left margin of -10000 or something, so that it's not visible. Then you can get the dimensions, do what you need, and then change the left margin so that it's where you want it. This is assuming you would use absolute positioning.
But so far as I know, the browser will not report that information on elements not in the DOM.
Dan the problem you are going to have is that unless you add it to the DOM then you can never accurately know what the height will be. The reason for this is that as the element is not in the DOM, it cannot be affected by styles set in CSS or the browsers default styles. Even if the element itself has no specific styles applied to it then its parent element may do, or even its grandparent element (did I just make grandparent element up?).
The only accurate way of getting the height is to place the element exactly where it will sit in the DOM and then detect the height. I don't think visibility:hidden; will work as its presence will still be felt by elements around it (pushing margins around and positioning of other elements).
How about position:absolute; left: -5000px;? That may work.
Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.
If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/
You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method