For Javascript or HTML questions that use Element.getBoundingClientRect().
Questions tagged [getboundingclientrect]
148 questions
0
votes
1 answer
get top left coordinates of a modal (jquery kendo-ui)
I have a straight forward draggable modal window via jquery kendu-ui.
My goal is to simply get the screen coordinates of the top left position of a modal, relative to the browser window... I am trying offset and getBoundingClientRect() methods,…
Dr Upvote
- 8,023
- 24
- 91
- 204
0
votes
2 answers
How can i stop setInterval function when my element reach the bottom of the screen?
What I want is when the first (.goccia) element reach the bottom of the screen the set interval function stop.
function spostaGocce(){
var goccia = document.querySelectorAll('.goccia');
for(i = 0; i < goccia.length; i++){
goccia[i].style.top =…
Davide
- 21
- 3
0
votes
0 answers
getBoundingClientRect within svg incorrect only on Chrome
When calling getBoundingClientRect of a div within an svg in order to position other elements outside of the svg accordingly, the top and left values are too high only on Chrome (78.0.3904.108) and Windows 10.
Here is a codepen to demonstrate the…
Andy Bas
- 217
- 1
- 4
- 11
0
votes
2 answers
positioning new element based on position of existing element?
I am using the following code (Javascript within a webpage) to create a 'new' element in the DOM dynamically. I wish to position this say 200px 'below' an existing element. However my output has the positioning of the new element(s) all wrong...as…
Pangit
- 564
- 1
- 7
- 23
0
votes
1 answer
Calculating getBoundingClientRect in percentage
I am already calculating left and top positions using getBoundingClientRect() of child element wrt to parent in px and passinig from one component to another , and able to place the child elements on the expected positions , however I want to make…
Enthu
- 512
- 2
- 13
- 38
0
votes
0 answers
Why getBoundingClientRect().top returns 0 after each alternative pixel scroll?
I want my .row-navigation row to be position-fixed when scrolled. So i used window.onscroll to listen to the scroll event and assign the class .sticky , to .row-navgation row , when scrolled. In the process getBoundingClientRect().top is used.
The…
Jake
- 244
- 2
- 16
0
votes
1 answer
mojs animation firing at object's old location after scrolling
https://codepen.io/mprquinn/pen/OmOMrR/
credit: Mike Quinn
The following code triggers an animation when hovering over a link. As I understand the code, the x and y coords should update the position each time the function is called, as…
froggomad
- 1,747
- 2
- 17
- 40
0
votes
1 answer
React Style props are not reflected in IE, getBoundingClientRect does not have x and y
I have created React.Portal with some inline styles, which are not rendered at all in Internet Explorer.
This is my component.
const {
x, y, height, width,
} = popupAnchorRef.getBoundingClientRect();
return ReactDOM.createPortal(
…
AlexZvl
- 2,092
- 4
- 18
- 32
0
votes
1 answer
getComputedStyle and getBoundingClientRect
I have HTML text and SVG documents containing text, included as external object. I want to keep the size of the HTML text and the text inside the SVG document identically.
Horst Marutz
- 11
- 3
0
votes
1 answer
Ionic Modal doesn't recognize element as "in view" until scroll on iOS
I have a reuseable consent form component that pops up in an ionic modal from various parts of an app that populate it with different text depending on the particular consent or agreement the client is accepting/declining (terms of service/user…
mateotherock
- 235
- 5
- 16
0
votes
1 answer
getBoundingClienRect() retrieve good position of an element the first time but {0,0,0,0} after the second rendering
I'm currently developing an Ionic4/stencil app (with the PWA Toolkit: https://ionicframework.com/pwa/toolkit) and get an issue for get the position of a component.
@Component({
tag: 'app-projects-gallery',
styleUrl:…
Pierre Masquilier
- 11
- 3
0
votes
1 answer
Calculating transform-origin of two overlapping elements
I have an image (represented as green) overlaying a box (represented as blue), and the image is going to be transform: scale()ing in size. When this happens I need all edges of the image to complete their transformation at the same time.
To do this…
Jody Heavener
- 2,704
- 5
- 41
- 70
0
votes
1 answer
getBoundingClientRect() returns the same values for all elements
I am creating a legend for my chart. I need to dynamically select x values for the different elements, based on the width of the preceding element. I am using getBoundingClientRect() for this. The problem is that it is returning the same values…
amateurcoder
- 5
- 2
0
votes
1 answer
Function not being executed. Scroll Event Listener
So, in my HTML I've got a class called .myFeature_info, along with that I've included the following script at the end of the tag.
I'm wondering why the function is not being called while I am scrolling.
Here's the code, I'd love to know the…
Daniel
- 60
- 6
0
votes
1 answer
getBoundingClientRect during throttled scroll event handling
I faced an issue during my project developing, it's related to a difference between getBoundingClientRect values with and without preventive break points during debugging. Trying to minimize repro, I got following.
const scrollHandler = () => {
…
dhilt
- 18,707
- 8
- 70
- 85