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.
JS - Class Flipper.xar
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
Bookmarks