Language links in a multi-lingual HTML5 project

[heal]

Hi all,

I would like to create language links in the output file of a multi-lingual HTML5 project. Is it possible, and does it require JavaScript?

Like this:

2014-06-02 11-00-35.png

[LTinker68]

See if the following post helps: http://forums.madcapsoftware.com/viewto ... =9&t=17145

[heal]

Thank you so much LTinker68 and Dave Lee for your replies. It is highly appreciated. I've added a custom button on the toolbar now, and when I click it the Swedish introduction topic opens.

However, I would like the button click to "remember" which language I've selected. So when I click another topic in the navigation pane, the Swedish topic for that link will open.

Can I write the URL to the Swedish HTML5 help as an event to the button click, and in that case how is that done?

2014-06-17 10-27-18.png

[LTinker68]

Can I write the URL to the Swedish HTML5 help as an event to the button click, and in that case how is that done?

That's what I would do, so that the user is taken to the Swedish-language output as a whole and not topic-by-topic. You should also, of course, have a corresponding button in the Swedish version that gives the user a way back to the English-language version.

As for how it would be coded, I'll let Dave chime in.

[heal]

Hi again, I tried the following script for the onClick.Event for the English and Swedish toolbar buttons respectively, but it does not seem to work when I tested it on our web server:

Code: Select all

function URL() {location.href = 'http://servername.com/Uni/EN/';}

Code: Select all

function URL() {location.href = 'http://servername.com/Uni/SV/';}

What went wrong here?

[KathyW]

Perhaps more complicated than what you're looking for, but I use a dropdown list in the toolbar. I publish each language inside a /help/[language]/ directory, and the dropdown changes the URL to the same page in a different language.
For example, it changes /help/en_US/[product]/Default.htm to /help/de_DE/[product]/Default.htm.

I added this to my Toolbar JavaScript:

Code: Select all

$(document).ready(function () {
    initializeLanguageDropdown();
});

function initializeLanguageDropdown() {

    var ddl = $('<select id="ddlLanguages" onchange="ddlLanguageHandler()" style="margin-left:8px">' + 
       '<option value="zh_CN">中文(简体)</option>' +
       '<option value="zh_TW">中文(繁體)</option>' +
       '<option value="de_DE">Deutsch</option>' +
       '<option value="en_US">English</option>' +
       '<option value="es_ES">Español</option>' +
       '<option value="fr_FR">Français</option>' +
       '<option value="ja_JP">日本語</option>' +
       '<option value="ko_KR">한국어</option>' +
       '<option value="pt_BR">Português</option>' +
	   '<option value="th_TH">ไทย</option>' +
    '</select>');
	
	var pageLanguage = window.location.href.substring(window.location.href.lastIndexOf("/help/"), window.location.href.lastIndexOf("/help/") + 11).substring(6);
	ddl.val(pageLanguage);

    $(".next-topic-button").each(function () {
        ddl.insertAfter($(this));
    });
} 

function ddlLanguageHandler() {
    var language = $("#ddlLanguages").val();
    var newUrl = window.location.href.replace(window.location.href.substring(window.location.href.lastIndexOf("/help/"), window.location.href.lastIndexOf("/help/") + 11), '/help/' + language);
	window.location.href=newUrl;
} 

This is based on a specific URL structure -- my URLs always have /help/[language]/ in them. You'd need to tailor it to fit your URLs and the languages you're supporting. It puts the dropdown list in the toolbar next to my buttons.
The code may look a little scary, but I love the results.