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
– Roko C. Buljan, Commented Nov 17, 2012 at 4:44
You're right. What if I'm having two DIVs (EN,RO) while RO is hidden until click? — Schutzstaffel
– Schutzstaffel, Commented Nov 17, 2012 at 4: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
– Roko C. Buljan, Commented Nov 17, 2012 at 4: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
– Jan, Commented Nov 17, 2012 at 6:09
@Jan: I've considered PHP for this task, althou PHP wasn't my intention. Thanks! — Schutzstaffel
– Schutzstaffel, Commented Nov 21, 2012 at 17:01

Sampson · Accepted Answer · 2012-11-21 19:30:52Z

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/

Wouldn't you prefer using classes like <span class="translate_hello">Hello</span> instead considering these words might be repeated?
@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.
@inhan Yes, it's nearly 2013 ;) Unless the OP states otherwise, I will assume they're using modern HTML.
@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.

user3432605 · Accepted Answer · 2014-03-18 11:52:30Z

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>

Collectives™ on Stack Overflow

jQuery language switcher

2 Answers 2

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Linked

Related