A simple javascript to support multiple languages on a webpage were useing PHP or similar solutions are not possible.
This script swaps the visibility of HTML elements with speciffic class names. An example usage is provided. You only need to change some style parameter in language.js as well as the path to the flag pictures and which languages you want to support. For more detail please have a look into language.js
Feel free to improve the script and share your improvements.
Advantages useing this script:
- Fast installation
- No further dependencies
- No code dublication needed / No need to have a copy of each side for each language.
- The text is at the place were in will be shown and not stored in some database.
- Usable for Wordpress:
- Upload the script to your wordpress.
- Inside an Article just use the HTML tags with the corresponding language classname.
- For the menue you can also set a class name: Customizer -> Menue -> check "CSS-Classes" in the options and than just add a class name to the menue entry.
- In contrast: Useing a plugin like Polylang would require you to have a copied-side for each Language. Meaning if you want to change a picture, you'll have to do it for each language (but you wouldnt need to cheat with the Menue).
- No reload of the webpage when changeing language.
Disadvantages useing this script:
- Its JavaScript.
- A very small amount of visitors blocks JavaScript and/or cookies.
- You need to address the cookie in your impressum / privacy page (at least if you are in the EU).
- If your side loades slow, because of a low internet connection or your side just has to much to load (shrink your pictures, use jpg compression) The User will shortly see all languages displayed.
- At every visit all the text/languages needs to be downloaded.