Deleting a variant

[horse3farm]

I am seeing the same issue as @Egg. The Login box displays in the middle variant, but not in the mobile or wide-screen variant. As Egg's video explains, using the same widget ID for more than one variant can cause it not to render correctly in the others. Sometimes using different IDs for each variant overcomes this issue, but that is not always practical (or possible).

Where one is constrained to retain the same widget ID, Acorn provided a very neat solution which is described in this thread here: https://www.talkgraphics.com/showthr...890#post644890.

Start at the beginning of the thread and there is an example XAR file you can download to see how it works. I tested it a while back using Jotform and it worked perfectly. I have added the steps I followed from Acorn. It's not particularly daunting - would be worth a try.

Do read Acorn's thread first (as I might have missed something en route). https://initiostar.co.uk/demo/formtest/ - don't hammer the submission form too much; it's a live demo.

Hopefully, this approach overcomes your issue.

Thank you for the links. Can I assign UsesJQuery to the placeholder?

[Initiostar]

Thank you for the links. Can I assign UsesJQuery to the placeholder?

To the best of my knowledge yes, but my preference is to create a separate off-page shape with the name UsesJQuery - less likely one might inadvertently delete it.

[horse3farm]

Initiostar...

I got it to work following Acorn's thread. It shows up great on the wide version which is the default! But now on the main and mobile nothing will display. I placed the <span id = “variant0”></span> etc. on each variant (0 for mobile, 1 for main and 3 for wide)
I'm wondering if in the website body code portion (const bkpt = [960, 10000] that I may have the widths incorrect?

My site variants: Mobile 480px up to 720 / Main 960 for between 720-1120 / Wide 1280 for 1120 and above.

My site html:

<script>
var chkVrnt;
const bkpt = [640, 1120, 16000];
function chkWidth(bp) { return bp >
window.innerWidth; }
var vrnt = bkpt.findIndex(chkWidth);
var form = $('#wrapper').appendTo('#variant' + vrnt);

window.onresize = function() {
vrnt = bkpt.findIndex(chkWidth);
if (chkVrnt != vrnt) {
//console.log("Viewport Width: " +
window.innerWidth + " - Breakpoint: " + chkVrnt + "/" + vrnt);
vrnt = bkpt.findIndex(chkWidth);
form = $('#wrapper').appendTo('#variant' + vrnt);
chkVrnt = bkpt.findIndex(chkWidth);
}
}
</script>

Did I mess something up? Thanks.

[horse3farm]

This is the page:
https://lpscu.com/my-mortgage.htm

[Acorn]

This is the page: https://lpscu.com/my-mortgage.htm

h3f, the code block is not in this page.

The breakpoints for your design should be [720, 1120, 10000]

Good luck.

Acorn

[horse3farm]

Thanks. Made that change but it didn't correct anything. For the <span id = “variant0”></span> I have those placeholders off the page, on the widget page. That shouldn't matter, should it?

[Acorn]

Thanks. Made that change but it didn't correct anything. For the <span id = “variant0”></span> I have those placeholders off the page, on the widget page. That shouldn't matter, should it?

That's the code for the Placeholder so it is on the page.
The number each Placeholder has starts at 0 for the smallest and 1 for middle size and 2 for the biggest.

Acorn

[horse3farm]

Confirmed that is correct. Still won't show up. Interesting that nothing on mouseoff layer will show on mobile version. Only a gray bar that is on page background. Is my widget code correct with the wrapper:
<span id =”variant1”>
<div id="wrapper" style="width: 100%; height: auto;">

<script src='https://widget.ellieservices.com/latest/launcher.js'></script>

<div class="em-widget"

data-width="100%"

data-height="800px"

data-min-height="800px"

data-site-id="7633173807"

data-config='{"externalLoginWindow":"false"}'

data-name="ecc-borrower-portal"

data-aria-label="Borrower Portal"

>

</div>

</span>

Thanks!

[Acorn]

Confirmed that is correct. Still won't show up. Interesting that nothing on mouseoff layer will show on mobile version. Only a gray bar that is on page background. Is my widget code correct with the wrapper:
<span id =”variant1”>
<div id="wrapper" style="width: 100%; height: auto;">

<script src='https://widget.ellieservices.com/latest/launcher.js'></script>
<div class="em-widget"
data-width="100%"
data-height="800px"
data-min-height="800px"
data-site-id="7633173807"
data-config='{"externalLoginWindow":"false"}'
data-name="ecc-borrower-portal"
data-aria-label="Borrower Portal"
>
</div>
</span>
Thanks!

You are probably getting nothing as you haven't ended the outer <div> at all.

<span id =”variant1”>
  <div id="wrapper" style="width: 100%; height: auto;">
    <script src='https://widget.ellieservices.com/latest/launcher.js'></script>
    <div class="em-widget"
      data-width="100%"
      data-height="800px"
      data-min-height="800px"
      data-site-id="7633173807"
      data-config='{"externalLoginWindow":"false"}'
      data-name="ecc-borrower-portal"
      data-aria-label="Borrower Portal"
    >
    </div>
  </div>
</span>

Without seeing your design, is this code in Main?
If so, it probably should be variant2 as well.

Do just correct one thing at a time though.

Acorn

[horse3farm]

It's in the wide variant and not in main or mobile. I'll only add it to main and see if it shows up.