JavaScript Language Switcher update w/ css display

Hsiang

2022-08-09 483 words One minute

Simple JavaScript Language Switcher, use javascript switch language.

Photo by Markus Winkler on Unsplash

after quite a bit of searching, I decided to create a naive one

you can just fork it to use it

simple demo

jQuery Hide & Show

At the first I thought I can use jQuery’s .hide() and .show() to achieve the result I want.

First Naive Version

HTML

1
2
3
<h1 class="en">JavaScript Language Switcher</h1>  
    <h1 class="tw">JS語言切換</h1>  
    <span class='en' onclick="switch_lang('.en', '.tw')">中文</span><span class='tw' onclick="switch_lang('.tw', '.en')">EN</span>

1
2
3
4
window.onload = switch_lang('.tw', '.en');function switch_lang(hide_lan, show_lan){  
  $(hide_lan).hide();  
  $(show_lan).show();  
}

Then I quickly found that the user with javascript disabled or slow load in would result in seeing the original HTML w/ multiple langs not being hidden.

So I’ve tried to initialize the hidden lang by set CSS visible to hidden.

CSS Visibility

1
2
.tw {visibility: hidden;}  
.en {visibility: visible;}

But it resulted in a disordered layout.(You can regard it as what when we set the colour: white; to cover something up)
Finally with the help of another style attribution, display, I am able to achieve what I want - to set up a multilingual site and handle the error when users have a low load-in speed or JS disabled.

CSS Display

1
.tw {display: none;}

Result: Simple JavaScript Language Switcher w/ css display (chienhsiang-hung.github.io)

How to use it

The example was shown for TW-EN site.

Set up your HTML like this:

1
2
3
<h1  class="mt-5 en">Simple JavaScript Language Switcher w/ css display</h1>  
<h1  class="mt-5 tw">藉由CSS實現簡易JS語言切換</h1>  
<span  class='en'  onclick="switch_lang('.en', '.tw')">中文</span><span  class='tw'  onclick="switch_lang('.tw', '.en')">EN</span>

Put this in <head> part of your HTML:

1
<link href="https://chienhsiang-hung.github.io/javascript-language-switcher/src/css/switch-lang-display.css" rel="stylesheet">

And this in <body> part of you HTML:

1
<script src='https://chienhsiang-hung.github.io/javascript-language-switcher/src/js/switch-lang-no-onload.js'></script>

Support

It’s always appreciated if you would like to buy me a cofee to support this API. Thank you :)

contact me: Hung, Chien-Hsiang (chienhsiang-hung.github.io)