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

Bugs
1

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

2

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.

3

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

4

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

5

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