Solved

Direct a link to same page (Multilanguage website)

Posted on 2004-09-19
22
296 Views
Last Modified: 2008-02-01
Hello

I have a simple HTML website (approx 10 pages).
In the right hand side I have a graphic menu for languages (same site in varied languages).
My question is very simple I wish to direct the user to the same page in the other language he click on.

For example the default site is English, the user view the “contact” in English version and he clicks on “polish” on the languages menu bar.
I wish to find a quick way to tell the page to link to the “contact” page in the polish language.

The directories are for example English (en folder) polish (pl folder) and etc. all pages are name the same (English).

PS. All the pages for all the language have the same name (in English).

Now I can of course do it manually but it will take years, is there any other short way?
0
Comment
Question by:Refael
  • 9
  • 7
  • 4
  • +1
22 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12096315
Hi Refael,

Can you use server-side? If you can, the problem becomes a lot simpler. You'd have a check in every page for lang=something in the URL. If you want Polish, attach lang=pl in the URL, then in the code, check for that and if it's currently on the English version, then send a location:header to change that.

A second method if you have server-side would just be to change the folder name in the link and use your own page you're on as a variable and plug it in there.

If you don't have server-side, not much can be done, but you can use Javascript and weedle it out.


Can you post and tell us if you have server-side or not, and if you do, what server-side language you can use?

Regards,
Zyloch
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12096973
Lets suggest you have a two directories separation between the two languages:
mysite.com/pl/
and
mysite.com/en/

In the /pl/ directory you could write a language.js which you include into your html:
/pl/language.js
function switchLanguage()
{
document.location.href = document.location.href.replace("/pl/", "/en/");
}


You then edit your pl/menu.html and add:
<script src="language.js"></script><a href="#"  onClick="switchLanguage();">English flag</a>

You then create a file
/en/language.js:
function switchLanguage()
{
document.location.href = document.location.href.replace("/en/", "/pl/");
}

And edit your en/menu.html and add:
<script src="language.js"></script><a href="#"  onClick="switchLanguage();">Polish flag</a>

Should do the trick unless some folks have their javascript turned of :-/

-r-
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 12097141
You can also use JavaScript to detect the browser's language settings and redirect accordingly (see: http://www.javascriptkit.com/script/script2/language.shtml).  You can get a list of language codes at http://www.w3.org/WAI/ER/IG/ert/iso639.htm to use to modify the script to support whichever languages you wish to support.
0
 

Author Comment

by:Refael
ID: 12099138
First of all thanks a lot, I prefer Roonaan answer since it was easier for me to understand.

It seems to work fine but I have a question

Since the English pages are outside (not in a folder) and only the other languages are in a folder (e.g. pt, pl, de and etc..) I tried to change instead of “/en/" just "/". Form the PT it turns to the English page no problem but from the English page back there is a problem, it doubles the root name and therefore the page can not be found.

Second question how is it possible to add more languages since I have around 5?
Should it be something like this: ("/en/", "/pl/”, "/de/", "/pt/")?

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12099296
Your best bet would be to have a javascript variable on each page telling you what language it is. For example, you would have lang=pl attached to your URL. Then, you'd have this in your Javascript.

<script language="javascript">
<!--
var lang="en";

var winLoc=self.location.href;
var qp=winLoc.indexOf("?");
if (qp>7&&winLoc.indexOf("lang=")>qp) {
   var qrsString=winLoc.split("?");
   qrsString=qrsString.split("&").split("=");
   for (var i=0;i<qrsString.length;i+=2) {
      if (qrsString[i]=="lang") {
         lang=qrsString[i+1];
      }
   }
}

if (lang.length!=2&&lang!=lang.replace("/[A-Za-z]/","")) {
   lang="en";
}

document.location.href = document.location.href.replace("/[A-Za-z]{2}/", "/"+lang+"/");



Basically, I would recommend moving all the English files to en folder. It makes since a lot simpler to code, saves CPU cycles. If you want, you can always check if your server supports mod_rewrite(Apache for instance) and make a .htaccess file that will redirect all page views without any folder to the /en/ folder.
         
0
 

Author Comment

by:Refael
ID: 12099331
Well thanks, it might be easier for you to understand but for me it’s a bit of a mess :-)
I don’t mind having the EN pages in a folder but how will I direct the index page?
I know I can use this “.htaccess” though but I don’t know to call it? Should it be index.htaccess?
Now what should I do? Should I put this JS in the head of every page? And what should be written in the link? I would appreciate if you can explain as you explain to someone who is not as experienced and you :-) thanks again many
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 12099338
.htaccess is the whole name of the file - it's unconventional, but that's what it is.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12099346
Like humeniuk said =)

That's mainly for fine tuning and not all servers have mod_rewrite. The js file, you can just put into the external one that Roonan wrote for us.

Worry about the .htaccess after your whole site is done, it's not even too necessary.
0
 

Author Comment

by:Refael
ID: 12099468
Ok thanks, I think I will wait for Roonan because apparently he is the only who "speaks" my language. sorry I couldn’t understand what I should do.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12099475
No problem, but you only had to put my script above into <script> tags (I missed the closing one by accident) into Roonan's external javascript file and it should work.
0
 

Author Comment

by:Refael
ID: 12099554
What happens is the page keeps reloading/refreshing it self non-stop
this is the external JS file as i add your code:

var lang="en";

var winLoc=self.location.href;
var qp=winLoc.indexOf("?");
if (qp>7&&winLoc.indexOf("lang=")>qp) {
   var qrsString=winLoc.split("?");
   qrsString=qrsString.split("&").split("=");
   for (var i=0;i<qrsString.length;i+=2) {
      if (qrsString[i]=="lang") {
         lang=qrsString[i+1];
      }
   }
}

if (lang.length!=2&&lang!=lang.replace("/[A-Za-z]/","")) {
   lang="en";
}

document.location.href = document.location.href.replace("/[A-Za-z]{2}/", "/"+lang+"/");

function switchLanguage()
{
document.location.href = document.location.href.replace("/", "/pt/");
}
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 36

Expert Comment

by:Zyloch
ID: 12099643
Er...

Right after var lang="en"; add this:

var continue=false;

Then, inside the loop, have this:

for (var i=0;i<qrsString.length;i+=2) {
      if (qrsString[i]=="lang"&&qrsString[i+1]!=lang) {
         lang=qrsString[i+1];
         continue=true;
         break;
      }
      if (qrsString.length==(i+2)) {
         if (winLoc.indexOf("/en/")==-1) {
            continue=true;
         }
      }
}

Then, finally, have this:

if (continue) {
document.location.href = document.location.href.replace("/[A-Za-z]{2}/", "/"+lang+"/");
}
0
 

Author Comment

by:Refael
ID: 12099753
Java Script Error...................
where is Roonaan, it was simple no i am lost :-)
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12099761
He'll be here =)
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12099974
Sorry, Timezone diff etc :-)

Well, of course you could always do

document.location = document.location.href.replace('www.mydomain.com/','www.mydomain.com/pl/');

In principle you could have two language.js files. I've changed them a little to support multiple languages
1. A basic one for the english version:
function gotoLanguage(language)
{
  document.location = document.location.href.replace('www.mydomain.com/','www.mydomain.com/'+language+'/');
}

with: <a href="#" onClick="gotoLanguage('pl');>Polish</a><a href="#" onClick="gotoLanguage('dk');>Danish</a>

In every language directory you then could have an somewhat different language.js because of the directory you are in.
/pl/language.js
function gotoLanguage(language)
{
  if(language == 'en')
   document.location = document.location.href.replace('/pl/','/'); //just remove the language dir piece
  else
   document.location = document.location.href.replace('/pl/','/'+language+'/');
}

with: <a href="#" onClick="gotoLanguage('en');>English</a><a href="#" onClick="gotoLanguage('dk');>Danish</a>

Another option you might prefer is to have just 1 language.js files and not say 4 when you have en/pl/dk/nl
You could for example use a function to which you tell what the original language is and to which language its supposed to go:

function gotoLanguage(currentlanguage, language)
{
  if(currentlanguage=='en')
  {
   if(language != 'en')
    document.location = document.location.href.replace('www.domain.com/','www.domain.com/'+language+'/');
 }
 else
 {
   if(language == 'en')
    document.location = document.location.href.replace('/' + currentlanguage + /','/'); //just remove the language dir piece
   else
    document.location = document.location.href.replace('/' + currentlanguage + /','/'+language+'/');
 }
}

And then have all you pages have

<script src="http://www.domain.com/language.js"></script>
<a href="#" onClick="gotoLanguage("en","pl")>English to polish</a>
<a href="#" onClick="gotoLanguage("pl","en")>Polish to english</a>

There is also a way where you set the current language as a javascript variable but this I'll write another time, if you are intereseted in such a way.

regards

-r-
0
 

Author Comment

by:Refael
ID: 12102055
Hi thanks,
this line below gives an error on the page, i tired to close it with ";" but didnt help.

<a href="#" onClick="gotoLanguage("en","pl")>English to polish</a>
0
 

Author Comment

by:Refael
ID: 12102203
ok i just chnage the "" to ' and no error
what should i write or remove when you indicated "just remove the language dir piece"?
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 125 total points
ID: 12102858
//just remove the language dir piece
that was an comment on what is happening in that line of code. Because English is in your root, you have to take the polish version -for example- and strip the /pl/ piece so that domain.com/pl/index.html becomes domain.com/index.html. I called it 'stripping the language dir piece' :-)

so there's nothing to edit/write/remove :-)

-r-
0
 

Author Comment

by:Refael
ID: 12103139
Roonaan, thanks many
also thanks for all who helped ! :-)
0
 

Author Comment

by:Refael
ID: 12103826
Just a comment

I have found out that in MAC IE 5.2 and Safari the script is not working, have any idea why?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12106413
Maybe they don't support replace() ? Just a quick guess since I just got home to 47 inbox messages heh
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12106457
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now