html - change language using element.lang

Question

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

why not make two stylesheets, disable current one and enable another one, when change language. — xiaoyi
– xiaoyi, Commented Nov 28, 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? — Shay Stibelman
– Shay Stibelman, Commented Nov 28, 2012 at 14:08
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. — xiaoyi
– xiaoyi, Commented Nov 28, 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! — Shay Stibelman
– Shay Stibelman, Commented Nov 28, 2012 at 14:52

xiaoyi · Accepted Answer · 2015-02-21 01:09:24Z

22

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; 
}

edited Feb 21, 2015 at 1:09

answered Nov 28, 2012 at 14:24

xiaoyi

6,7611 gold badge36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shay Stibelman Over a year ago

amazing, thank you so much! works perfectly! Works even with 4 languages (had to add them in the css): jsfiddle.net/Gw4eQ/9

xiaoyi Over a year ago

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.

obl · Accepted Answer · 2012-11-28 14:24:29Z

2

Have you close 'click' with ) ?

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

answered Nov 28, 2012 at 14:24

obl

761 bronze badge

Comments

No Results Found · Accepted Answer · 2012-11-28 15:09:41Z

2

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.

edited Nov 28, 2012 at 15:09

answered Nov 28, 2012 at 13:44

No Results Found

103k38 gold badges199 silver badges232 bronze badges

4 Comments

Shay Stibelman Over a year ago

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).

No Results Found Over a year ago

Yeah I'd use another approach, just wanted to let you know why your code wasn't working.

Shay Stibelman Over a year ago

which was exactly why I came here and asked the great hive mind :)

No Results Found Over a year ago

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

Collectives™ on Stack Overflow

html - change language using element.lang

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related