Put this in your document header: <script src="https://cdn.jsdelivr.net/gh/Sv443/langapplier@1/langapplier.js"></script>
(optional) Modify your <body> tag with the default language
I recommend using a sequence of chars before the lang code (for example: __EN), because it may conflict with your specified content otherwise <body data-default_lang="YOUR_LANG_CODE">
How to use:
Add the class langapp to every element that needs to be affected by the language change: <div class="langapp">
Add the needed attributes to change specific things of the element: innerHTML: <div class="langapp" data-lang_content="__EN°English Content|__DE°German Content"> (this affects the innerHTML of the element) title: <div class="langapp" data-lang_title="__EN°English Content|__DE°German Content"> (this affects the title attribute of the element) src: <img class="langapp" data-lang_src="__EN°http://url.to/your/image_EN.png|__DE°http://url.to/your/image_DE.png"> (this affects the src attribute of the element) Furthermore you can use data-lang_onclick, data-lang_href and data-lang_placeholder
Switch between languages: langapp.change("LANG_CODE");
If you want to deactivate the watermark in the console, add this to your header: <meta id="langapplier_disable_watermark">
[1.1.0] If you want to enable console debugging, add this to your header: <meta id="langapplier_enable_debug">
If you want to call a function when the language changes you can add an event listener like this: document.addEventListener("lang_change", yourFunction);
The document's lang dataset contains the currently selected language so you can return it like this: document.body.dataset.lang;
Demonstration:
Change Language:
(Using an invalid language will leave everything as is)
<span class="langapp" data-lang_title="__EN°English hover title|__DE°German hover title|__CUSTOM°Custom Language hover title" data-lang_content="__EN°Language: English - hover over me!|__DE°Language: German - hover over me!|__CUSTOM°Language: Custom - hover over me!">Hover over me</span>