Locale language detection and translation?

Question

I am building an offline multi-page mobile application on Dreamweaver, and I am trying to make it so that the application can detect only certain <h1>s and translate them to the locale language the users phone is set to, but I do not know how. below, I want the top <h1> to be translated to the users locale language, while leaving the bottom <h1> in English.

//html

<h1 class="TopText" id="HouseT">Apartment</h1>
<img src"~"/>
<h1 class="BotText" id="HouseB">Apartment</h1>

Lavonlavona

Need some more context. As the question stands now it will probably get closed as "too broad". What are you trying to do exactly? E.G. in the onload handler, are you trying to find the content of the top h1, translate it automatically and insert it in the bottom h1; that sort of information is missing from the question. – Therapsid

Basically I want to be able to target specific strings and have them translated to the language the users phone is set to, for example the top <h1> in this example., while leave the bottom <h1> un-translated. The reason is that I want the application I am building the be able to help say a german traveller going to costa rica, the same as an english traveler going to china. So the top <h1> will be the locale translation, and the bottom I have set to a spinner widget so the user can select the chosen language for the bottom <h1> to be translated into their language of choice – Lavonlavona

so for this particular question, I don't know the code to get the users locale language, and then to accommodate selective strings to the users locale settings. But since the application I am building is designed to work offline, I need more understanding for: should I set it up so that once the users locale is detected the code will select a pre-made library of strings for the detected locale langauge? There just doesn't seem to be any clear representation of how to do this for JavaScript online that I have found in the last month or so of searching – Lavonlavona

Answer 1

Using jQuery you could write a selector, that matches the first h1 element, but not the second. For example:

'h1.TopText' (select h1 elements having ToText class attribute) or 'h1#HouseT' (selecting h1 elements having HouseT as id) and then go on and manipulate it's contents.

Here is a working example:

$('h1.TopText').html('some other text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="TopText" id="HouseT">Apartment</h1>
<img src"http://placehold.it/100x100"/>
<h1 class="BotText" id="HouseB">Apartment</h1>

Hockey

Yeah this was my general idea, but that part I don't know how to do, or is really confusing is how to make the app sense the users language, then have the app change all the h1.TopText to strings in the users phones language. I've read tones of articles and posts and blogs but there does not seem to be any straightforward answer – Lavonlavona