Articles | Prêt à lire - Redirecting The Visitor
|
back
Introduction
Have you ever wanted to display a different page in
another language for non-English visitors to your site? This article explains
how, in Netscape Navigator 4 and Microsoft Internet Explorer 4, you can trap
which language the visitors browser is using and then show them either a
pre-translated version of your page. For Microsoft Internet Explorer 4 this
article also shows how to use page transitions to dissolve a document into the
translated document.
Why Prêt à lire? Well its a play on words: Prêt à
Porter meaning Ready to Wear, Prêt à lire meaning Ready to Read.
Trapping the browsers language
The following JavaScript 1.2 code will check the value
of the navigator objects language property in NN4 and the browserLanguage
property in MSIE4:
// The following only works in JavaScript 1.2 or greater:
<SCRIPT LANGUAGE="JavaScript1.2"><!--
if (navigator.appName == 'Netscape')
var language = navigator.language;
else
var language = navigator.browserLanguage;
var code = language.substring(0,2);
//--></SCRIPT>
|
As can be seen from the list of language
values there are several subsets of each main language. To avoid too much
work, we can restrict ourselves to the main set of languages by extracting the
first two characters of the language variable using the substring()
method.
Redirecting the visitor
The following JavaScript code, detects the language as
above, but then restricts the languages it supports to just French ('fr'),
German ('de'), Italian ('it'), Spanish ('es') and
Portuguese ('pt'). Any other languages found are ignored and English ('en')
is used instead.
The showpage() function accepts the language code
and opens up a new window centered in the middle of the screen, with the
required pre-translated document loaded, where the filenames of the
pre-translated documents are msg-en.htm, msg-fr.hmtl, msg-de.htm, msg-it.htm,
msg-es.htm and msg-pt.htm:
<SCRIPT LANGUAGE="JavaScript1.2"><!--
// The following only works in JavaScript 1.2 or greater:
function showpage(code) {
var Y = (screen.height - 400)/2;
var X = (screen.width - 600)/2;
msgWindow = window.open('','targetName2','height=400,
width=600,screenX='+X+',screenY='+Y+',left='+X+',top='+Y);
msgWindow.location.href = 'msg-' + code + '.htm';
}
if (navigator.appName == 'Netscape')
var language = navigator.language;
else
var language = navigator.browserLanguage;
var code = language.substring(0,2);
if (code == 'fr' || code == 'de' || code == 'it' |
| code == 'es' || code == 'pt')
showpage(code);
else
showpage('en');
//--></SCRIPT>
|
Special Effects
How about displaying the page in English, and before
the visitors eyes fading out the English version and fading in the translated
version? Impossible? Not with Microsoft Internet Explorer 4 and page
transitions. Placing the following META tags in the head of your documents you
can fade in the document as it loads (page-Enter) and fade out the
document as it unloads (page-Exit):
<HEAD>
<META http-equiv="page-Enter" CONTENT=
"RevealTrans(Duration=4,Transition=12)">
<META http-equiv="page-Exit" CONTENT=
"RevealTrans(Duration=4,Transition=12)">
</HEAD>
|
The revealTrans() procedure requires two
parameters, Duration the number of seconds that the transition should
last, and Transition the type of transition required, there are 23
types, type 12 being Random Dissolve. Now all we need is a mechanism to display
the English document then after a small delay to display the translated
document.
The following JavaScript code will display the english.htm
document in a centered popup window, but only if the browsers language is
French, German, Spanish, Italian or Portuguese:
<SCRIPT LANGUAGE="JavaScript1.2"><!--
// The following only works in JavaScript 1.2 or greater:
function showpage() {
var Y = (screen.height - 400)/2;
var X = (screen.width - 600)/2;
msgWindow = window.open('','targetName2','height=400,
width=600,screenX='+X+',screenY='+Y+',left='+X+',top='+Y);
msgWindow.location.href = 'english.htm';
}
if (navigator.appName == 'Netscape')
var language = navigator.language;
else
var language = navigator.browserLanguage;
var code = language.substring(0,2);
if (code == 'fr' || code == 'de' || code == 'it' |
| code == 'es' || code == 'pt')
showpage();
//--></SCRIPT>
|
The english.htm document displays the English
text, and then sets a timer using setTimeout() to load the required
foreign language version after 5 seconds:
<HTML>
<HEAD>
<META http-equiv="page-Enter" CONTENT=
"RevealTrans(Duration=4,Transition=12)">
<META http-equiv="page-Exit" CONTENT=
"RevealTrans(Duration=4,Transition=12)">
</HEAD>
<BODY><CENTER>
<H1>Welcome to the JavaScript '<EM>No Content</EM>' Web Site.</H1>
<P>This page has detected that your browser is not using English.
The remainder of the Web Site is in English, however you may be
able to use the AltaVista Translation Service to translate either
a complete page or portions of text.
<P>The AltaVista Translation Service can be located at
<A HREF='http://babelfish.altavista.digital.com'>
http://babelfish.altavista.digital.com</A>
<P>I hope you find this site useful.
<P>
<A HREF="msg-fr.htm">French</A>
<A HREF="msg-de.htm">German</A>
<A HREF="msg-it.htm">Italian</A>
<A HREF="msg-pt.htm">Portuguese</A>
<A HREF="msg-es.htm">Spanish</A>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
// The following only works in JavaScript 1.2 or greater:
if (navigator.appName == 'Netscape')
var language = navigator.language;
else
var language = navigator.browserLanguage;
var code = language.substring(0,2);
if (code == 'fr' || code == 'de' || code == 'it' |
| code == 'es' || code == 'pt')
setTimeout("location.href = 'msg-' + code + '.htm'",5000);
//--></SCRIPT>
</CENTER></BODY>
</HTML>
|
Working Examples
Why not try out the two working examples Redirecting
the visitor and Special
Effects - both of these working examples simulates a french browser.
Articles | Prêt à lire - Redirecting The Visitor
| back
|
