title: Change text language in HTML pages from JavaScript file
body: <p>I have a JavaScript file where I need to create some kind of dictionary (containing translated text) from a html page, and to be able to change language from the HTML header. </p>
  
  <pre><code>&lt;a class="text-center" id='lnkHumanResources'&gt;
          &lt;p&gt;&lt;img width="100" height="100" src="assets/img/icons/home-hr.png" /&gt;&lt;/p&gt;
          &lt;h1&gt;Ljudski resursi&lt;/h1&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>This is an example of code containing the string which needs to be translated </p>
  
  <p>"Ljudski resursi" to "Human Resources".</p>
  
  <p>So, I need to have some hard - coded text on different languages in .js file, and some kind of method to change language from HTML header, and include it to few HTML pages that need to be able to change language.</p>
  
  <hr>
  
  <p><strong><em>Solved</em></strong></p>
  
  <p>Whoever gets stuck with same kind of problem, see <a href="http://www.openxrest.com/translatejs/" rel="nofollow noreferrer" title="Translate.js">Translate.js</a></p>
  
  <p>Download plugin and unzip it into your lib folder, and include it to all html pages you want to translate </p>
  
  <pre><code>&lt;script src="assets/js/lib/translate.js-master/jquery.translate.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I also created <strong>dictionary.js</strong> containing all strings I wanted to translate from all pages on few languages, and included it also to all html pages that needed to be translated </p>
  
  <pre><code>var dict = {      // dictionary.js
    "Home": {
      pt: "Início",
      en: "Home"
    },
    "Download plugin": {
      pt: "Descarregar plugin",
      en: "Download plugin"
    }
  };
  </code></pre>
  
  <p>Include to html example:</p>
  
  <pre><code>&lt;script src="assets/js/lib/dictionary.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Don't forget to wrap all hard coded strings with span attribute with class "trn"</p>
  
  <pre><code>&lt;p class="some-class"&gt;&lt;span class="trn"&gt;Text to translate&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Then just add next line in html pages and you're good to go :)</p>
  
  <pre><code>var translator = $('body').translate({lang: "en", t: dict}); // en to use English
  </code></pre>