Re: Temporarily hiding mobile variant
Quote:
Originally Posted by
behzad
You can paste this to your home page when ready.
<script type="text/javascript">
<!--
if (screen.width <= 480) {
document.location = "http://domainname.com/mobilename";
}
//-->
</script>
You can change the 480 px to 600 or 800 depending on your needs.
Don't think my original reply to this went through.. Thanks for the suggestion. But surely when I'm ready to publish both variants (deleting the mobile version before each publish in the meantime), the Xara coding would automatically redirect mobile users to the correct version. Or am I missing something?
Re: Temporarily hiding mobile variant
If you delete the mobile version then there is no reason why the main site should direct it to your custom mobile version, unless you put the above code into the index page of your main site. If anyone else thinks I am wrong, please let us know.
Re: Temporarily hiding mobile variant
Quote:
Originally Posted by
behzad
If you delete the mobile version then there is no reason why the main site should direct it to your custom mobile version, unless you put the above code into the index page of your main site. If anyone else thinks I am wrong, please let us know.
Perhaps my query wasn't clear. I need to hide the mobile version only while developing it. So I'm currently doing, as Gary recommended:
Save your site. Then save your site with a new name, for example Desktop only. Delete the Mobile Variant and publish.
When the mobile version is ready to publish I will publish the complete version (desktop and mobile). So if I understand correctly, there should never be a need for extra code.
Re: Temporarily hiding mobile variant
I like to hear what the other wizards will say about this.
Re: Temporarily hiding mobile variant
No code, treat the design with Main and Variant as the Master.
Clone it on every publishing revision but remove the Variant before publishing.
When happy, publish the Master.
Acorn
1 Attachment(s)
Re: Temporarily hiding mobile variant
Off course it can be done with a script ;). Here is an example.
The script is at the site head. It is not a very beautiful solution but works for me.
You choose the variant to force to view by specifying its width in the script (replace the 640 with the width of your main variant).
Maybe I should mention that it doesn't work when started from a local file in Chrome and Opera, but it works fine in preview.
Re: Temporarily hiding mobile variant
Thanks Acorn - yes, this is indeed what I am doing.
Siran, thanks but I am again confused about when exactly I would use this code and what it would accomplish. Surely the only way to make sure that the draft mobile version never displays is not to publish it. And then when the mobile version is ready and I do publish it, there's no need for any code beyond that which Xara automatically generates.
Re: Temporarily hiding mobile variant
I think you're chasing your own tail here yjs. Just stick with Gary's method. The other methods work equally as well but seem to be confusing you so go with what you understand ;)
Re: Temporarily hiding mobile variant
Quote:
Originally Posted by
Egg Bramhill
I think you're chasing your own tail here yjs. Just stick with Gary's method. The other methods work equally as well but seem to be confusing you so go with what you understand ;)
Thanks but that's not quite the situation. Gary's solution indeed works but it is very time-consuming and does appear to require publishing the whole site for each minor change. So I'm in interested in a workaround (if completely reliable - i.e. draft mobile version would never display) where I'd insert some code into one of the variants. But I don't understand the workflow of the code mentioned, and how it would help. i,e. In which version (mobile/desktop) would the code be inserted and in what stage of the process? Would it need to be in all pages of the variant? What exactly would it do and for which browsers/user settings/scenarios might it not work? Sorry for being so dense but I really would like a simpler solution where I could work on both variants at my leisure and then just do some minor alterations to make the mobile version live.
Re: Temporarily hiding mobile variant
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.