Popup Builder - Before
Pawel
Hi guys, Thank you for all your work you're doing to make our lifes easier.
Your recent extension update - popup builder came to me in very right time :D Anyways. what Im trying to do is to build quite complex within it and and hit the bump. What im trying to do is load js code after all to check size of 1 div to set height of another with observer. But no matter how im trying to load/add the script it always being loaded before popup div. I did try in helix template backend, template index.php or debug position as Pavel advised in some different post and different case.
I dont have any mess on website yet as just testing possibilities on clean j5 + helic ultimate + latest sp page builder.
Could you give any advise how to add custom js script after popup built - before closing body tag?
btw, I have spotted couple of details that you may want to look at with your next updates:
- once you turn off overlay popup general settings (style tab), code appears on top of website: #sp-pagebuilder-overlay-1 { display: none; }. I have worked it around by just setting transparency of overlay colour to 0 but it might be worth looking at
- I don't know if adding popup as menu item should work as it does. currently when you're adding your popup in conditions as new menu item, menu item is being created with link target to sp page builder page so in fact it creates dummy/empty page under popup and when you close popup, there is this empty page. I believe desired result would be to display popup on menu item click but stay on the same page popup was triggered from. (i hope it makes sense).
Anyways, thank you for all your work. really good stuff
edit: subject cut html tag - supposed to be before /body
Pavel
Accepted AnswerHi.
I believe that you do not need to try to add the script after popup built. This will not give anything in your case. Most likely you need to place your entire code in a function that will track some event (like popup built (DOM changes) or click + timeout) and only after that launch your script but not on DOM ready.
You can place all this in custom.js file
Pawel
Accepted AnswerHi Pavel, Thank you for your answer. Well... I have to. To use observer on specific div(s) I have to have this div(s) in the code before observer triggered (resizeObserver). I thought I could solve it with eventListener and check when specific element clicked but it's too much magic for designer and when processing logic in my head seems I will need to cover other use cases like keep listening when screen orientation changes etc. I will play with it over the weekend. But i have found a workaround for timebeing (if anyone will be looking to solve similar case) - creating custom joomla module with js script in it and loading this module with "joomla module" addon in popup below everything. seems to work as expected but I would prefer to not allow scripts in editor after all.
Thanks again Pavel for your help
Atick Eashrak Shuvo
Accepted AnswerHello Pawel,
Thank you for your kind words and feedback! We're glad to hear the Popup Builder extension came at the right time for you.
Unfortunately, loading custom JavaScript specifically after the popup is built and before the closing <body> tag is not possible with the current system. To maintain stability and avoid conflicts, we’ve designed the Popup Builder to prevent third-party modifications to its behavior.
We appreciate your feedback and support—thank you for helping us make our tools even better!
Pavel
Accepted Answer
- creating custom joomla module with js script in it and loading this module with "joomla module" addon in popup below everything. seems to work as expected but I would prefer to not allow scripts in editor after all.
Hi Pawel.
As Atick Eashrak Shuvo wrote, Popup Builder is not intended for such things and you will have to create crutches. Take a look at Engage Box PRO instead. It will allow you to do anything. It has its own fields for custom code, actions builder on board, rich API documentation and tons of JS examples.
Pawel
Accepted AnswerThank you both for your answers, I saw Engage Box extension but I found lack of freedom there. Im not really using popup as intended. What I do is building "huge mega menu-like" like element and to make it work as designed I need to stick parts to specific places on the board. For some reason I found it difficult to add classes for bootstrap flex flow options and stretching. There are lots of "parent" elements generated and something always killing expected result, so resize observer seems to do the job the best without setup with lots of customisations to remember. Anyway, I have sorted it out now and You Pavel showed me right direction - thank you for this.
Thank you guys for your help :)