Welcome to Instant Translate JS

Well, you may think that it is a plugin based on Google Translator, Bing Translator or Yandex Translator. YOU ARE WRONG! It is a simple but efficient JS function that will allow put your website in different languages by changing the text with a string.

What differ it from others?

So, as the name stated, this is an Instant Translate for your website. Your website will be translated in less than 1 second, YES! LESS THAN ONE SECOND! It is amazing, you don't need to reload your website to show up your website in another language. You just need to trigger a button and your website will be in another language.

How to use it?

This is the most important part of this plugin. HOW TO USE IT! It is simple as breathing! You just need to follow a few steps and you are done!

Step 1:

Put the following code in your Script area:

<script src="js/instatranslate.js"></script>

The code is define as the next if you don't want to download our code:

var Enabled=true;

function translate_spanish()
            if(Enabled == true)
                  document.getElementById('welcome_message').innerHTML = 'Bienvenidos A Nuestro Sitio Web! Intenta traducirme!';
                  document.getElementById('button_spanish').innerHTML = 'EspaƱol';
                  document.getElementById('button_english').innerHTML = 'Ingles';
                      document.getElementById('welcome_message').innerHTML = 'Welcome To Our Website! Try to translate me!';
                      document.getElementById('button_spanish').innerHTML = 'Spanish';
                      document.getElementById('button_english').innerHTML = 'English';

Meaning that your file is under your js folder.

It will call the JavaScript to your website.

Step 2:

Copy the following code into your body:

<button id='translate_spanish' onclick="Enabled=true;translate_spanish();">Spanish</button>
<button id='translate_spanish' onclick="Enabled=false;translate_spanish();">English</button>

It will create two buttons, one with English language and the other one with Spanish language. It will call the JS loaded on your website

Step 3:

Copy the following code into your body:

<p id="welcome_message">Welcome To Our Website! Try to translate me!</p>

Now, we are declaring a text with ID "welcome_message" which is already declared on the demo. The JS will take this id and will replace it with the other text that you translate.

Step 4:

Wanted more steps? I am so sorry, we are just done :D

Built With

Share this project: