html - change language using element.lang

Asked 28/11, 2012 at 13:33 Answered 28/11, 2012 at 14:24

First question on stack, so hurray to me! I'm trying to develop a new way (apparently, since I've seen no solution to this online, perhaps cos it's not possible) to change the language of HTML written elements using JS and the lang property.

Basically, I have created multiple tags with the lang property in each of them, so that giving the certain lang a display value of -none-, hides it, and a value of -inherit- to show it. In that way, using the line:

a:lang(en),p:lang(en) { display : none }
a:lang(it),p:lang(it) { display : inherit }

I can see one language at a time. And that works!

Now, I have created an

<a href="" lang="en" id="en"> word </a>

tag around the english text, and the same with any other language with their own lang property. I have tried to use:

$("#en").click(function(){
           $('a:lang(en)').css('display', 'inherit');
           $('a:lang(it)').css('display', 'none');
           };

Which doesn't seem to work.

Any ideas?

Thanks a bunch, Shay

Building answered 28/11, 2012 at 13:33 Comment(5)

why not make two stylesheets, disable current one and enable another one, when change language. – Bedlamite 28/11, 2012 at 13:35

I'm just trying to see if there's an easier way to change language. In any case, I wouldn't change a stylesheet just to hide and show a tag, I would create a different page and make that load, which should be easier, no? – Building 28/11, 2012 at 14:8

different stylesheets works way faster, and support dynamically added elements after you called the switch. your query would find every occurrence on the page, just imagine there are thousands of elements there, it could be extreemely slow compare to a swap stylesheet operation. – Bedlamite 28/11, 2012 at 14:20

I'll try that out right away. In case it works, I'll tell you and ask you to write it as an answer, Thanks! – Building 28/11, 2012 at 14:52

already gave you an answer, a shorter version. see below – Bedlamite 28/11, 2012 at 14:54

When load your page come with a <body class="it">, and all the :lang(en) tags will be hidden.

body.en :lang(it) {
  display: none;
}
body.it :lang(en) {
  display: none;
}

And when you need to change the language, simply change the className of <body>.

$("#en").click(function(){
  document.body.className = 'en';
};

Which is more elegant, and way faster.

demo: http://jsfiddle.net/Gw4eQ/

Use :not selector to make it work with more languages. demo

body:not(.en) :lang(en), 
body:not(.it) :lang(it), 
body:not(.fr) :lang(fr) { 
    display: none; 
}

Bedlamite answered 28/11, 2012 at 14:24 Comment(2)

amazing, thank you so much! works perfectly! Works even with 4 languages (had to add them in the css): jsfiddle.net/Gw4eQ/9 – Building 28/11, 2012 at 15:54

It has been a while since I answered this question. Please don't try with multiple languages, it could give you a hell long list of rules. Try use :not() to shorten the list. – Bedlamite 21/2, 2015 at 1:6

This is incorrect:

$('a:lang(en)').attr('display', 'inherit');
$('a:lang(it)').attr('display', 'none');

There is no attribute "display", instead use:

$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');

Or simply:

$('a:lang(en)').show();
$('a:lang(it)').hide();

...but you also have an error here where you didn't wrap your function correctly:

$("#en").click(function(){
    $('a:lang(en)').css('display', 'inherit');
    $('a:lang(it)').css('display', 'none');
}; // <---- error

Should be: });

$("#en").click(function(){
    $('a:lang(en)').css('display', 'inherit');
    $('a:lang(it)').css('display', 'none');
}); // <---- fixed

Also, I'd use inline rather than inherit. "inherit" does not mean "default", it means "inherit this property from the parent", which will probably be block. <a>'s default display is inline.

Broida answered 28/11, 2012 at 13:44 Comment(4)

Thank you very much, Wesley, but I am going witih xiaoyi's answer since it uses only css and no js, as I initially hoped to do (and thought js was necessary). – Building 28/11, 2012 at 15:53

Yeah I'd use another approach, just wanted to let you know why your code wasn't working. – Broida 28/11, 2012 at 16:2

which was exactly why I came here and asked the great hive mind :) – Building 28/11, 2012 at 16:37

You should learn to use tools like these so you can debug things on your own: getfirebug.com developers.google.com/chrome-developer-tools/docs/console msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx – Broida 28/11, 2012 at 16:59

Have you close 'click' with ) ?

$("#en").click(function(){
       $('a:lang(en)').css('display', 'inherit');
       $('a:lang(it)').css('display', 'none');
 });

Iglesias answered 28/11, 2012 at 14:24 Comment(0)

Recommended topics

Hot tags