Geek Answers Handbook

Html - changing the language with element.lang

The first question is about the stack, so cheers! I am trying to develop a new way (apparently since I did not see a solution for this online, perhaps because it is impossible) to change the language of the written HTML elements using JS and the lang property.

Basically, I created several shortcuts with the lang property in each of them, so giving a specific lang to the display value -none- hides it and the value -inherit- to display it. Thus, 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 it works!

Now i created

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

tags around English text, as well as any other language with the lang property. I tried using:

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

This does not work.

Any ideas?

Thanks, Shay

+8
javascript html lang
source share
3 answers

When loading your page, enter <body class="it"> and all tags :lang(en) will be hidden.

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

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

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

It is more elegant and faster.

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

Use the :not selector to work with a large number of languages. demo

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

Do you close 'click' c)?

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

This is not true:

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

There is no "display" attribute, use: instead

 $('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 did not put your function correctly:

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

It should be: });

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

Also, I would use inline , not inherit . "inherit" does not mean "default", it means "inherit this property from the parent", which is likely to be block . <a> displays inline by default.

+1
source share

More articles:


All Articles