vcRBS

@JayVanDyke preloading the popups did the trick. Thank you!

I have an application page that uses the accordion plugin. I am trying to capture the same accordion effect using a lightbox anything plugin. See this test page. As you can see when clicking the test link, the lightbox does not show the tabs, indicating that the accordion effect was not applied to the lightboxed page. Any work around for this? It appears the javascript is not executing on the linked "accordion" page.

@JayVanDyke I think I almost got this resolved. I need to be able to target the style of the iframe resizer: I need to edit the padding as shows in the attachment. I've tried different things, but it does not apply after editing the header injection code. Perhaps I am not placing the code in the right location? <script src="/s/iframeResizer.js"></script> <style> iframe {width: 1px; min-width: 100%;} document.querySelector("#content") {padding: 0px !important;} </style>

@JayVanDyke Looks like that extra line of code worked! I did not have to move anything into the footer. However, it appears to only work on the desktop version of the site. The mobile version seems to be adding a lot of extra margin and does not scale properly.

@JayVanDyke Still no go. Deleted the iframeResizer.min.js file, renamed, and reuploaded iframeResizer.js. Then changed the src reference in the header injection. Chrome Dev tools shows that the file fails to load. However, it is looking for a .map file apparently...

I checked by squarespace files, and the iframeResizer.min.js is listed there.

@JayVanDyke I have contacted the tech support with Populi. Here is the reply: Adam Sentz (Populi Support) Jan 19, 2024, 1:58 PM PST Hi Vadim, I took a look at https://rbs.org/event-registration-3-day and iframeResizer.min.js is not loaded. I tested loading it manually in via my browsers console and then running iFrameResize({ log: true }, '#myIframe') and it works fine (see screenshot). So this issue is entirely on the Squarespace end. First you need to make sure that iframeResizer.min.js is actually loading, then you need to call iFrameResize({ log: true }, '#myIframe') after your iframe wherever you include it. I don't know enough about how Squarespace works to be specific about how to do this, but someone who is familar should be able to give you the steps.

@JayVanDyke So it looks like the populiweb.com domain is able to handle dynamic sizing: This is from the populiweb.com support team. However, I'm not sure how to get it to work. I tried to follow the instruction on https://github.com/davidjbradshaw/iframe-resizer and added the iframeResizer.min.js file to the website. But as to the sample code <style> iframe { width: 1px; min-width: 100%; } </style> <script src="/js/iframeResizer.min.js"></script> <iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe> <script> iFrameResize({ log: true }, '#myIframe') </script> I'm not sure where to place each component. What I have so far is this in the Menu code block: 3 DAYS ========= <iframe id="myIframe" src="https://rbs.populiweb.com/router/forms/respond/g875310357019404d72aafd84465c301289e8615f0cbe01450a725dc7a4757421f2831f8f76ddff7a2d0a38d7d7b2a113834d6ee810a98ac81531a73af7aec017757a0e8f1239a4edef5b4b8391497f431e79e93ae8cfc52ec15325c1c0725286a22aeb56467a41c7aee1092c1d3c?embedded=1" frameborder="0"></iframe> 2 DAYS ========= The Header Injection for that page has: <script src="/s/iframeResizer.min.js"></script> <style> iframe {width: 1px; min-width: 100%;} </style> <script> iFrameResize({ log: true }, '#myIframe') </script> But as you can see here https://rbs.org/event-registration-3-day the height is actually collapsed now. Any suggestions?

Yes, this is my page. Then only thing I cannot adjust is how the form behaves under the rbs.populiweb.com domain.

I am trying to auto-adjust the height of a lightbox that contains an iframe form. https://rbs.org/events/2024/5/30/introduction-to-missions When "Registered to Attend" is clicked, and the user then clicks "Continue" at the bottom of the form, the lightbox should adjust to match the shorter size. The lightbox displays this page: https://rbs.org/event-registration-3-day Which uses a "menu" block to display iframes. Here is a code snippet: 3 DAYS ========= <iframe src="https://rbs.populiweb.com/router/forms/respond/g875310357019404d72aafd84465c301289e8615f0cbe01450a725dc7a4757421f2831f8f76ddff7a2d0a38d7d7b2a113834d6ee810a98ac81531a73af7aec017757a0e8f1239a4edef5b4b8391497f431e79e93ae8cfc52ec15325c1c0725286a22aeb56467a41c7aee1092c1d3c?embedded=1" style="width:1px; min-width:100%; height:1600px" frameborder="0"></iframe> 2 DAYS ========= When "Continue" is clicked in the form, the height remains at 1600px. Any way to overcome this and make the height dynamic?

Still just has the checkout button.

This does not seem to work on a FIVE template site: https://rbseminary.org/gift-store Please advise.

@bangank36 Thank you! I believe it is fixed now. Any help on getting rid of the sidebar?

@bangank36 Yes, that is what I want to hide. What kind of error are you seeing?

Is there any way to show the banner on the main blog page, but not on the article entries. If adding the code #banner-area {display: none} under the Advanced "Post Blog Item Code Injection," it removes the header from both the individual articles and the main blog page.

Anyway to also remove the sidebar?

Site URL: https://rbseminary.org/search Is there any way to remove the sidebar that appears by default on the search page? Apparently the Search page does not have a collection ID so something like this does not work: #yui_3_17_2_1_1664993178234_98 div#sidebar-one-wrapper { display: none !important; } Any help greatly appreciated!