How to listen for changes in getBoundingClientRect()?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a method that checks if an element is overflowing off screen and offsets its position so the element appears onscreen. My problem is that I need to to detect if the element changes position, because that's the event that triggers my method.
The closest thing JS offers to a native event handler is MutationObserver, however that's a bit too broad for my purposes. I only want to listen for repositioning of specific elements. There's also the transitionend event, but that only works for elements with css transitions.
Is it possible to write a CustomEvent that fires only when elements are repositioned relative to the window? Or is there a native event that will do what I am trying?
Here is a sample that shows how my method works (the method works; I'm not asking for help here, just providing details):
// FETCH ELEMENT POSITION RELATIVE TO WINDOW
let positionData = el.getBoundingClientRect();
//CHECK TO SEE IF ELEMENT OVERFLOWS
if (positionData.left < 0) {
let overflowAmount = 0 - positionData.left;
//OFFSET ELEMENT POSITION EXACTLY BY OVERFLOW AMOUNT
el.style.transform = `translate(${overflowAmount}px, 0px)`;
}
javascript css layout javascript-events position
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
add a comment |
I have a method that checks if an element is overflowing off screen and offsets its position so the element appears onscreen. My problem is that I need to to detect if the element changes position, because that's the event that triggers my method.
The closest thing JS offers to a native event handler is MutationObserver, however that's a bit too broad for my purposes. I only want to listen for repositioning of specific elements. There's also the transitionend event, but that only works for elements with css transitions.
Is it possible to write a CustomEvent that fires only when elements are repositioned relative to the window? Or is there a native event that will do what I am trying?
Here is a sample that shows how my method works (the method works; I'm not asking for help here, just providing details):
// FETCH ELEMENT POSITION RELATIVE TO WINDOW
let positionData = el.getBoundingClientRect();
//CHECK TO SEE IF ELEMENT OVERFLOWS
if (positionData.left < 0) {
let overflowAmount = 0 - positionData.left;
//OFFSET ELEMENT POSITION EXACTLY BY OVERFLOW AMOUNT
el.style.transform = `translate(${overflowAmount}px, 0px)`;
}
javascript css layout javascript-events position
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
Somehow it looks like you'd needposition: fixedfor the element ..?
– Teemu
Jan 4 at 18:32
No, the method works fine. The question is about how to detect repositioning of an element
– Jeremy Gottfried
Jan 4 at 18:34
If MutationObservers are not to be used, I suppose only you can do is to integrate your method call with all the code and events which can change the position of the said element.
– Teemu
Jan 4 at 18:36
That's a good idea, but would require a lot of code because the repositioning is not caused by the element itself. It's caused by its relative positioning to other elements.
– Jeremy Gottfried
Jan 4 at 18:49
In that case a Mutation Observer begins to sound not that broad ..?
– Teemu
Jan 4 at 18:55
add a comment |
I have a method that checks if an element is overflowing off screen and offsets its position so the element appears onscreen. My problem is that I need to to detect if the element changes position, because that's the event that triggers my method.
The closest thing JS offers to a native event handler is MutationObserver, however that's a bit too broad for my purposes. I only want to listen for repositioning of specific elements. There's also the transitionend event, but that only works for elements with css transitions.
Is it possible to write a CustomEvent that fires only when elements are repositioned relative to the window? Or is there a native event that will do what I am trying?
Here is a sample that shows how my method works (the method works; I'm not asking for help here, just providing details):
// FETCH ELEMENT POSITION RELATIVE TO WINDOW
let positionData = el.getBoundingClientRect();
//CHECK TO SEE IF ELEMENT OVERFLOWS
if (positionData.left < 0) {
let overflowAmount = 0 - positionData.left;
//OFFSET ELEMENT POSITION EXACTLY BY OVERFLOW AMOUNT
el.style.transform = `translate(${overflowAmount}px, 0px)`;
}
javascript css layout javascript-events position
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
I have a method that checks if an element is overflowing off screen and offsets its position so the element appears onscreen. My problem is that I need to to detect if the element changes position, because that's the event that triggers my method.
The closest thing JS offers to a native event handler is MutationObserver, however that's a bit too broad for my purposes. I only want to listen for repositioning of specific elements. There's also the transitionend event, but that only works for elements with css transitions.
Is it possible to write a CustomEvent that fires only when elements are repositioned relative to the window? Or is there a native event that will do what I am trying?
Here is a sample that shows how my method works (the method works; I'm not asking for help here, just providing details):
// FETCH ELEMENT POSITION RELATIVE TO WINDOW
let positionData = el.getBoundingClientRect();
//CHECK TO SEE IF ELEMENT OVERFLOWS
if (positionData.left < 0) {
let overflowAmount = 0 - positionData.left;
//OFFSET ELEMENT POSITION EXACTLY BY OVERFLOW AMOUNT
el.style.transform = `translate(${overflowAmount}px, 0px)`;
}
javascript css layout javascript-events position
javascript css layout javascript-events position
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
edited Jan 4 at 18:35
Jeremy Gottfried
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
asked Jan 4 at 18:25
Jeremy GottfriedJeremy Gottfried
8110
8110
Somehow it looks like you'd needposition: fixedfor the element ..?
– Teemu
Jan 4 at 18:32
No, the method works fine. The question is about how to detect repositioning of an element
– Jeremy Gottfried
Jan 4 at 18:34
If MutationObservers are not to be used, I suppose only you can do is to integrate your method call with all the code and events which can change the position of the said element.
– Teemu
Jan 4 at 18:36
That's a good idea, but would require a lot of code because the repositioning is not caused by the element itself. It's caused by its relative positioning to other elements.
– Jeremy Gottfried
Jan 4 at 18:49
In that case a Mutation Observer begins to sound not that broad ..?
– Teemu
Jan 4 at 18:55
add a comment |
Somehow it looks like you'd needposition: fixedfor the element ..?
– Teemu
Jan 4 at 18:32
No, the method works fine. The question is about how to detect repositioning of an element
– Jeremy Gottfried
Jan 4 at 18:34
If MutationObservers are not to be used, I suppose only you can do is to integrate your method call with all the code and events which can change the position of the said element.
– Teemu
Jan 4 at 18:36
That's a good idea, but would require a lot of code because the repositioning is not caused by the element itself. It's caused by its relative positioning to other elements.
– Jeremy Gottfried
Jan 4 at 18:49
In that case a Mutation Observer begins to sound not that broad ..?
– Teemu
Jan 4 at 18:55
Somehow it looks like you'd need
position: fixed for the element ..?– Teemu
Jan 4 at 18:32
Somehow it looks like you'd need
position: fixed for the element ..?– Teemu
Jan 4 at 18:32
No, the method works fine. The question is about how to detect repositioning of an element
– Jeremy Gottfried
Jan 4 at 18:34
No, the method works fine. The question is about how to detect repositioning of an element
– Jeremy Gottfried
Jan 4 at 18:34
If MutationObservers are not to be used, I suppose only you can do is to integrate your method call with all the code and events which can change the position of the said element.
– Teemu
Jan 4 at 18:36
If MutationObservers are not to be used, I suppose only you can do is to integrate your method call with all the code and events which can change the position of the said element.
– Teemu
Jan 4 at 18:36
That's a good idea, but would require a lot of code because the repositioning is not caused by the element itself. It's caused by its relative positioning to other elements.
– Jeremy Gottfried
Jan 4 at 18:49
That's a good idea, but would require a lot of code because the repositioning is not caused by the element itself. It's caused by its relative positioning to other elements.
– Jeremy Gottfried
Jan 4 at 18:49
In that case a Mutation Observer begins to sound not that broad ..?
– Teemu
Jan 4 at 18:55
In that case a Mutation Observer begins to sound not that broad ..?
– Teemu
Jan 4 at 18:55
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54044255%2fhow-to-listen-for-changes-in-getboundingclientrect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54044255%2fhow-to-listen-for-changes-in-getboundingclientrect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Somehow it looks like you'd need
position: fixedfor the element ..?– Teemu
Jan 4 at 18:32
No, the method works fine. The question is about how to detect repositioning of an element
– Jeremy Gottfried
Jan 4 at 18:34
If MutationObservers are not to be used, I suppose only you can do is to integrate your method call with all the code and events which can change the position of the said element.
– Teemu
Jan 4 at 18:36
That's a good idea, but would require a lot of code because the repositioning is not caused by the element itself. It's caused by its relative positioning to other elements.
– Jeremy Gottfried
Jan 4 at 18:49
In that case a Mutation Observer begins to sound not that broad ..?
– Teemu
Jan 4 at 18:55