Minimal Client-side Internationalization Plugin - Tdp.js

Tdp.js is an ultra-small jQuery plugin to translate your webpage by replacing content in HTML elements using data-tdp attribute.

Not just text, the plugin allows you to replace HTML elements, select options, image paths, link URLs, and input placeholders for client-side internationalization without page refresh.

How to use it:

1. Insert your translations into the data-tdp attribute as shown below:

<label data-tdp="Hello world">Hola mundo</label>
<h1 data-tdp="Hello <span class='text-danger'>world</span>">Hola <span class='text-danger'>mundo</span></h1>
<input placeholder="Hola mundo" data-tdp="Hello world" />
<option selected data-tdp="Hello world">Hola mundo</option>
<img src="holamundo.png" data-tdp="helloworld.png" />
<a href="holamundo.com" data-tdp="helloworld.com" target="_blank">Link</a>

2. Load the Tdp.js script after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/tdp.js"></script>

3. Create a button to switch between languages.

<button type="button" 
        onclick="Change()">
        CHANGE TO ENGLISH
</button>

4. Initialize the Tdp.js plugin and done.

var original = "es";
    other = "en";

function Change() {
  initTdp(original, other);
}

---

This awesome jQuery plugin is developed by alejocba04. For more Advanced Usages, please check the demo page or visit the official website.