Woods and Trees !

Sorry to trouble you but I have been struggling all day with what I imagine is a rather easy problem to solve....

I am working on a bilingual website, English/French. To avoid unnecessary duplication and increased possibility of errors I am trying to arrange it so that all the graphics, video links etc are on the 'Mouse Off' layer. I then have two more layers, 'French' and 'English holding the relevant texts correctly formatted in their prescribed positions on the page. The idea was to place two small buttons, cunningly disguised as national flags also on the 'Mouse Off' layer. The user clicks on the icon of his desired language and a link in the Web Properties box, something like:- popup:"english" open "french" close, or vice versa, does the rest.

Unfortunately it doesn't want to play !

Any advice on this problem will be most welcome !

Merci d'Avance...

Someone will probably have a better answer, but why not create two sites, one with English and one With French. When the visitor lands on the home page, she or he has the option to click on cunning flag icons at the top of the page. If the visitor lands on the English site, and wants a site in English, cool. If the visitor prefers French, she or he clicks the adorable petite flag and goes to the French language version.

Basically you will have one site with all the appropriate files and a sub-folder for the other language. The sub-folder will contain the entire website in the other language.

If your site is mysite.com and the sub-folder is called French, then the link to the French language version is mysite.com/French

I was writing a long winded version of the same. Much easier and less prone to mistakes to create two separate versions.

I produced this as an example:

:pointAttachment 127007

The expressions are of the form - popup: open "French" close "English"

Acorn

I have moved this thread to Xara Web Design Chat.

As @gwpriester and @ChrisM suggest, I strongly recommend two separate sites. My website is in Spanish and English, the English being in a subdirectory of the Spanish domain. I do all the work in English, and when it’s finished, I cut and paste the Spanish text for the alternate version.

What you suggest sounds clever, but it is very complicated. Moreover, search engines get confused if they can’t identify the language of the site, and it may end up reducing the likelihood of showing up in search results.

Hi, and thanks for your rapid responses.

As far as making multiple version sites is concerned, I have been there. I have done trilingual holiday letting sites and local museum work. Quick and easy to set up but six months later when the memory cells have been disolved in red wine and you are asked to update and modify they can be a real knicker twister !

I liked Acorn's solution and that is very much like something which I tried and had in mind. Problems are that the initial page has no text until a button is pressed. Everytime you link to another page you have once again to make the language choice.

These issues could be solved if one could set the status of layers 'visible' or 'not visible' in advance. I could be wrong but it appears to me that by default all new layers are off until turned on.
It would be really good if the status of a layer could be optionally transferred to the web page it linked to. Meaning if French was turned on in the index page it would remain on until actively changed.

Maybe this is already possible ? Happen I am asking too much ? Looking forward to hearing your views and suggestions.

Stay safe !

Quote:

---

Originally Posted by zapatak

Hi, and thanks for your rapid responses.
As far as making multiple version sites is concerned, I have been there. I have done trilingual holiday letting sites and local museum work. Quick and easy to set up but six months later when the memory cells have been disolved in red wine and you are asked to update and modify they can be a real knicker twister !
I liked Acorn's solution and that is very much like something which I tried and had in mind. Problems are that the initial page has no text until a button is pressed. Everytime you link to another page you have once again to make the language choice.
These issues could be solved if one could set the status of layers 'visible' or 'not visible' in advance. I could be wrong but it appears to me that by default all new layers are off until turned on.
It would be really good if the status of a layer could be optionally transferred to the web page it linked to. Meaning if French was turned on in the index page it would remain on until actively changed.
Maybe this is already possible ? Happen I am asking too much ? Looking forward to hearing your views and suggestions.
Stay safe !

---

zapatak, I expected the ask for having a pop-up open on page load. I did a simple Page Head Code for this a time back:

Code:

---

<script>
  setTimeout( function(){
    xr_v1(document.getElementById('english').parentNode.parentNode.parentNode);
  }, 1000);
</script>

---

This delays the English Layer opening to an Anchor on the layer Named "english".

Xara already adds <html lang="en"> to the HTML when you use Text tool > Spelling icon > Document language: English (U.K.)

Acorn

Hi Acorn,
Thanks for your reply but unfortunately I don't understand how to use it !
I have added your script to the header page properties of the index page but what else do I need to do ?
I have no experience of anchoring and am feeling a little out of my depth ! I managed to stick an anchor icon to a bit of text but it didn't help...
As is apparant I am pretty clueless in this department but is there some sort of repositry where variables are stored whilst a page is displayed and would it be possible to copy the layer id from this to use in the next page ?
just musing,
Thanks again

zapatak, no worries, I was at lunch.

:pointAttachment 127009

The code block should sit in Web Properties > Page > HTML Code Insertion > HTML code (head).
If you want it on every page then Web Properties > Website > HTML Code Insertion > HTML Code (head).
Change the 1000 to any value. 0 is instant, 5000 is 5 seconds.

In the English layer, any object should have a Name associated with it. I chose the text area. Selection tool > left-click object + Utilities > Names: english. Note I used lowercase here to avoid layer and Name confusion.
In the French layer, any object should have a Name associated with it. I chose the text area. Selection tool > left-click object + Utilities > Names: french. Note I used lowercase here to avoid layer and Name confusion.

The English icon has Web Properties Link as popup: open "English" close "French"
The French icon has Web Properties Link as popup: open "French" close "English"
Both should have Repeat on all pages set.

To put this into production, you probably need to pass a language flag between page links to ensure the called page opens in the same language.

Acorn

Dear Acorn,

Thanks for the help, I now have the english layer opening by default on every page.

Sorry that I didn't get back yesterday but a motorist has demolished a telegraph pole about a hundred yards from the house ! No repair planned before monday but we are just about managing to get online with a very chilled 'Hotspot' on my phone.

Two, at least, things which I don't quite follow.... I have not found a, 'Repeat on all pages' option. in the Web properties Link box.

How do I pass a 'language flag between page links to ensure that the next page continues in the same language' ?

Sorry for being so dim !

Take care

zapatak, the 'Repeat on all pages' option is select the two flags then Arrange > Repeating Object > Repeat on all pages.

How do I pass a 'language flag between page links to ensure that the next page continues in the same language' ? - I need to work that out. It would be a case of including the window.location.search part to any link as "?lang=french" or "?lang=english" with some JavaScript to work with what it finds.

I have no guarantees this will work and I will report back on my progress.

Acorn

zapatak, I have a working solution for you.

It requires explanation:

• Modern browsers have the capability of sessionStorage. This allows persistence across a website's pages where what is set in one page is "known" across all the others. When you close the browser, the session end as does the persisting term and its value.
  
  • I set up a term of 'lang' and told it it could be 'french' or 'english'.
  • If you change all references of sessionStorage to localStorage. If you did this even when the browser is closed, the term is kept and remember.
  
  
• I have included a repeating object, a yellow box, with Link -popup: close "French" "English".
  
  • This has to exist on each page but should be hidden (off-page seems to work).
  • This ensure the pop-up Layers, French and English are properly identified as pop-ups.
  • You may create the layers in different positions in your Page & Layer gallery.
    
    • Keep them adjacent and consistent across pages.
    • In Preview, hover over the box (which is why I set my file up so the yellow box is on the page) and look at the browser Status Line.
    • I see - javascript:xr_ppc(%27xr_xp4%27);xr_ppc(%27xr_xp5%27); - this tells me the French layer is number 4 (counting up from zero) & the English layer is number 5. xr_ppc means close.
  
  
• The country flag buttons need to use this approach so the sessionStorage term can be set.
  
  • Union Jack - javascript: xr_ppo("xr_xp5"); xr_ppc("xr_xp4"); sessionStorage.setItem('lang', 'english'); - xr_ppo means open so we have open 5 (English), close 4 (French) and set lang to english.
  • French Tricolor - javascript: xr_ppo("xr_xp4"); xr_ppc("xr_xp5"); sessionStorage.setItem('lang', 'french'); - we have open 4 (French), close 5 (English) and set lang to french.
  
  
• Checking lang across pages. You have most of the detail explained so the code in Website > HTML Body (code) is simply discovering the lang value and opening and closing layers to suit:
• Code:

  ---

  <script>  setTimeout( function(){
    var lang = sessionStorage.getItem('lang');
    if (!lang) { lang = sessionStorage.setItem('lang', 'english'); xr_ppo('xr_xp5');}
    if (lang == 'english') {
        xr_ppo('xr_xp5');
        xr_ppc('xr_pc4');
    }
    if (lang == 'french') {
        xr_ppo('xr_xp4');
        xr_ppc('xr_pc5');
    }
  }, 200);
</script>

  ---

  It needs a tidy but it works.

:pointAttachment 127031

No Anchors are needed in this solution.

Acorn

Hi Acorn,

Thanks for your detailed solution, I will have a crack at it later today.

Unfortunately our internet situation is going from bad to worse, absolutely no 'Hotspot' available yesterday and the telegraph pole repair reprogrammed to the 30th !

Will keep you posted...

many thanks for all your help

Quote:

---

Originally Posted by zapatak

Hi Acorn,
Thanks for your detailed solution, I will have a crack at it later today.
Unfortunately our internet situation is going from bad to worse, absolutely no 'Hotspot' available yesterday and the telegraph pole repair reprogrammed to the 30th !
Will keep you posted...
many thanks for all your help

---

Thanks for the update. The solution does work off-line, locally.

Acorn

Great solution Acorn =D>

@acorn you never cease to amaze. How did you get so smart?

Quote:

---

Originally Posted by bwood

@acorn you never cease to amaze. How did you get so smart?

---

Bill, you just have to sweat away all the stupid.

Hope you are back on-line with a proper connection.

Acorn

Dear Acorn,

let me apologise for not replying earlier but we have had eight days without internet ! In the current situation this is enough to drive one mad ! Right now we have a blistering 2mbps but this is a lot better than zilch !

I must admit that your detailed instructions are a bit like too much information for me and I made no progress in that department.

However I did more or less complete the small site but unfortunately there is one small question which I hope you have an answer for...

I tried out the idea of making the site with responsive web design, it is more or less successful appart from your trick to make a language appear on start up which doesn't appear to work on the smaller smartphone model.

Clicking the flag icon brings the text in but unlike in the desktop model I have text empty screens when starting on the mobile model.

I enclose the XAR file so that you can see what is or isn't happening.

You may enjoy the slideshows !

Best wishes

I am sorry to say that I have been disappointed in that you seem to have ignored everything I proposed in https://www.talkgraphics.com/showthr...170#post624170.

The flag buttons do not have the right code.
The yellow Placeholder is nowhere.
You decided to place the English and French layers between the MouseOff and MouseOver layers to start with and then mix in a popup1 layer elsewhere and to cap it then re-position the French and Layers above MouseOver.

The code in the yellow Placeholder is trying to determine the layer number for French and English. My original was (4, 5); you set an impossible task of making it (4, 3) and thereafter (6, 5).

To make things right I would have to re-order everything, a task that is properly yours.
It is harsh but if you don't you will never know what has gone wrong when updating your site later on.

In its present state I cannot guess if Variants will work.
I am more than happy to work on it but on a corrected version.

Acorn

Hi Acorn,

No hard feelings :-)

The first glance looked daunting

Although you must remember that I have had no real opportunity to see or get to grips with it for a week. We just had a very unreliable not so hot spot.

I will now try to put some order into the layer structure and flag coding to see if I have a bit more luck.

Sorry

Hi Acorn,

Hope you had a good day despite the dismal performance of your PM !

I think that I have correctly modified the site, i.e. sorted the layer arrangements, inserted the yellow rectangle and modified the flag messages.
I don't understand how to set up a term 'lang' or how to change storage preferences.

Unfortunately it still does not work as one would wish.... No doubt more errors on my behalf but any help would be welcome...

thanks in advance...

Lots of little corrections to Layer Names and their levels.

First go, nothing works with the Variant included.
I deleted it and all is fine.

Tomorrow, I will have a look to see what the problem might be.

It may not be possible but I may have an alternative that is probably cleaner for a SmartPhone.

Acorn

OK, some progress.

Adding a variant blows up the current coding totally, both in the Main and the Variant.
The reason is the popup open & close refers to the right layers but in the background totally new layer numbers are added depending on the number of pages X the number of variants.
Keeping track is next to impossible as I have no direct access to Xara's coding or logic.

I have had to resort to trickery.
Where I refer here to "Country" / "other_Country", you could treat these as "English" / "French".
Do note the Initial case is significant!

Each Flag, again, can use popup: open "Country" close "other_Country". This remains the same across Variants and Main so can be included as a Repeating Group.
Each Flag has a Name of "country" or "other-country" included. Again repeatable.
Do note the lowercase is significant!

Again, Xara throws in a spanner in that each Variant's Name (Anchor) is modified so I have to capture this as well.

So the code just to trigger the pressing of a Flag is like:
javascript: eval(document.getElementById(document.querySelecto r('[id*="_french"]').id).parentElement.href.substr(11)); - the Variants include an underscore.
javascript: eval(document.getElementById(document.querySelecto r('[id*="english"]').id).parentElement.href.substr(11)); - Main is unchanged.

The shapes that do this can now have more code to close Layers, if actually needed, and set the sessionStorage lang value. lang is defaulted in the Page Code Head (currently set to 'english').

I have a play file: :pointAttachment 127091 that I have used to muck around with Level naming as well.

It is important to keep the Levels called French and English (Initial case) throughout.
I would recommend ticking Options > Page Size > Same layers on all pages in document throughout but this is less important, as is the layer ordering, as the above code now goes and finds where the layer is to then get its layer number.

The shapes that hold this code then become transparent and should be soft-grouped over their respective flags.

I have yet to build and test the code to deploy the lang value into opening the right layer regardless of it being a page viewed as Main or Variant.

You now have a dilemma.
I trust my code and if it goes wrong, I trust myself to fix it. Your fallback is then simply to remove the overlays and you still have a working site, albeit with a manual toggle into each language.
I will not necessarily be around to debug things for changes you make.

My current solution works when there is no Variant.
The dilemma is run with what I have done or what I can do.
All you can say is Acorn has treated this as an intellectual challenge, can I afford to run with it for my purposes?

The genesis of this was not wanting to split the site into two forms, French and English.
Another alternative is to produce two (or more) sites from Main and Variant(s) and use my current (working) code in each.
A little extra code to detect the viewport width could be added to always ensure the correct sized website is always seen.

The no code way is have the English text on the MouseOff layer and simply have the French Flag open the French layer and within that have the Union Jack cover the French one with the code to close the French layer.

Acorn

Dear Acorn,

When I started this post I assumed that it was just a simple problem of moving logic variables from one page to another. I now realise that I was completely incorrect and that it is actually advanced Rocket Science! far too complex for my tired grey cells.

As the site is only seven pages long I will have a play with your 'no code' option, although I can foresee problems masking areas of MouseOff....

The simplest option would appear to go for the doubling up of pages using the flags to switch between one set and the other.

Once again I would like to thank you for your help and patience.

All the best

Zap

Quote:

---

Originally Posted by zapatak

Dear Acorn,

When I started this post I assumed that it was just a simple problem of moving logic variables from one page to another. I now realise that I was completely incorrect and that it is actually advanced Rocket Science! far too complex for my tired grey cells.

As the site is only seven pages long I will have a play with your 'no code' option, although I can foresee problems masking areas of MouseOff....

The simplest option would appear to go for the doubling up of pages using the flags to switch between one set and the other.

Once again I would like to thank you for your help and patience.

All the best

Zap

---

Zap, thank you for your understanding.

I at least know it is feasible but sadly requires a lot of fiddling because of the way Xara merges Variants and also Supersites into one amorphous mass of code.
My code is robust enough until Xara changes how it will deliver HTML and then it will all stop.

A No-code option will be cleaner, and safer, in the long run.

Acorn

The heat goes on...

I abandoned the language layer idea and modified the site to display switchable side by side versions, everything works, almost...

One of the pages has a large table widget containing over 300 cells. Hopefully the table will need to be updated on a regular basis as users send in their feedback. Rather than make an English and French version of this page which could be tedious to update, I made a small pop up for the very short bit of descriptive text. So far so good...

Imagine the disappointment when I tested it and discovered that the table does not update across variants thus opening the road for a clumsy fingered operator (me) to introduce multiple errors and inconsistencies.

Any known solutions? import Excel or Filemaker tables for example?

Simple solutions welcome…..

Zap

Quote:

---

Originally Posted by zapatak

The heat goes on...
I abandoned the language layer idea and modified the site to display switchable side by side versions, everything works, almost...
One of the pages has a large table widget containing over 300 cells. Hopefully the table will need to be updated on a regular basis as users send in their feedback. Rather than make an English and French version of this page which could be tedious to update, I made a small pop up for the very short bit of descriptive text. So far so good...
Imagine the disappointment when I tested it and discovered that the table does not update across variants thus opening the road for a clumsy fingered operator (me) to introduce multiple errors and inconsistencies.
Any known solutions? import Excel or Filemaker tables for example?
Simple solutions welcome…..Zap

---

Zap, I will have a look later.

I was disappointed with the failure (complexity) of the Layer Flipper so I had a rethink and came up with a working Name Flipper where what you hide and show are Named objects.
The logic is simpler and immutable across Pages and Variants.

:pointAttachment 127100

You don't need to even have Layers but I kept them as it is good design and easier to work with.
The main difference is each Layer for the English and French Classes is preceded with a bang (!) - !French and !English.
The order is no longer important.
The bang ensure the objects in the layer are published, even if the layer is hidden.

Each French Object is now Named htmlclass="French".
Each English Object is now Named htmlclass="English".
The Flags are on the MouseOff Layer and it may look perverse but their ClassNames are flipped.
Can you see that doing this gives a toggle action to the Flags?
The French Flag is sitting directly on top of the English one.

The Flags share the same code - javascript: ToggleLanguage();ShowLanguage();
ToggleLanguage sets up the sessionStorage"lang".
ShowLanguage simply hides the language just flipped and shows the other.
When each page is accessed ToggleLanguage is run twice to ensure the sessionStorage is primed regardless of how any of the pages are accessed. ShowLanguage is then run.

Moving from Variant page to Main page is seamless.

I kept the code basic so it can be dissected/understood:

Website HTML Code (head)

Code:

---

<script>
    function ToggleLanguage() {
        showLang = sessionStorage.getItem("lang");
        if (!showLang) { sessionStorage.setItem("lang", "English"); showLang = "English"; }
        if (showLang == "English") {
            showLang = sessionStorage.setItem("lang", "French"); showLang="French"; hideLang ="English";
            }
        else {
            showLang = sessionStorage.setItem("lang", "English"); showLang = "English"; hideLang ="French";
            }
    }


    function ShowLanguage() {
    var elLang = document.getElementsByClassName(hideLang);
        for (var i=0; i < elLang.length; i++) {
            elLang[i].style.visibility = 'hidden';
        }
        console.log(showLang + hideLang);
    elLang = document.getElementsByClassName(showLang);
        for (var i=0; i < elLang.length; i++) {
            elLang[i].style.visibility = 'visible';
        }
    }
</script>

---

Website HTML Code (body)

Code:

---

<script>
 ToggleLanguage();
 ToggleLanguage()
 ShowLanguage();
</script>

---

Acorn

Quote:

---

Originally Posted by zapatak

One of the pages has a large table widget containing over 300 cells. Hopefully the table will need to be updated on a regular basis as users send in their feedback. Rather than make an English and French version of this page which could be tedious to update, I made a small pop up for the very short bit of descriptive text. So far so good...

Imagine the disappointment when I tested it and discovered that the table does not update across variants thus opening the road for a clumsy fingered operator (me) to introduce multiple errors and inconsistencies.

Any known solutions? import Excel or Filemaker tables for example?

Simple solutions welcome…..

Zap

---

Zap, you chose to use a Xara Smart Table, which does not LiveShare.
Also frequent updates, just for this one (large) item, will become a chore.

The "solutions" revolve round the use of IFRAMEs in Placeholders. You update a table and the Placeholders present views into this one master table across Variants.
In Main, you have created Dates (? - 1 to 30) across by Locations Down.
In the Variant, it would be cleaner as Locations by Dates, making it taller.

One data input with two views tells me to use Google Sheets.
Once set up no re-publishing.
You would create two Sheets and apply a Copy and Transpose Paste from the first into the second sheet.
I would try this approach first.

Here is a noddy demo: https://docs.google.com/spreadsheets...it?usp=sharing.
@Egg is the ace with Google Sheets and embedding:

• Main - https://docs.google.com/spreadsheets...&range=A1:AG15
• Variant - https://docs.google.com/spreadsheets...3&range=A1:O33

Acorn

I've been in the process of doing exactly that Acorn, adding an editable Google sheet.

However I've hit a problem. The content of the !English layer is always visible and I can't get the content of the !French layer to display.

Any idea what I'm getting wrong?

Quote:

---

Originally Posted by Egg Bramhill

I've been in the process of doing exactly that Acorn, adding an editable Google sheet.

However I've hit a problem. The content of the !English layer is always visible and I can't get the content of the !French layer to display.

Any idea what I'm getting wrong?

---

Egg, you forgot to add the ClassName to your prose.

I placed the Google Sheet Placeholder into a Sheet Layer so it is above everything else.
It could easily be put on the MouseOff Layer.

:pointAttachment 127103

Thank you for your contribution.

Acorn

Ah, missed that. Here's a final version.

Thanks Egg, all looks cleans.

As a concept, what do you think?

Acorn

I'm really impressed Acorn. It will work on a multi-language website which is easy to edit across all variants and the viewer only needs to choose their language option once irrespective of the number of pages. Excellent!

Quote:

---

Originally Posted by Egg Bramhill

I'm really impressed Acorn. It will work on a multi-language website which is easy to edit across all variants and the viewer only needs to choose their language option once irrespective of the number of pages. Excellent!

---

Cheers Egg, the reason i asked was a time back I suggested to xara that shapes on each layer should have the ClassName of the Layer added automatically.

Two reasons:

1. Fault-finding on errant shapes (i.e., where the H**l is that in my design?)
2. To make CSS actions readily accessible to layered shapes.

Acorn

Very sensible suggestion, but like svg inclusion not likely to happen.

Quote:

---

Originally Posted by Egg Bramhill

Very sensible suggestion, but like svg inclusion not likely to happen.

---

Well, one day someone is going to build a killer app elsewhere.

Acorn

Hi Guys,

Wow! what a demo ! it looks enticingly simple but...

The web site has only just gone online, it can't really function before people are free to circulate. I will be contacting YouTube and tourist offices.

I will wait to see the response, if any, before I take the plunge and dive into and hit the learning curve of Google Sheets.

Well done and many thanks, I will be safeguarding your replies just in case....

Zap