Web Variants and Placeholder html

[yellowbird]

I recently made a new website with a placeholder that uses html code. The code functions perfectly in the main site (you can get your code from free at auction nudge). I have a web variant with the site, though it renders in the page in xara on the variant, when you preview through xara or the browser it is just blank. I made a test site with just the place holder and code, resized the place holder to different sizes on additional pages in case the smaller size, length etc was a problem - worked fine. Created a mobile variant with the placeholder, renders in the xara program, but when you preview through xara or a browser, just shows blank. Are there special considerations when using placeholders with code in web variants? Thanks.

[siran]

Could you post the placeholder code? There have been reported similar problems when the placeholder code was missing closing tags.

[yellowbird]

Here is the code: <script type="text/javascript" src="//www.auctionnudge.com/item_build/js/SellerID/a__dot__and__dot__m/siteid/0/theme/responsive/MaxEntries/6/cats_output/dropdown/page/init/show_logo/1/img_size/80"></script><div id="auction-nudge-items" class="auction-nudge"></div>

[jamesd]

Try putting the div before the script

[siran]

I guess that is because all the HTML is added at runtime to the element with id="auction-nudge-items" and if you have the same id on the variant it probably will not be found and updated. IDs have to be unique. Not sure what you can do to fix it.

[jamesd]

ok, as a workaround... just say I have the main page and one variant at 760px.

place into website >> page >> HTML (body)

<script type="text/javascript" src="http://www.auctionnudge.com/item_build/js/SellerID/a__dot__and__dot__m/siteid/0/theme/responsive/MaxEntries/6/cats_output/dropdown/page/init/show_logo/1/img_size/80"></script>
<script>
// for main page
if (document.documentElement.clientWidth > 761) {
    document.querySelector(".auctionScript").innerHTML = "<div id='auction-nudge-items' class='auction-nudge'></div>";
}
// for each variant changing 760 to the variant size
else if (document.documentElement.clientWidth <= 760) {
    document.querySelector(".auctionScript760").innerHTML = "<div id='auction-nudge-items' class='auction-nudge'></div>";
}
</script>

Then place on each variant a placeholder for example on the main variant place <div class="auctionScript"></div> and on a variant of 760 width place <div class="auctionScript760"></div>

Just to note that this will not work on resizing the window but will work on the initial load size of the window

[yellowbird]

I will implement this and let you know how it goes. Thank you very much!

[siran]

I am not very familiar with iframes, so this might need adjustment...
There is a small htm file attached to the placeholder on the first page.
Both variant placeholders just include the attached file in an iframe.
Tested in preview, IE11, and current versions of Chrome, FireFox and Opera.

[yellowbird]

Sorry I haven't replied sooner. Thank you for the xar file, I think understand what you are doing there and both main and variant view right in my web designer premium view. I think I will have to make a basic html page with the actionnudge code in the body of the page. I can can either edit your code for the placeholders or create a directory and html page with the same names locally and on the website. I don't quite understand is how the xar file attaches the html file with it so I am able to preview. Thank you again.

[vectorspace]

I have a similar problem I posted about at the following forum page. Has this been solved? Interesting idea to create an external htm/html file for the form and just include it in <iframe> if that works.

http://www.talkgraphics.com/showthre...nt+center+text