Add a Name of UsesJQuery to any object
<script>
var chkVrnt;
const bkpt = [960, 10000];
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>
<span id ="variant1">
<div id="wrapper" style="width: 100%; height: auto;">
<iframe
id="JotFormIFrame-92254454186360"
title="OmniTicker Download"
onload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allowfullscreen="true"
allow="geolocation; microphone; camera"
src="https://form.jotformeu.com/92254454186360"
frameborder="0"
style="min-width: 100%; height: 800px; border:none;" scrolling="no">
</iframe>
</div>
</span>
Any third party widget that uses an “id” will likely mean that the widget will be visible (and correctly display) in ONE variant ONLY, regardless of
whether the designer has copied and pasted that widget into the other variants; this is usually an issue where the widget is dynamically collecting
data that requires the visitor to input information.
This is the Talk Graphics thread by Acorn that explains the solution. https://www.talkgraphics.com/showthread.php?86040-Variant-Dilemmas-
quot-Solved-quot. Remember to:
STEP 1
The key to this working is there is ONLY one copy of the widget and this can be placed on any ONE of the variants in a ‘wrapper’. Create a
placeholder, copy the the iframe code for the third party widget and wrap it within the code highlighted in blue below. This combined code goes
into the placeholder (body). Do the editing with a text editor such as Notepad ++.
STEP 2
The code opposite checks which variant is being
viewed from its browser width and allows the
widget to be correctly displayed in that variant.
In this example there are two variants and the
midpoint is 960px. The other value is an upper limit
( just a large number and 10000 works). If there
were 3 variants “const bkpt” opposite would have a
middle value to reflect its breakpoint between the
the second and third variant.
THIS CODE IS PLACED IN THE WEBSITE HTML (body)
STEP 3
Create a placeholder(s) on the other variants and insert a single
line of code in HTML (body):
<span id = "variant0"></span>
The variant numbers start with “0” for the smallest variant,
upwards 1, 2 to the largest variant. In this example there are only
two where variant0 is the mobile and variant1 is the desktop.
This Is An Example For Managing 3rd Party Widgets Across Multiple Variants
DESIGN NOTES