Hey everyone,
I do a lot of work with switching between languages in the modules. I can accomplish this by creating a lot of tedious "Show" and "Hide" advanced actions for the numerous texts that need to be displayed, but being a programmer I think there's a better way through the use of a single Javascript script.
This is how I believe it will work when finished:
The script goes through the DOM and retrieves all elements that have the class cp-frameset which is common to all entered text fields. It then goes through and sorts these DOM elements that were retrieved into separate arrays based on ID because all English texts have English_1_1 (the English prefix) and all other languages (such as German) has the German prefix (like German_1_1). Doing this, I can have numerous and indefinite arrays of ID's for each different language. Then, the theory was, that I would go through and as a slide loads check the language user defined flag (0 for english, 1 for german, 2 for spanish, etc. etc.) and based on that go through each array which contains the ID's for every text element and then set each DOM's style.visibility to 'visible' or 'hidden' based on what the language flag is. The code follows (only contains two languages for ease):
var englishElements = new Array();
var germanElements = new Array();
var languageFlag = cp.variablesManager.getVariableValue('language');
console.log("languageFlag "+languageFlag);
function findElements(){ //Function to find all English/German elements, split into arrays for display/hiding
var theElements = document.getElementById("div_Slide").getElementsByClassName("cp-frame set");
console.log(theElements);
for(var i = 0; i < theElements.length; i++){
if(theElements[i].id.lastIndexOf("English", 0) === 0){ //Getting all ElementID's that have English as the prefix, for looking up later (need to maintain unique suffix)
englishElements.push(theElements[i].getAttribute('id'));
}else if(theElements[i].id.lastIndexOf("German", 0)===0){ //Getting all ElementID's that have German as the prefix, for looking up later
germanElements.push(theElements[i].getAttribute('id'));
}
}
}
findElements();
console.log(englishElements);
console.log(germanElements);
function hideElements(langFlag){ //Function for hiding elements based on the language flag set by the user by clicking buttons in the module
if(langFlag == "0"){ //English case
for(var i = 0; i < englishElements.length; i++){ //Showing english elements
var engElement = document.getElementById(englishElements[i]);
console.log("showing ");
engElement.style.visibility = 'visible';
}
for (var j = 0; j < germanElements.length; j++){ //Hiding german elements
var germElement = document.getElementById(germanElements[i]);
console.log("hiding");
germElement.style.visibility = 'hidden';
}
}else if(langFlag == "1"){ //German case
for(var i = 0; i < englishElements.length; i++){ //Showing english elements
document.getElementById(englishElements[i]).style.visibility="hidden" ;
console.log("hiding "+englishElements[i]);
}
for (var j = 0; j < germanElements.length; j++){ //Hiding german elements
document.getElementById(germanElements[i]).style.visibility="visible" ;
console.log("showing "+germanElements[i]);
}
}else{ //Bogus case
console.log("BOGUS CASE@!!!!!@!#@!#!");
}
}
hideElements(languageFlag);
When it gets to the portion with hiding German elements, running in the browser, I get the error "Cannot read property 'style' of null" which doesn't make much sense to me. I would think that error would fire even for showing the English elements, but it doesn't.
I can't seem to find any in-depth JS resources for Captivate, so I would greatly appreciate help!
OH! One more thing! Anybody know how to retrieve an element's transition timers? I figure that when I get this displaying correct, it'll display everything instantly instead of fading in/out like I would really like.