Welcome to TalkGraphics.com
Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 33
  1. #11
    Join Date
    May 2009
    Posts
    248

    Default Re: Temporarily hiding mobile variant

    Quote Originally Posted by behzad View Post
    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?

  2. #12
    Join Date
    May 2002
    Location
    Canada
    Posts
    1,768

    Default 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.

  3. #13
    Join Date
    May 2009
    Posts
    248

    Default Re: Temporarily hiding mobile variant

    Quote Originally Posted by behzad View Post
    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.

  4. #14
    Join Date
    May 2002
    Location
    Canada
    Posts
    1,768

    Default Re: Temporarily hiding mobile variant

    I like to hear what the other wizards will say about this.

  5. #15
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    8,399

    Default 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
    Acorn - My currently active Xara software: occasionally serviced XDPX, purposely unserviced XDPX12 & XDPX11 (32/64-bit), unserviced XWD Premium 15 & 12, XPGD10, X3D7 and lots of 'permanently-owned' licences back through time (to CC's Artworks)

  6. #16
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    740

    Default 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.
    Attached Files Attached Files

  7. #17
    Join Date
    May 2009
    Posts
    248

    Default 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.
    Last edited by yjs; 28 May 2017 at 12:49 PM. Reason: for clarity

  8. #18
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,408

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  9. #19
    Join Date
    May 2009
    Posts
    248

    Default Re: Temporarily hiding mobile variant

    Quote Originally Posted by Egg Bramhill View Post
    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.

  10. #20
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    740

    Default 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.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •