In that case you can add an if/else statement to adjust css styling using sass exemple: $lang:english $left:left .content{ text-align:$left; float:$left; } @if ($lang == arabic){ $left:right; }
From my experience i would say you should make another hbs or html file with all the wanted orientation then link it with the flag in the top page and easey pizy women swiizy
the better solution is to save a variable in the browser local storage and change the languages according to that, i always do this one it works pretty well!
I don't think it's better. Because if you do it like that, when you send de webpage to someone else, it will not be sent in the language you meant to send.
I have small problem, when the page reloads, it takes me to / instead of the hash i clicked on, any solution? example i click on en, it takes me to index.html#en and then it will instantly take me to index.html
soy español y necesitaba un tutorial asi, sos un genio la mayoria de videos usan php y json y necesitaba uno donde utilizaran archivos html y me encanto la parte donde hablas español nwn
Since this tutorial isnt working i found a fix: give your buttons the onclick event timeFunction(), and add the function: function timeFunction() { setTimeout(function(){ history.go(0); }, 200); } to your script. this will refresh the page after 200ms, also remove the for loop he made, it sucks ass.
i dont know why it is not working today, but my soulution for that is to wrap the location.reload(true) with setTimeout function, that should do the work
Interesting, thank you. Now if you have a big webpage with a lot of elements, would there be a more efficient way to change the language for each element without having to list them all out in the 'Define language via window hash' section? Perhaps it would be doable with a loop, so long as you give the elements the same name in the main body as in the elements in the language data variable (i.e. don't name one "hi" and the other "welcome" as here)?
Maybe this question is unrelated to this video, but how do websites with tons of foreign texts like Japanese or Chinese maintain their webpages? Do they write everything in multiple languages and use conditionals like you did to detect them? Is that the best way ?
Very clean and quick tut. However, you forgot one else statement: //define window via window hash, detect language if(window.location.hash){ if(window.location.hash == "#dutch"){ hi.textContent = language.dutch.welcome; } else { hi.textContent = language.eng.welcome; } }
Actually the else statement is not necessary as you're then just repeating code that you've already created before in HTML. #1 rule is to keep your code DRY. DRY meaning Don't Repeat Yourself.
@@ultralooter else statement is only necessary when the if statements aren't detected. Thus I use else for the default language as a backup but in my case I don't end up needing the else thus is disregarded because it's already in the HTML. If it doesn't work for you then it has to do with your JS or maybe you're using an old browser.
@@josemiguelmedina4953 No, was trying to fix the problem for the entire day, and eventually gave up. And I found the other tutorial was way more straight forward and easier than this one using PHP. hope you can find this useful. th-cam.com/video/cgvDMUrQ3vA/w-d-xo.html
while i do that , in Sign Up and Sign In ( buttons ) it doesn't work . while i turn the window to another language the buttons in the body all of them are hidden ,
Thanks for this. Simple option to what can be complicated. One issue I am having is that when the anchor is clicked, it initially sets the '#eng' but when it reloads it reverts to the url that was first loaded. Thoughts?
So if anyone else ran into this I found the solution. You need to set the 'window.location.hash = 'your hash here'' then call the reload. Otherwise the reload will just reload the previous path.
Hello. The window.hash.location doesn't work properly on Mozilla, Chrome and Opera. Can you tell me what would be a fix or a workaround? Amazing video. Thanks
I had to give the anchor tags an onclick function and write this on the function reloadPage() { setTimeout(function () { location.reload(); }, 100); } I think that adding the hash to the url and reloading the page was happening at the same time thus the timeout for the reloadPage function.
Hello to everyone and especially to youtuber. This is a perfect video and tutorial. So how we can change all the content from a website to another language?
hello, i saw your comment on multiple video did you ever got your question answered im on the same problem as you it work fine for 1 page but not the other
I followed the video but in the console, it tells me this Uncaught TypeError: Cannot set properties of undefined (setting 'onclick'). Which does not change the language in the browser. can you help?
Eden Sharvit haven't tried, but some languages like Arabic and Urdu are automatically aligned to the right so may need to also add some additional CSS styling to adjust for the language change for visual consistency.
I've tried doing it with display flex/none switching and grabbing the id to remove things. was a clusterfuck and didn't work for at least 4 days. guess what I watched your video before but I tought this was hard.. this is not at all I've done arrays in java before
I'm wondering if anyone knows how to style the font differently for two languages. For example, I have a website with English and Korean, but the Korean font needs to be smaller and have a different font-family than when it is in English. A CSS :lang() does not seem to work as I do not have the elements already predefined (ex Hello) and instead am using javascript. Any help or ideas would be appreciated.
no idea but I am also trying to translate my page for both korean and english. Early on I picked a google fonts called Nanum Gothic because the google description said it was good with korean characters. The korean text is higher but they don't appear to be a big difference that requires alternative styling. But I'm just starting this and am a more novice developer.
Working solution for you: // remove hash and scroll to section logic // store the hash (DON'T put this code inside the $() function, it has to be executed // right away before the browser can start scrolling! var target = window.location.hash, target = target.replace('#', ''); // delete hash so the page won't scroll to it history.pushState('', '', window.location.pathname); // stackoverflow.com/questions/36736483/how-to-clear-hashtag-from-url-on-page-load // window.location.hash = ""; // stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page // now whenever you are ready do whatever you want // (in this case I use jQuery to scroll to the tag after the page has loaded) $(window).on('load', function () { setTimeout(function () { // wait 1.5 seconds for page to render if (target) { // exists === true $('html, body').animate({ scrollTop: $("#" + target).offset().top - 80 }, 1000, 'swing', function () { }); } }, 800); }); var dataReload = document.querySelectorAll("[data-reload]"); var language = { en: { greeting: "Smiling's never been so easy" }, cn: { greeting: "微笑从未如此轻松" } } if (target) { if (target === "cn") { greeting.textContent = language.cn.greeting; } } for (i = 0; i
Hy! First of all ty for share this method !! I've been trying to use it but I aground with a problem that i cant solve, hope u can still helping me ! :D If I call the script in any other part of the code this dosnt works, only works when the script is under the ... also if I have more id's in my code thoose other id's dosnt work. I wanna call the script in the head, how can i do it? Thanks! :D
Well! Maybe that works but i don't think it is a good practice to do it this way. Besides, never use a function inside a for loop. There are so many ways to to that instead of using a function inside a for loop.
Shreshthi Jain There’s many different ways to do this. This video just shows one method I used in just JavaScript for client-side applications. There are also server-side solutions as well that operate differently. Many kind of approaches and there’s no right answer. Depends on you, your team, company, etc: just gotta research, play with a few ways on how to do it and see which works best for your case.
Shreshthi Jain if you’re using the method from the tutorial you would use JavaScript (like in the tutorial) to apply the language via a hash to every page on your site. So you’d replicate the same thing for each directory or you can use 1 JavaScript file but make sure it’s in every html or php file that’ll be used for pages like books.html affiliates.html etc
I hate javascript, dumbest language ever. Over complicated with all those brackets n stuff. Could be made easier to read and have less symbols .. but NOOOOOO, we need ALL THE BRACKETS
Brackets are actually very useful, much better than the SUB / END SUB of Visual Basic or the annoying tabs in Python. You can just create a separate scope using brackets, simple and easy. And it is not only JS, but also TypeScript, AssemblyScript, C++, Java, C#, Rust, and most languages actually.
Great video, what if we have a 3rd language but this time its an RTL language like arabic, how do we flip the orientation if you have an idea
In that case you can add an if/else statement to adjust css styling if it's all rtl language like Arabic or Urdu
thank you
@@algeriennesaffaires7017 no problem
In that case you can add an if/else statement to adjust css styling using sass
exemple:
$lang:english
$left:left
.content{
text-align:$left;
float:$left;
}
@if ($lang == arabic){
$left:right;
}
From my experience i would say you should make another hbs or html file with all the wanted orientation then link it with the flag in the top page and easey pizy women swiizy
the better solution is to save a variable in the browser local storage and change the languages according to that, i always do this one it works pretty well!
Hey man, that sounds interesting, do you have a code example that you're willing to share for that?
I don't think it's better. Because if you do it like that, when you send de webpage to someone else, it will not be sent in the language you meant to send.
I have small problem, when the page reloads, it takes me to / instead of the hash i clicked on, any solution?
example i click on en, it takes me to index.html#en and then it will instantly take me to index.html
i am having the same problem , how did you solved
@@anupritakasbekar8172 Did you find a solution?
soy español y necesitaba un tutorial asi, sos un genio la mayoria de videos usan php y json y necesitaba uno donde utilizaran archivos html y me encanto la parte donde hablas español nwn
Since this tutorial isnt working i found a fix: give your buttons the onclick event timeFunction(), and add the function:
function timeFunction() {
setTimeout(function(){ history.go(0); }, 200);
}
to your script.
this will refresh the page after 200ms, also remove the for loop he made, it sucks ass.
It works, but do you know why the styling changes?
your "it sucks ass" part made me laugh. And nice work, it worked.
incredible, you saved my precious time, may the gods of the code bless you
instead of history.go(); I used location.reload();
because for some reason the first was not working on Safari
thank you btw!
THANK YOU !
i dont know why it is not working today, but my soulution for that is to wrap the location.reload(true) with setTimeout function, that should do the work
same problem/fix
can you send me the code sample solution for that ? I cannot seem to get it to work ! arielivansanchezlescano@gmail.com thanks a lot
Thx mate!! You saved me after so many other bad tutorials!
Perfect video man, you made a great job! Thanks for the content
Interesting, thank you. Now if you have a big webpage with a lot of elements, would there be a more efficient way to change the language for each element without having to list them all out in the 'Define language via window hash' section? Perhaps it would be doable with a loop, so long as you give the elements the same name in the main body as in the elements in the language data variable (i.e. don't name one "hi" and the other "welcome" as here)?
Maybe this question is unrelated to this video, but how do websites with tons of foreign texts like Japanese or Chinese maintain their webpages? Do they write everything in multiple languages and use conditionals like you did to detect them? Is that the best way ?
Awesome work man!!!! Muchisimas Gracias, desde Monterrey, Mexico
I have a problem, when I change the language the page reload but is in the same page.
once i add the var dataReload = docuemt.querySelectorAll("[data-reload]"); my page wont switch languages anymore neither does it reload, what do i do?
Very clean and quick tut.
However, you forgot one else statement:
//define window via window hash, detect language
if(window.location.hash){
if(window.location.hash == "#dutch"){
hi.textContent = language.dutch.welcome;
} else {
hi.textContent = language.eng.welcome;
}
}
Actually the else statement is not necessary as you're then just repeating code that you've already created before in HTML. #1 rule is to keep your code DRY. DRY meaning Don't Repeat Yourself.
Michael Schwartz yes, I am familiar with design patterns. However, somehow the code doesn't function properly without the else statement..
@@ultralooter else statement is only necessary when the if statements aren't detected. Thus I use else for the default language as a backup but in my case I don't end up needing the else thus is disregarded because it's already in the HTML. If it doesn't work for you then it has to do with your JS or maybe you're using an old browser.
Michael Schwartz might be because I use Opera.. But still, it's built on the Chromium engine so I see no issues there. Your logic makes sense though.
i almost got it working with ur fix too, lol
Thank you very much for your video!
nice tutorial! its work
Well done Michael very good videos..
Fantastic video. Thank you so much.
not sure what is happening here mate, mine keep saying dataReload[i] is undefined. please help. thank you !
did you fix it?
@@josemiguelmedina4953 No, was trying to fix the problem for the entire day, and eventually gave up. And I found the other tutorial was way more straight forward and easier than this one using PHP. hope you can find this useful. th-cam.com/video/cgvDMUrQ3vA/w-d-xo.html
Hi! nice video, thx! How would you do it then for a web with lots of written content, divided into many div´s/ p´s? IS there a more "practical" way?
PHP is the better way i guess
Any solution on that? First i though of modifying all the content with a wrapper.innerHTML = `translatedtext`
But it doesn't work like i was thinking
Thank you very much!
while i do that , in Sign Up and Sign In ( buttons ) it doesn't work . while i turn the window to another language the buttons in the body all of them are hidden ,
after loacation.reload() my #eng disapears and loads the other language. why?
hey can you help me ? show me this problem why dataReload[i] is undefined?
you have to change this
(i = 0; i
Muchas gracias! Tu video fue lo que necesitaba! Thkx!!
for me it does not work very well because I have to double click to change the language on my website
The only problem i'm having is with the "
Works on almost every browser, not on Firefox, any ideas why? The hash disappear on reload
the same is happening to me on Google Chrome
Thanks for this. Simple option to what can be complicated. One issue I am having is that when the anchor is clicked, it initially sets the '#eng' but when it reloads it reverts to the url that was first loaded. Thoughts?
So if anyone else ran into this I found the solution. You need to set the 'window.location.hash = 'your hash here'' then call the reload. Otherwise the reload will just reload the previous path.
@@ryancarville1232 i still get no change when i click on either language, its just stuck, i dunno how i can change it, why so, is it a glitch?
Nice solution, it works perfect with one page but how can I keep the hash if I navigate to another page?
You can use LocalStorage to store the language and set it upon each page visit.
Awesome tutorial!
Hello. The window.hash.location doesn't work properly on Mozilla, Chrome and Opera. Can you tell me what would be a fix or a workaround? Amazing video. Thanks
window.location.hash not window.hash.location
good video and good español, congratulations!
Thanks
The hash doesn't change properly when the page reload that makes it stay on the same language
I added onclick="window.location.href = 'index.html#en' to my anchor tag and that worked for me
I had to give the anchor tags an onclick function and write this on the
function reloadPage() {
setTimeout(function () {
location.reload();
}, 100);
}
I think that adding the hash to the url and reloading the page was happening at the same time thus the timeout for the reloadPage function.
@@berenjor This comment deserves more likes :)
@@blackguytraveller7797 I know right?
@@berenjor This is the best and working comment
Hello to everyone and especially to youtuber.
This is a perfect video and tutorial.
So how we can change all the content from a website to another language?
Thank you so much ! and how can I add more pages and keep navigating in the selected website?
Thank you
hello, i saw your comment on multiple video did you ever got your question answered im on the same problem as you it work fine for 1 page but not the other
@@afrikanhustla2286 no 😭
@@dr4382 i found a way to do it after coding the entire day
@@afrikanhustla2286 really?? How? I can’t since I have not started my course yet could you send me links or info to learn please??
@@dr4382 i ended up using php much easier i will try to upload a video
Thanks, keep moving forward :)
didnt work unfortunately the web page reloads each i think click on french english and the translation doesn't change
hey @marco Gianni have you find a solution? I am stuck in the same problem
Big thx !
I followed the video but in the console, it tells me this Uncaught TypeError: Cannot set properties of undefined (setting 'onclick'). Which does not change the language in the browser. can you help?
in for loop change "i
the location.reload returns the url to index.html without the hash
Nice tutorial, by the way which one is than amazing plugin which provide you information about the javascript attributes?
If I recall correctly it's built into brackets
@@michaelsapps you mean thats the name of the pluging?
@@jmcharro9947 Emmet is the plugin
which IDE did you used??
u are a god
Quite efective . I'll refactor mine when I have time . Gracias !!
very useful. does it work the same for rtl and ltr?
Eden Sharvit haven't tried, but some languages like Arabic and Urdu are automatically aligned to the right so may need to also add some additional CSS styling to adjust for the language change for visual consistency.
"iteration" perhaps?
Yes
Pretty clever Dad joke though
Mine didn't work. I'm having a problem on the line 38.
Thank you. what is the name of the text editor you use?
Brackets
I've tried doing it with display flex/none switching and grabbing the id to remove things. was a clusterfuck and didn't work for at least 4 days. guess what I watched your video before but I tought this was hard.. this is not at all I've done arrays in java before
P.S. put the lang translation above the anchor reload or it will be totally janky as it needs 2 clicks to fetch the translations
Allright
im having a problem it reloads it 2 times instead of 1 and it keeps it on the same language
This is the error how can i fix it:
Uncaught TypeError: Cannot set property 'onclick' of undefined
@@draganjovanoski7649 same here. did you find any solution?
when i added this section "for ( i = 0; i
I got the same problem! Can you help if u found a solution ?
for (i = 0; i
I'm wondering if anyone knows how to style the font differently for two languages. For example, I have a website with English and Korean, but the Korean font needs to be smaller and have a different font-family than when it is in English. A CSS :lang() does not seem to work as I do not have the elements already predefined (ex Hello) and instead am using javascript. Any help or ideas would be appreciated.
no idea but I am also trying to translate my page for both korean and english. Early on I picked a google fonts called Nanum Gothic because the google description said it was good with korean characters. The korean text is higher but they don't appear to be a big difference that requires alternative styling. But I'm just starting this and am a more novice developer.
scratch that. It looks fine. I recommend that font from google
I get this error here:
......
// Define language reload onclick illiteration
for (i = 0; i
Hey Raul Kubi, do you have a solution to this error?
It should be dataReload.length-1
for (i = 0; i
thanks, thats not a JSON object, i think its just a javascript object.
JSON === JavaScript Object Notation :)
This code doesn't work anymore I'm using visual studio code.. :(
thank you :D, i was thinking im just blind and stupid..
I'm a total virgin in this area. Are you using any specific program to write the "strings?"
Is it possible to change the website title with this method?
Airbee yes but it’s dynamic and won’t help with search results. Best to do that via metadata
What about multiple pages? if I go to other page it does not remember the language and puts it to default language
did you get any idea about this? Kindly reply me in mobitecthlogamuhilan@gmail.com
Can you do history.pushState('', '', window.location.pathname); to remove hash from url after load?
I haven't tested that out. Have you tried it?
Working solution for you:
// remove hash and scroll to section logic
// store the hash (DON'T put this code inside the $() function, it has to be executed
// right away before the browser can start scrolling!
var target = window.location.hash,
target = target.replace('#', '');
// delete hash so the page won't scroll to it
history.pushState('', '', window.location.pathname); // stackoverflow.com/questions/36736483/how-to-clear-hashtag-from-url-on-page-load
// window.location.hash = ""; // stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page
// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).on('load', function () {
setTimeout(function () { // wait 1.5 seconds for page to render
if (target) { // exists === true
$('html, body').animate({
scrollTop: $("#" + target).offset().top - 80
}, 1000, 'swing', function () { });
}
}, 800);
});
var dataReload = document.querySelectorAll("[data-reload]");
var language = {
en: {
greeting: "Smiling's never been so easy"
},
cn: {
greeting: "微笑从未如此轻松"
}
}
if (target) {
if (target === "cn") {
greeting.textContent = language.cn.greeting;
}
}
for (i = 0; i
Hy! First of all ty for share this method !! I've been trying to use it but I aground with a problem that i cant solve, hope u can still helping me ! :D
If I call the script in any other part of the code this dosnt works, only works when the script is under the ... also if I have more id's in my code thoose other id's dosnt work.
I wanna call the script in the head, how can i do it?
Thanks! :D
Well!
Maybe that works but i don't think it is a good practice to do it this way.
Besides, never use a function inside a for loop.
There are so many ways to to that instead of using a function inside a for loop.
it didn't work
my doubt is that when i click on hindi on one page, I want all my other pages to open in hindi. How should I do that??
Shreshthi Jain There’s many different ways to do this. This video just shows one method I used in just JavaScript for client-side applications. There are also server-side solutions as well that operate differently. Many kind of approaches and there’s no right answer. Depends on you, your team, company, etc: just gotta research, play with a few ways on how to do it and see which works best for your case.
@@michaelsapps sir can you just tell me one way to do so? I have used the same code for language translation so if u could help?
Shreshthi Jain if you’re using the method from the tutorial you would use JavaScript (like in the tutorial) to apply the language via a hash to every page on your site. So you’d replicate the same thing for each directory or you can use 1 JavaScript file but make sure it’s in every html or php file that’ll be used for pages like books.html affiliates.html etc
Doesn't seem viable when it comes to a lot of text...
not working for me
nothing did work! even tho i followed the steps carefully
chu
« Bienvenidos a todos » and not « bienvenidos todos » !
I hate javascript, dumbest language ever. Over complicated with all those brackets n stuff. Could be made easier to read and have less symbols .. but NOOOOOO, we need ALL THE BRACKETS
Brackets are actually very useful, much better than the SUB / END SUB of Visual Basic or the annoying tabs in Python. You can just create a separate scope using brackets, simple and easy. And it is not only JS, but also TypeScript, AssemblyScript, C++, Java, C#, Rust, and most languages actually.