{"id":1098,"date":"2020-11-18T00:18:28","date_gmt":"2020-11-18T00:18:28","guid":{"rendered":"https:\/\/notynote.com\/?p=1098"},"modified":"2020-11-21T23:23:00","modified_gmt":"2020-11-21T16:23:00","slug":"multi-lang-jquery","status":"publish","type":"post","link":"https:\/\/notynote.com\/?p=1098","title":{"rendered":"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3"},"content":{"rendered":"<p><div class=\"fusion-bg-parallax\" data-bg-align=\"center center\" data-direction=\"up\" data-mute=\"false\" data-opacity=\"100\" data-velocity=\"-0.3\" data-mobile-enabled=\"true\" data-break_parents=\"0\" data-bg-image=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/banner2.jpg\" data-bg-repeat=\"false\" ><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container fusion-parallax-up nonhundred-percent-fullwidth non-hundred-percent-height-scrolling lazyload\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-min-height:400px;--awb-background-size:cover;--awb-flex-wrap:wrap;\" data-bg=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/banner2.jpg\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-align-content-center fusion-flex-content-wrap\" style=\"max-width:104%;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-title-center fusion-title-text fusion-title-size-one\" style=\"--awb-text-color:#ffffff;\"><div class=\"title-sep-container title-sep-container-left\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:#e0dede;\"><\/div><\/div><span class=\"awb-title-spacer\"><\/span><h1 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:72;line-height:1.28;\">Multi Language Website with jQuery <span role=\"image\" aria-label=\"\ud83c\uddec\ud83c\udde7\">\ud83c\uddec\ud83c\udde7<\/span><span role=\"image\" aria-label=\"\ud83c\uddf9\ud83c\udded\">\ud83c\uddf9\ud83c\udded<\/span><span role=\"image\" aria-label=\"\ud83c\udde8\ud83c\uddf3\">\ud83c\udde8\ud83c\uddf3<\/span><\/h1><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:#e0dede;\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:20px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-center fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"max-width:104%;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_3_5 3_5 fusion-flex-column fusion-flex-align-self-center\" style=\"--awb-bg-size:cover;--awb-width-large:60%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.2%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.2%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-block\"><div class=\"fusion-text fusion-text-1\" style=\"--awb-text-color:#03a9f4;\"><h3 style=\"text-align: center; --fontSize:36; line-height: 1.5;\" data-fontsize=\"36\" data-lineheight=\"54px\" class=\"fusion-responsive-typography-calculated\"><strong><span style=\"color: #03a9f4;\">Let&#8217;s make multi language website <\/span><span role=\"image\" aria-label=\"\ud83d\ude01\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f601.svg\" alt=\"\ud83d\ude01\"><\/span><\/strong><\/h3>\n<\/div><div class=\"fusion-image-element fusion-image-align-center in-legacy-container\" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><div class=\"imageframe-align-center\"><span class=\" fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"600\" height=\"338\" title=\"Multi Language\" src=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\" data-orig-src=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\" alt class=\"lazyload img-responsive wp-image-1273\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27338%27%20viewBox%3D%270%200%20600%20338%27%3E%3Crect%20width%3D%27600%27%20height%3D%27338%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language-200x113.jpg 200w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language-400x225.jpg 400w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg 600w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px\" \/><\/span><\/div><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:5px;margin-bottom:5px;width:100%;\"><div class=\"fusion-separator-border sep-double\" style=\"--awb-height:20px;--awb-amount:20px;border-color:#00bcd4;border-top-width:0px;border-bottom-width:0px;\"><\/div><\/div><div class=\"fusion-text fusion-text-2\" style=\"--awb-line-height:2;\"><h5><span style=\"color: #03a9f4;\">Get Ready <\/span><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f4e6.svg\" alt=\"\ud83d\udce6\" \/><\/h5>\n<p>A Simple Guide to implement Multi Language into your website. Here is the list of what is in use for this guide.<\/p>\n<ul>\n<li>HTML5<\/li>\n<li>Bootstrap<\/li>\n<li>jQuery<\/li>\n<li>JSON<\/li>\n<\/ul>\n<\/div><div class=\"fusion-separator\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:5px;margin-bottom:5px;width:100%;max-width:600px;\"><div class=\"fusion-separator-border sep-single sep-solid\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:#000000;border-color:#000000;border-top-width:1px;\"><\/div><\/div>\n<div class=\"fusion-text fusion-text-3\"><h5><span style=\"color: #03a9f4;\">Create &#8220;index.html&#8221; with language switch button <\/span><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f3f3.svg\" alt=\"\ud83c\udff3\" \/><\/h5>\n<p>&#8220;index.html&#8221; file that includes Bootstrap, jQuery, and custom script<\/p>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-1 > .CodeMirror, .fusion-syntax-highlighter-1 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-1 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-1 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-1 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_1\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_1\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_1\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/html\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Multi Language<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" integrity=\"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z\" crossorigin=\"anonymous\">\n    <style>\n        body,html {height: 100%;}\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container h-100\">\n        <div class=\"row h-100 justify-content-center align-items-center text-center\">\n            <div class=\"col-6\">\n                <h1 id=\"text\" class=\"float-right mr-3\"><\/h1>\n            <\/div>\n            <div class=\"col-6\">\n                <div class=\"row\">\n                    <a href=\"#\" class=\"btn btn-info\" style=\"width: 100px;\" \n                      id=\"engBtn\" onclick=\"setLang('en')\">English<\/a>\n                <\/div>\n                <div class=\"row mt-4\">\n                    <a href=\"#\" class=\"btn btn-primary\" style=\"width: 100px;\" \n                      id=\"thaiBtn\" onclick=\"setLang('th')\">\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22<\/a>\n                <\/div>\n                <div class=\"row mt-4\">\n                    <a href=\"#\" class=\"btn btn-danger\" style=\"width: 100px;\" \n                      id=\"thaiBtn\" onclick=\"setLang('ch')\">\u4e2d\u6587<\/a>\n                <\/div>\n            <\/div>\n        <\/div>   \n    <\/div>\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\" integrity=\"sha256-9\/aliU8dGd2tb6OSsuzixeV4y\/faTqgFtohetphbbj0=\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.1\/dist\/umd\/popper.min.js\" integrity=\"sha384-9\/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\" integrity=\"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8\/KUEfYiJOMMV+rV\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/textarea><\/div><div class=\"fusion-text fusion-text-4\"><h6><\/h6>\n<h6>It will look like this<\/h6>\n<\/div><div class=\"fusion-image-element in-legacy-container\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-2 hover-type-none\"><img decoding=\"async\" width=\"954\" height=\"651\" title=\"Untitled\" src=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled.png\" data-orig-src=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled.png\" alt class=\"lazyload img-responsive wp-image-1107\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27954%27%20height%3D%27651%27%20viewBox%3D%270%200%20954%20651%27%3E%3Crect%20width%3D%27954%27%20height%3D%27651%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-200x136.png 200w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-400x273.png 400w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-600x409.png 600w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-800x546.png 800w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled.png 954w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 954px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-5\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\"><b>&lt;Head&gt; where we include Bootstrap<\/b><\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-2 > .CodeMirror, .fusion-syntax-highlighter-2 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-2 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-2 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-2 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_2\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_2\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_2\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/html\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Multi Language<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" integrity=\"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z\" crossorigin=\"anonymous\">\n    <style>\n        body,html {height: 100%;}\n    <\/style>\n<\/head><\/textarea><\/div><div class=\"fusion-text fusion-text-6\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">&lt;body&gt; where we create the &lt;h1&gt; for text and button for each language<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-3 > .CodeMirror, .fusion-syntax-highlighter-3 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-3 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-3 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-3 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_3\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_3\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_3\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/html\"><body>\n    <div class=\"container h-100\">\n        <div class=\"row h-100 justify-content-center align-items-center text-center\">\n            <div class=\"col-6\">\n                <h1 id=\"text\" class=\"float-right mr-3\"><\/h1>\n            <\/div>\n            <div class=\"col-6\">\n                <div class=\"row\">\n                    <a href=\"#\" class=\"btn btn-info\" style=\"width: 100px;\" \n                      id=\"engBtn\" onclick=\"setLang('en')\">English<\/a>\n                <\/div>\n                <div class=\"row mt-4\">\n                    <a href=\"#\" class=\"btn btn-primary\" style=\"width: 100px;\" \n                      id=\"thaiBtn\" onclick=\"setLang('th')\">\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22<\/a>\n                <\/div>\n                <div class=\"row mt-4\">\n                    <a href=\"#\" class=\"btn btn-danger\" style=\"width: 100px;\" \n                      id=\"thaiBtn\" onclick=\"setLang('ch')\">\u4e2d\u6587<\/a>\n                <\/div>\n            <\/div>\n        <\/div>       \n    <\/div><\/textarea><\/div><div class=\"fusion-text fusion-text-7\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">The end of &lt;body&gt; where we include jQuery, Bootstrap Script, and Our Custom Script<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-4 > .CodeMirror, .fusion-syntax-highlighter-4 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-4 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-4 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-4 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_4\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_4\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_4\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/html\">    <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\" integrity=\"sha256-9\/aliU8dGd2tb6OSsuzixeV4y\/faTqgFtohetphbbj0=\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.1\/dist\/umd\/popper.min.js\" integrity=\"sha384-9\/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\" integrity=\"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8\/KUEfYiJOMMV+rV\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"script.js\"><\/script>\n<\/body><\/textarea><\/div><div class=\"fusion-separator\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:5px;margin-bottom:5px;width:100%;max-width:600px;\"><div class=\"fusion-separator-border sep-single sep-solid\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:#000000;border-color:#000000;border-top-width:1px;\"><\/div><\/div>\n<div class=\"fusion-content-boxes content-boxes columns row fusion-columns-1 fusion-columns-total-0 fusion-content-boxes-1 content-boxes-icon-with-title content-left\" style=\"--awb-hover-accent-color:#a0ce4e;--awb-circle-hover-accent-color:#a0ce4e;--awb-item-margin-bottom:40px;\" data-animationOffset=\"top-into-view\"><div class=\"fusion-clearfix\"><\/div><\/div><div class=\"fusion-text fusion-text-8\"><h4><span style=\"color: #03a9f4;\" data-token-index=\"0\" data-reactroot=\"\">Create JSON files for each language <\/span><span role=\"image\" aria-label=\"\ud83c\uddec\ud83c\udde7\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f1ec-1f1e7.svg\" alt=\"\ud83c\uddec\ud83c\udde7\" \/><\/span><span role=\"image\" aria-label=\"\ud83c\uddf9\ud83c\udded\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f1f9-1f1ed.svg\" alt=\"\ud83c\uddf9\ud83c\udded\" \/><\/span><span role=\"image\" aria-label=\"\ud83c\udde8\ud83c\uddf3\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f1e8-1f1f3.svg\" alt=\"\ud83c\udde8\ud83c\uddf3\" \/><\/span><\/h4>\n<p><span role=\"image\" aria-label=\"\ud83c\udde8\ud83c\uddf3\">Create folder call &#8220;lang&#8221; and create .json file for each language<\/span><\/p>\n<\/div><div class=\"fusion-image-element in-legacy-container\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-3 hover-type-none\"><img decoding=\"async\" width=\"1024\" height=\"768\" title=\"Untitled (1)\" src=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1.png\" data-orig-src=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1.png\" alt class=\"lazyload img-responsive wp-image-1120\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271024%27%20height%3D%27768%27%20viewBox%3D%270%200%201024%20768%27%3E%3Crect%20width%3D%271024%27%20height%3D%27768%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1-200x150.png 200w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1-400x300.png 400w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1-600x450.png 600w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1-800x600.png 800w, https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Untitled-1.png 1024w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 1024px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-9\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">Code for th.json <span role=\"image\" aria-label=\"\ud83c\uddf9\ud83c\udded\">\ud83c\uddf9\ud83c\udded<\/span><\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-5 > .CodeMirror, .fusion-syntax-highlighter-5 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-5 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-5 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-5 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_5\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_5\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_5\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"application\/json\">{\n    \"hello\": \"\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e35\"\n}<\/textarea><\/div><div class=\"fusion-text fusion-text-10\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">Code for en.json <span role=\"image\" aria-label=\"\ud83c\uddec\ud83c\udde7\">\ud83c\uddec\ud83c\udde7<\/span><\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-6 > .CodeMirror, .fusion-syntax-highlighter-6 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-6 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-6 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-6 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_6\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_6\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_6\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"application\/json\">{\n    \"hello\": \"Hello\"\n}<\/textarea><\/div><div class=\"fusion-text fusion-text-11\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">Code for ch.json <span role=\"image\" aria-label=\"\ud83c\udde8\ud83c\uddf3\">\ud83c\udde8\ud83c\uddf3<\/span><\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-7 > .CodeMirror, .fusion-syntax-highlighter-7 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-7 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-7 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-7 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_7\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_7\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_7\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"application\/json\">{\n    \"hello\": \"\u4f60\u597d\"\n}<\/textarea><\/div><div class=\"fusion-separator\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:5px;margin-bottom:5px;width:100%;max-width:600px;\"><div class=\"fusion-separator-border sep-single sep-solid\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:#000000;border-color:#000000;border-top-width:1px;\"><\/div><\/div>\n<div class=\"fusion-text fusion-text-12\"><h5><span style=\"color: #03a9f4;\">Create script.js to handle language switching <\/span><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f916.svg\" alt=\"\ud83e\udd16\" \/><\/h5>\n<\/div><div class=\"fusion-text fusion-text-13\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">&#8220;script.js&#8221; file<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-8 > .CodeMirror, .fusion-syntax-highlighter-8 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-8 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-8 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-8 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_8\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_8\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_8\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/javascript\">var lang;\n\nfunction getLang() {\n    (localStorage.getItem('cLang') == null) ? setLang('en') : false;\n\n    $.ajax({\n        dataType: 'json',\n        async: false,\n        url: 'lang\/' + localStorage.getItem('cLang') + '.json',\n        success: function(data) { \n            lang = data;\n            $('#text').text(lang.hello);\n        }\n    });\n}\n\nfunction setLang(lang) {\n    localStorage.setItem('cLang', lang);\n    getLang();\n}\n\n$(document).ready(function(){\n    getLang();\n    $('#text').text(lang.hello);\n});<\/textarea><\/div><div class=\"fusion-text fusion-text-14\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">getLang() function to define a default language and fetch for json file according to selected language.<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-9 > .CodeMirror, .fusion-syntax-highlighter-9 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-9 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-9 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-9 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_9\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_9\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_9\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/javascript\">function getLang() {\n    (localStorage.getItem('cLang') == null) ? setLang('en') : false;\n\n    $.ajax({\n        dataType: 'json',\n        async: false,\n        url: 'lang\/' + localStorage.getItem('cLang') + '.json',\n        success: function(data) { \n            lang = data;\n            $('#text').text(lang.hello);\n        }\n    });\n}<\/textarea><\/div><div class=\"fusion-text fusion-text-15\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">setLang(lang) function handle a language change when user click on the buttons &#8211; Parameter &#8216;lang&#8217; define what language to change into.<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-10 > .CodeMirror, .fusion-syntax-highlighter-10 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-10 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-10 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-10 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_10\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_10\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_10\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/javascript\">function setLang(lang) {\n    localStorage.setItem('cLang', lang);\n    getLang();\n}<\/textarea><\/div><div class=\"fusion-text fusion-text-16\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">English Button will call <span data-token-index=\"1\" data-reactroot=\"\">setLang(&#8216;en&#8217;) <\/span>when clicked.<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-11 > .CodeMirror, .fusion-syntax-highlighter-11 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-11 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-11 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-11 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_11\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_11\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_11\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/html\"><a href=\"#\" class=\"btn btn-info\" style=\"width: 100px;\" id=\"engBtn\" onclick=\"setLang('en')\">English<\/a><\/textarea><\/div><div class=\"fusion-text fusion-text-17\"><h4 style=\"color: #000000;\"><b>\u00a0<\/b><\/h4>\n<h4 style=\"color: #000000;\">Call a getLang() function and apply text into &lt;h1&gt; tag with id=&#8221;text&#8221; when a webpage is loaded.<\/h4>\n<\/div><style type=\"text\/css\" scopped=\"scopped\">.fusion-syntax-highlighter-12 > .CodeMirror, .fusion-syntax-highlighter-12 > .CodeMirror .CodeMirror-gutters {background-color:var(--awb-color1);}.fusion-syntax-highlighter-12 > .CodeMirror .CodeMirror-gutters { background-color: var(--awb-color2); }.fusion-syntax-highlighter-12 > .CodeMirror .CodeMirror-linenumber { color: var(--awb-color8); }<\/style><div class=\"fusion-syntax-highlighter-container fusion-syntax-highlighter-12 fusion-syntax-highlighter-theme-light\" style=\"opacity:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:14px;border-width:1px;border-style:solid;border-color:#00bcd4;\"><div class=\"syntax-highlighter-copy-code\"><span class=\"syntax-highlighter-copy-code-title\" data-id=\"fusion_syntax_highlighter_12\" style=\"font-size:14px;\">Copy to Clipboard<\/span><\/div><label for=\"fusion_syntax_highlighter_12\" class=\"screen-reader-text\">Syntax Highlighter<\/label><textarea class=\"fusion-syntax-highlighter-textarea\" id=\"fusion_syntax_highlighter_12\" data-readOnly=\"nocursor\" data-lineNumbers=\"1\" data-lineWrapping=\"\" data-theme=\"default\" data-mode=\"text\/javascript\">$(document).ready(function(){\n    getLang();\n    $('#text').text(lang.hello);\n});<\/textarea><\/div><div class=\"fusion-separator\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:5px;margin-bottom:5px;width:100%;max-width:600px;\"><div class=\"fusion-separator-border sep-single sep-solid\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:#000000;border-color:#000000;border-top-width:1px;\"><\/div><\/div>\n<div class=\"fusion-text fusion-text-18\"><h5><b><span style=\"color: #03a9f4;\" data-token-index=\"0\" data-reactroot=\"\">Now your website can say &#8216;Hello&#8217; in English<\/span><span role=\"image\" aria-label=\"\ud83c\uddec\ud83c\udde7\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f1ec-1f1e7.svg\" alt=\"\ud83c\uddec\ud83c\udde7\" \/><\/span> <span data-token-index=\"2\" data-reactroot=\"\"><span style=\"color: #03a9f4;\">Thai<\/span><span role=\"image\" aria-label=\"\ud83c\uddf9\ud83c\udded\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f1f9-1f1ed.svg\" alt=\"\ud83c\uddf9\ud83c\udded\" \/><\/span><span style=\"color: #03a9f4;\"> and Chinese<\/span><span role=\"image\" aria-label=\"\ud83c\udde8\ud83c\uddf3\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f1e8-1f1f3.svg\" alt=\"\ud83c\udde8\ud83c\uddf3\" \/><\/span><span style=\"color: #03a9f4;\"> &#8211; <\/span><span role=\"image\" aria-label=\"\ud83e\udd73\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f973.svg\" alt=\"\ud83e\udd73\" \/><\/span><span style=\"color: #03a9f4;\"> YAY! <\/span><span role=\"image\" aria-label=\"\ud83c\udf89\"><img decoding=\"async\" class=\"lazyload emoji\" role=\"img\" draggable=\"false\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/1f389.svg\" alt=\"\ud83c\udf89\" \/><\/span><\/span><\/b><\/h5>\n<\/div><div class=\"fusion-text fusion-text-19\"><p>P.S. LocalStorage in javascript is not clear even when user close the program. LocalStorage is connect with the domain name. Therefore, next time the visitor connect to your website the selected language will be there by default.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1273,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68],"tags":[72,71,70,73],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3 - NotyNote Funland<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/notynote.com\/?p=1098\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3 - NotyNote Funland\" \/>\n<meta property=\"og:url\" content=\"https:\/\/notynote.com\/?p=1098\" \/>\n<meta property=\"og:site_name\" content=\"NotyNote Funland\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-18T00:18:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-21T16:23:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"338\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"notynote\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"notynote\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/notynote.com\/?p=1098#article\",\"isPartOf\":{\"@id\":\"https:\/\/notynote.com\/?p=1098\"},\"author\":{\"name\":\"notynote\",\"@id\":\"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2\"},\"headline\":\"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3\",\"datePublished\":\"2020-11-18T00:18:28+00:00\",\"dateModified\":\"2020-11-21T16:23:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/notynote.com\/?p=1098\"},\"wordCount\":3956,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2\"},\"image\":{\"@id\":\"https:\/\/notynote.com\/?p=1098#primaryimage\"},\"thumbnailUrl\":\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\",\"keywords\":[\"html\",\"javascript\",\"jQuery\",\"localstorage\"],\"articleSection\":[\"Code Example\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/notynote.com\/?p=1098#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/notynote.com\/?p=1098\",\"url\":\"https:\/\/notynote.com\/?p=1098\",\"name\":\"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3 - NotyNote Funland\",\"isPartOf\":{\"@id\":\"https:\/\/notynote.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/notynote.com\/?p=1098#primaryimage\"},\"image\":{\"@id\":\"https:\/\/notynote.com\/?p=1098#primaryimage\"},\"thumbnailUrl\":\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\",\"datePublished\":\"2020-11-18T00:18:28+00:00\",\"dateModified\":\"2020-11-21T16:23:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/notynote.com\/?p=1098#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/notynote.com\/?p=1098\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/notynote.com\/?p=1098#primaryimage\",\"url\":\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\",\"contentUrl\":\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg\",\"width\":600,\"height\":338},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/notynote.com\/?p=1098#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/notynote.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/notynote.com\/#website\",\"url\":\"https:\/\/notynote.com\/\",\"name\":\"NotyNote Funland\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/notynote.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2\",\"name\":\"notynote\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/notynote.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/team.jpg\",\"contentUrl\":\"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/team.jpg\",\"width\":370,\"height\":370,\"caption\":\"notynote\"},\"logo\":{\"@id\":\"https:\/\/notynote.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/notynote.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3 - NotyNote Funland","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/notynote.com\/?p=1098","og_locale":"en_US","og_type":"article","og_title":"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3 - NotyNote Funland","og_url":"https:\/\/notynote.com\/?p=1098","og_site_name":"NotyNote Funland","article_published_time":"2020-11-18T00:18:28+00:00","article_modified_time":"2020-11-21T16:23:00+00:00","og_image":[{"width":600,"height":338,"url":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg","type":"image\/jpeg"}],"author":"notynote","twitter_card":"summary_large_image","twitter_misc":{"Written by":"notynote","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/notynote.com\/?p=1098#article","isPartOf":{"@id":"https:\/\/notynote.com\/?p=1098"},"author":{"name":"notynote","@id":"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2"},"headline":"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3","datePublished":"2020-11-18T00:18:28+00:00","dateModified":"2020-11-21T16:23:00+00:00","mainEntityOfPage":{"@id":"https:\/\/notynote.com\/?p=1098"},"wordCount":3956,"commentCount":0,"publisher":{"@id":"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2"},"image":{"@id":"https:\/\/notynote.com\/?p=1098#primaryimage"},"thumbnailUrl":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg","keywords":["html","javascript","jQuery","localstorage"],"articleSection":["Code Example"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/notynote.com\/?p=1098#respond"]}]},{"@type":"WebPage","@id":"https:\/\/notynote.com\/?p=1098","url":"https:\/\/notynote.com\/?p=1098","name":"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3 - NotyNote Funland","isPartOf":{"@id":"https:\/\/notynote.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/notynote.com\/?p=1098#primaryimage"},"image":{"@id":"https:\/\/notynote.com\/?p=1098#primaryimage"},"thumbnailUrl":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg","datePublished":"2020-11-18T00:18:28+00:00","dateModified":"2020-11-21T16:23:00+00:00","breadcrumb":{"@id":"https:\/\/notynote.com\/?p=1098#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/notynote.com\/?p=1098"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/notynote.com\/?p=1098#primaryimage","url":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg","contentUrl":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/Multi-Language.jpg","width":600,"height":338},{"@type":"BreadcrumbList","@id":"https:\/\/notynote.com\/?p=1098#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/notynote.com\/"},{"@type":"ListItem","position":2,"name":"Multi Language Website with jQuery \ud83c\uddec\ud83c\udde7\ud83c\uddf9\ud83c\udded\ud83c\udde8\ud83c\uddf3"}]},{"@type":"WebSite","@id":"https:\/\/notynote.com\/#website","url":"https:\/\/notynote.com\/","name":"NotyNote Funland","description":"","publisher":{"@id":"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/notynote.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/notynote.com\/#\/schema\/person\/510b9f43c89123fb6586973b765362b2","name":"notynote","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/notynote.com\/#\/schema\/person\/image\/","url":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/team.jpg","contentUrl":"https:\/\/notynote.com\/wp-content\/uploads\/2020\/09\/team.jpg","width":370,"height":370,"caption":"notynote"},"logo":{"@id":"https:\/\/notynote.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/notynote.com"]}]}},"_links":{"self":[{"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/posts\/1098"}],"collection":[{"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notynote.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1098"}],"version-history":[{"count":27,"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/posts\/1098\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/posts\/1098\/revisions\/1274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notynote.com\/index.php?rest_route=\/wp\/v2\/media\/1273"}],"wp:attachment":[{"href":"https:\/\/notynote.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notynote.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notynote.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}