JavaScript Positioning of a group working on one page but not on another

igor · 2024-09-26T20:47:20.592Z

i have a reusable element on my bubble app that is triggered through a custom event to appear as informational text right next to the element it was clicked on. The reusable element is a floating group type of element. Now, inside of the custom event i have this javascript code: "var trigger = document.getElementById(‘id of the element’);
var panel = document.getElementById(‘InformationalText’);
var rect = trigger.getBoundingClientRect();
panel.style.position = ‘absolute’;
panel.style.left = (rect.right + window.scrollX) + ‘px’; // Align right side
panel.style.top = (rect.top + window.scrollY) + ‘px’; // Align top side
panel.style.display = ‘block’; // Make sure the panel is visible

document.addEventListener(‘click’, function(event) {
var isClickInsideTrigger = trigger.contains(event.target);
var isClickInsidePanel = panel.contains(event.target);
if (!isClickInsideTrigger && !isClickInsidePanel) {
panel.style.display = ‘none’;
}
});" and it’s the last action of the custom event, the process is working for one page but for other page it’s not even when the actions, custom events and elements are the same. what could be the source of error? help me troubleshoot

ihsanzainal84 · 2024-09-27T04:55:16.600Z

Check that the elements have already loaded with the appropriate IDs. If the code runs before the elements appear in the DOM, it won’t find the elements.

To test create a debug action that will run the code after the page has loaded. Make a button that runs the code.

igor · 2024-09-27T12:36:10.450Z

thanks for your comment! but yeah, i already tested that, the element is appearing first and then the code is running, the appropriate IDs are also there, i even added a pause before the code runs and still is not working

ihsanzainal84 · 2024-09-29T00:23:34.466Z

You also tried the debug as I mentioned? With the button?

system · 2024-10-10T20:47:26.249Z

This topic was automatically closed after 14 days. New replies are no longer allowed.