What is the most reliable way to get the absolute position on screen of any element?
I have the problem that when an element above (parent) is added with my methods I can not get the absolute position of an element.
Context: I need to get the absolute position on screen of an element to check if my element which follows the finger (animation made with reanimated) intersects with that element which I can not get the absolute position from.
Methods I have tried:
event.target.measure
Here is the problem that I have a swipe element over the "drop box" and it just produces false positions.
ref.current.measure
This one works but not reliable. It fires about ten times in useEffect and produces only once the correct position.
Are there other things I can try which are reliable?
I do not understand why it is so hard to get the absolute position on screen not relative to the parent.
I am not sure how your code is connected, and not sure if you want to make this feature in hacky way but you can get the absolute position of the element from on layout property https://reactnative.dev/docs/view#onlayout
Related
I am trying to find the absolute position of a view. I can easily get its position using onLayout (#1 #2)
But this only gives the initial rendering position, but if the view is moved around due to scrolling, onLayout function is not firing again.
Can anyone please tell me if there is a way to get the absolute position after a change in view's position?
It will be awesome if there is a function or something that I can call with the view and, it will give its position.
Thanks
RCTUIManager does this same thing. Check out this example.
I have the following project: https://codesandbox.io/s/vue-template-c1rj1
I expect the image to just come up from the bottom of the screen already being in the middle of the page, but it first comes up from the bottom and then moves to the center of the page. I noticed that setting the width of the notification-box class to 100% fixes it but I am not exactly sure why.
The reason this is not working is because the fixed css property positions an element relative to the parent layer. Usually this is the viewport.
However, the transition property creates a new layer for the the Element it is used on. In your case, Vue applies the transition property during the animation - making the notification-box the next parent-layer (with a width of 0).
Positioning your Image 50% (of 0) left, does not do anything.
Once the animation is over, the transition property disappears, making the viewport once again the next parent layer. Now 50% left (of the viewport) gives you the desired result.
I have a paper-dialog-scrollable which is filled with a dom-repeat from a firebase-query. Everything works fine, except paper-dialog-scrollable doesn't scroll to the bottom when firebase adds an entry to the array.
I managed to set a callback whenever the array gets a new entry (basically with an observer on the spliced array, not on the array).
So how do I instruct paper-dialog-scrollable to scroll to bottom from that callback ?
I saw solutions here which don't seem to work.
Thanks for any insight.
As suggested in the link you provided, give the paper-dialog-scrollable some id (e.g pds) and then add the following code:
this.$.pds.$.scrollable.scrollTop = this.$.pds.$.scrollable.scrollHeight;
An element's scrollTop value is a measurement of the distance from the
element's top to its topmost visible content. When an element's
content does not generate a vertical scrollbar, then its scrollTop
value is 0. Learn more about scrollTop.
The element's scrollHeight read-only property is a measurement of
the height of an element's content, including content not visible on
the screen due to overflow. Learn more about scrollHeight.
I have made a demo here: https://plnkr.co/edit/JIZEdd6NoBBnwndbQuFA?p=preview.
I'm trying to implement Affix navigation bar with bootstrap3, According to this example:http://www.w3schools.com/Bootstrap/bootstrap_affix.asp, When i scroll down slowly there's a little flick.I got think a lot, But i couldn't find any solution to fix that. This video shows exactly what i mean: http://sendvid.com/rf8t26hw .
How can fix that?
"flick" as you called is caused by element going from static to fixed position (element with affix class/functionality behaviour). That is causing DOM to move up as the affix element is not occupying the same height in the dom tree.
Solution for that is to have a wrapper around "affixed" element with minimum height declared (and matching the affixed element) so once the affix goes to position:fixed, wrapper would take his place in dom tree and hence eliminate the "bug".
Example code here
I am looking for a way to get the caret x y coordinates inside a contenteditable div, in a similar manner to how you can get the mouse coordinates using window.event since I need to open a pop-up exactly where the user is with the caret inside the contenteditable div. How can I do this? Many thanks!
Here's one approach:
Coordinates of selected text in browser page
However, in some circumstances this will not give you coordinates, in which case you'd need to fall back to inserting an element at the caret, getting its position and removing the element again.