How can I switch the entire HTML file in a browser, by changing the selected language?
up vote
0
down vote
favorite
To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?
javascript jquery html tags lang
add a comment |
up vote
0
down vote
favorite
To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?
javascript jquery html tags lang
1
just use a<a>tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
– GottZ
Nov 19 at 15:15
you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23
Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?
javascript jquery html tags lang
To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?
javascript jquery html tags lang
javascript jquery html tags lang
asked Nov 19 at 15:13
Dafne Deniz
1
1
1
just use a<a>tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
– GottZ
Nov 19 at 15:15
you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23
Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28
add a comment |
1
just use a<a>tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.
– GottZ
Nov 19 at 15:15
you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23
Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28
1
1
just use a
<a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.– GottZ
Nov 19 at 15:15
just use a
<a> tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.– GottZ
Nov 19 at 15:15
you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23
you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23
Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28
Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.
However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.
add a comment |
up vote
0
down vote
If you don't want to use <a> tags for some reason, try this:
//add event listener to your language buttons with their IDs:
$('#lang1, #lang2, #lang3').on('click', function(event){
//identify which language is being clicked
var langClicked= "#" + $(this).attr('id');
//take action depending on clicked button
switch(langClicked){
case '#lang1':
//do something when its #lang1
break;
case '#lang2':
//do something when its #lang2
break;
case '#lang3':
//do something when its #lang2
break;
}
});
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.
However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.
add a comment |
up vote
1
down vote
There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.
However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.
add a comment |
up vote
1
down vote
up vote
1
down vote
There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.
However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.
There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info.
Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html.
There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.
However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.
answered Nov 19 at 15:39
Anurag Sinha
388412
388412
add a comment |
add a comment |
up vote
0
down vote
If you don't want to use <a> tags for some reason, try this:
//add event listener to your language buttons with their IDs:
$('#lang1, #lang2, #lang3').on('click', function(event){
//identify which language is being clicked
var langClicked= "#" + $(this).attr('id');
//take action depending on clicked button
switch(langClicked){
case '#lang1':
//do something when its #lang1
break;
case '#lang2':
//do something when its #lang2
break;
case '#lang3':
//do something when its #lang2
break;
}
});
add a comment |
up vote
0
down vote
If you don't want to use <a> tags for some reason, try this:
//add event listener to your language buttons with their IDs:
$('#lang1, #lang2, #lang3').on('click', function(event){
//identify which language is being clicked
var langClicked= "#" + $(this).attr('id');
//take action depending on clicked button
switch(langClicked){
case '#lang1':
//do something when its #lang1
break;
case '#lang2':
//do something when its #lang2
break;
case '#lang3':
//do something when its #lang2
break;
}
});
add a comment |
up vote
0
down vote
up vote
0
down vote
If you don't want to use <a> tags for some reason, try this:
//add event listener to your language buttons with their IDs:
$('#lang1, #lang2, #lang3').on('click', function(event){
//identify which language is being clicked
var langClicked= "#" + $(this).attr('id');
//take action depending on clicked button
switch(langClicked){
case '#lang1':
//do something when its #lang1
break;
case '#lang2':
//do something when its #lang2
break;
case '#lang3':
//do something when its #lang2
break;
}
});
If you don't want to use <a> tags for some reason, try this:
//add event listener to your language buttons with their IDs:
$('#lang1, #lang2, #lang3').on('click', function(event){
//identify which language is being clicked
var langClicked= "#" + $(this).attr('id');
//take action depending on clicked button
switch(langClicked){
case '#lang1':
//do something when its #lang1
break;
case '#lang2':
//do something when its #lang2
break;
case '#lang3':
//do something when its #lang2
break;
}
});
answered Nov 19 at 15:40
sticky_elbows
579
579
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377569%2fhow-can-i-switch-the-entire-html-file-in-a-browser-by-changing-the-selected-lan%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
just use a
<a>tag to point to the correct language. don't make the same url point to different languages. that's bad practice and bad for search engines.– GottZ
Nov 19 at 15:15
you could store the language in local storage and when the page loads edit all links so they use the file of that language (and redirect current page if needed), best bet is to use a server side language and some sort of resources file though
– Pete
Nov 19 at 15:23
Turk musun? @dafne deniz
– sticky_elbows
Nov 19 at 15:28