jQuery language switcher

Question

I want to build a website having its content in two languages. I want to use jQuery for the language switching. My idea is this:

instead of having actual content in the HTML page:

<div>Hello there</div>

I want to use classes:

HTML:

<div class="hello_EN"></div>

JS(I'm not good at JS; i've combined it with some PHP so I can make myself understood):

var EN = new array('hello_EN' => 'Hello there');
foreach($EN as $class => $content)
$(".$class").text("$content"); //this should populate all my HTML classes with its content

Then, I must have my second language array:

var RO = new array('hello_RO' => 'Salut');

Now, the switching:

$("#change_to_RO").click(function() {
       $(EN).replaceWith(RO);
});

How should I approach this? Thanks.

You page will not only be SEO-unfriendly, but after a bit more text you'll realize how unpractical your idea actually was. — Roko C. Buljan, Nov 17 '12 at 04:44
You're right. What if I'm having two DIVs (EN,RO) while RO is hidden until click? — Schutzstaffel, Nov 17 '12 at 04:49
That will almost double the load of your page. And still SEO unfriendly, cause of your duplicate ID, contents, images.... Just create two different language pages — Roko C. Buljan, Nov 17 '12 at 04:54
`...instead of having actual content in the HTML page...` Why? You mention PHP in the description. That would be a more suitable tool for this job. — Jan, Nov 17 '12 at 06:09
@Jan: I've considered PHP for this task, althou PHP wasn't my intention. Thanks! — Schutzstaffel, Nov 21 '12 at 17:01

Sampson · Accepted Answer · 2012-11-21T19:30:52.207

7

It's probably best to not approach this from JavaScript. That being said, as an academic and learning exercise, here is just a crude idea of how you could go about something like this:

<select id="lang">
    <option>English</option>
    <option>Portuguese</option>
    <option>Russian</option>
</select>
<span data-translate="_hello">Hello</span>, 
<span data-translate="_january">January</span>!

// Some variables for later
var dictionary, set_lang;

// Object literal behaving as multi-dictionary
dictionary = {
    "english": {
        "_hello": "Hello",
        "_january": "January"
    },
    "portuguese": {
        "_hello": "Oie",
        "_january": "Janeiro"
    },
    "russian": {
        "_hello": "привет",
        "_january": "январь"
    }
};

$(function () {

    // Lets be professional, shall we?
    "use strict";

    // Function for swapping dictionaries
    set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

    // Swap languages when menu changes
    $("#lang").on("change", function () {
        var language = $(this).val().toLowerCase();
        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });

    // Set initial language to English
    set_lang(dictionary.english);

});

Fiddle: http://jsfiddle.net/MBRG4/5/

edited Nov 21 '12 at 19:30

answered Nov 17 '12 at 04:59

Sampson

265,109
74
539
565

Wouldn't you prefer using classes like `Hello` instead considering these words might be repeated? – inhan Nov 17 '12 at 05:46
@inhan Great point; you can tell it's late in my part of the world ;) I went ahead and used a `data-` attribute to mark those items which should be translated. – Sampson Nov 17 '12 at 05:55
I guess you're assuming the OP is using HTML5 :) – inhan Nov 17 '12 at 07:09
@inhan Yes, it's nearly 2013 ;) Unless the OP states otherwise, I will assume they're using modern HTML. – Sampson Nov 17 '12 at 14:04
Thank you Jonathan Sampson! I've learned something useful from your reply. @inhan: yes, I'm using HTML5 :) I've aborted this approach because it's not SEO friendly, but I've saved this page for whenever I'll deal with situations like these in the future. Thank you all! – Schutzstaffel Nov 21 '12 at 17:00
1

@Schutzstaffel Why is this not SEO friendly? Note that your HTML is loaded with all of the words and phrases by default. Google, Bing, and everybody else will index your pages with this default language loaded. If you wanted a different language loaded by default, so the pages could be indexed in another language, that wouldn't be too difficult. – Sampson Nov 21 '12 at 19:28
@JonathanSampson, Google and Bing do not execute Javascript so that it could get properly indexed. – Schutzstaffel Nov 21 '12 at 23:02
@Schutzstaffel Note that the HTML comes with English values by default. It is only after the page loads entirely that JavaScript is able to make any changes. Search Engines will index the page with whichever language loads by default in the HTML. – Sampson Nov 22 '12 at 00:53

score 0 · Answer 2 · answered Mar 18 '14 at 11:52

searched Days for a solution to switch language awesome for a small App I will do.
So SEO Friendly your friend said. Oha yes!! I have both languages in the html so its well loaded. I Switch the language with classes (means this swithcer irst worked without any JS)

<style>  
   div.de,  :lang(de) {  display: none;  }   
</style>


<!-- Javascripts -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>


</head>   
<body  > 


<button id="german">German</button>
<button id="english">English</button>


<br><br>

<a href="" lang="de">de</a>
<a href="" lang="en">en</a>

<p lang="de">Deutscher Text</p>
<p lang="en">Englischer Text</p>

<div class="de">Deutsches Div</div> 
<div class="en">Englisches Div</div>

<div class="de"> <iframe width="560" height="315" src="http://www.youtube.com/embed/ZQL7d3k_yh0" frameborder="0" allowfullscreen></iframe>  </div>
<div class="en"> <iframe width="560" height="315" src="http://www.youtube.com/embed/NWfbtFpnCM4" frameborder="0" allowfullscreen></iframe>  </div>


<hr>


<script>
  $( "#german" ).click(function() {
    $("#german").attr('id','notactive')  
      $(".en, :lang(en)").fadeOut('slow', function(){
        $(".de, :lang(de)").fadeIn('slow');
      });  
  });

  $( "#english" ).click(function() {
    $("#english").attr('id','notactive')  
      $(".de, :lang(de)").fadeOut('slow', function(){
        $(".en, :lang(en)").fadeIn('slow');
      });  
  });    

</script>

jQuery language switcher

2 Answers2

Linked