This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
Help with translating webpage

How can i integrate the translation form in the website itself, without requiring the user to visit any external page for translation.(ie google translate) So my visitors will be able to translate form a foreign language content into their native language by simply clicking the country flag icon.

Browser: ie8

OS: winxp

Re: Help with translating webpage

The usual method is to write a separate version in each language.

Re: Help with translating webpage

Hi Peter
Thanks for the reply but i need something like this but using flags not text

http://img.labnol.org/files/translation.html#

i managed to get it to work by recoding the html but sometimes it only loaded the pictures and not text.

Browser: ie8

OS: winxp

Re: Help with translating webpage

Right now the code for your translation selections looks like the following listing.

Code:
<p><a href="#" 0nclick="back('en');">Back to English</a> |
<a href="#" 0nclick="translate('ar');">Translate to Arabic</a> |
<a href="#" 0nclick="translate('fr');">Translate to French</a> |
<a href="#" 0nclick="translate('ru');">Translate to Russian</a></p>


To make the translation work with images of flags, you should only need to replace the text with an image tag. The image tag should contain the original text as "alternate text", so that it will display when there is a mouse hover. And the border should be set to zero to prevent the link tag from creating a border. The code might look like the following code, assuming that the images exist.

Code:
<p><a href="#" 0nclick="back('en');"><img src="ENGL0001.GIF" alt="Back to English" border="0" /></a> |
<a href="#" 0nclick="translate('ar');"><img src="ARAB0001.GIF" alt="Translate to Arabic" border="0" /></a> |
<a href="#" 0nclick="translate('fr');"><img src="FRAN0001.GIF" alt="Translate to French" border="0" /></a> |
<a href="#" 0nclick="translate('ru');"><img src="RUSS0001.GIF" alt="Translate to Russian" border="0" /></a></p>


I left the selection separators ( | ) in the code, but you may want to replace it with something else.

But there is also something in the code that needs fixing. If I select a language, say French, the content changes to French. However, if I return to English and then try another language, the content area is empty. Returning to English is always OK but all the other languages show a blank content area until I force a browser refresh.

I don't have a lot of time to look at the reason right now, but by the time I do, you may have already figured it out.

Note: In the code the "0" in "0nclick" is actually a zero, so the code would display correctly. Fix it to the letter "o" before you use the code.

Browser: Firefox

OS: Solaris, Redhat, Fedora, Suse

Re: Help with translating webpage

Well, I took a look at the Javascript for the language translation and found the error.

The process used, on the page you linked to, is rather simple. Two "div" structures are set up. One is set to "display:block" and the other to "display:none". The original text, in English, is in the one set for "display:block" and the other, which is initially blank, is set to "display:none". When a translation is selected, the English text is read from the "div" and then translated through Google. The returned translation is inserted in the hidden "div" and then the "display" attributes are switched. This then hides the "div" with the English text and displays the "div" with the translation.

Switching back to English does not require a translation. All that happens is the "display" attributes for the two "divs" are switched again. But switching back to English, and then switching to another language, did not work. When the page initially loads, both "div"s are set to "display:block". Since the translation "div" is empty, nothing shows. When a translation is selected, the "div" containing the English is set to "display:none" and the translated text is inserted in the translation "div". When you switch back to English, the "display" attribute for both "div" is flipped.

But if you then select another translation, the Javascript re-translates the English text, but fails to reset the translation "div" to "display:block". A one line addition is all it needed. If you are going to use the same code, I can send you the fix.

But the original question was about using flags instead of text. After thinking about it for a while, using flags would be a bad idea. Flags represent countries, not languages. Any particular country can host people with different languages and many languages are spoken in many different countries. Stick with the text links if you doing language translation.

Browser: Firefox

OS: Solaris, Redhat, Fedora, Suse