It all depends.
I have tested the code in Firefox, IE11, Chrome and Opera on Windows 7 (64 Bit).
The only other device I have access to is an Android tablet. Which I will test some time later, hopefully today.
There is no way I could ensure it is working on other systems as it very likely is browser dependent. The code already is that complex because of inconsistencies between Firefox, IE and Chrome.
If you want to give it a try consider the following:
If you are using the same page width of the main variant (the one you want to be forced to display) on all pages in your document you should put the code at the site head (so it is automatically added to all pages) and just adapt the 640 to your actual page width.
If you are using different page widths you will have to put the code to the page head (to each page separately) and adapt the 640 to the width of your individual pages. BUT that will not correctly work if you are using a supersite.
Alternatively to putting the code to the individual pages you could allow multiple page width in the code and put it on the site head. For example, by replacing the condition
Code:
parseInt(X.cssText.slice(pos+6))==640
with
Code:
[640,680,720].indexOf(parseInt(X.cssText.slice(pos+6)))>=0
you can force every variant that has a page width of 640, 680 or 720 pixels to be displayed. This off course would result in a mess if you have one variant of 640 and another variant of 720 pixels on the same page.
Now an attempt to explain how it works:
Xara creates and includes a CSS file (xr_all.css) when using variants. The script searches for the CSS and builds an alternative version of it.
This CSS file contains a block of text for each page on each variant (which makes 6 blocks of text on a two page document with three variants). This is what such a block usually looks like:
Code:
@media screen and (min-width: 560px) and (max-width: 799px) {
.xr_mvp_1 {display: none;}
.xr_mvp_2 {display: block;}
.xr_mvp_3 {display: none;}
.xr_pbd {margin-left: -320px;}
#xr_xr {width: 640px; height: 266px}
}
If the variant is the smallest for the page in the first line the "and (min-width: 560px)" would be missing and if it is the widest then "and (max-width: 799px)" would be missing.
The script just copies all these blocks of text and compares the width given in the line "#xr_xr {width: 640px; height: 266px}" with the width specified in the code.
If it matches then the variant is forced to be displayed by changing the first line to
Code:
@media screen and (min-width:2px){
which assumes that the browser width is always at least tow pixels wide.
If it doesn't match the variant is hidden by changing the first line to
Code:
@media screen and (max-width:1px){
which assumes that the browser width is never only one pixel wide.
If anything goes wrong (for example the #xr_xr line could not be found in the text blocks) then the script simply does nothing.
But if everything looks good the CSS included by Xara is disabled and the modified version is added to the document.
Don't hesitate to ask if you need a more specific explanation.
When you are ready with creating the variants just remove the code.
Bookmarks