Here I am helping how to set
the Multilingual html pages using html, javascript and jquery without
using programming languages like (php, .net, java).
The main reason for using this code is
-very easy to set up on your pages.
-without using any programming languages like php, .net or
java we can change the language on our web pages.
-Its not required session to store the lang in our pages .
-No need to refresh the page.
-On refreshing the pages previously selected lang will sustain
in pages.
-Very easy to modify as per your requirement.
Please follow these steps to set up this code in your web
pages.
Step1: create html page and copy paste the following code .
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Language</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
//to get the lang selected last time from the cookie
function getCookie(c_name)
{
var i,x,y,RKcookies=document.cookie.split(";");
for (i=0;i<RKcookies.length;i++)
{
x=RKcookies[i].substr(0,RKcookies[i].indexOf("="));
y=RKcookies[i].substr(RKcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
//setting up cookie for selected lang
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
//this function calls by default by body on load
//this function checks if any lang is there in cookie if not select default lang as en
function checkCookie()
{
var lang=getCookie("lang");
if (lang!=null && lang!="")
{
changeLang(lang);//chnaging the body content as per lang
}
else
{
// here 1 is the expire day. cookie vl expire after that
setCookie("lang",'en',1);//setting cookie with the default vlang as en(english)
changeLang(lang); //chnaging the body content as per lang
}
}
//switch case checking to chnage the lang in body content
function changeLang(lang)
{
switch(lang)
{
case 'en': $("#divcontent").html("Multilingual html pages using html and jquery"); break;
case 'fn': $("#divcontent").html("Multilingue des pages HTML en utilisant le HTML et jQuery");break;
case 'ch':$("#divcontent").html("多种语言的HTML页面中使用HTML和jQuery"); break;
}
}
//changing the lang on selecting form the li list
function changelangDisplay(lang)
{
if (lang!=null && lang!="")
{
setCookie("lang",lang,1);
changeLang(lang);
}
}
</script>
</head>
<body onload="checkCookie();" >
Please select the language here.....
<li onclick="changelangDisplay('en');">English</li>
<li onclick="changelangDisplay('fn');">Française</li>
<li onclick="changelangDisplay('ch');">中文</li>
<br />
<br />
<div id="divcontent">Multilingual html pages using html and jquery</div>
</body>
</html>
Step 2: jquery library file is being linked with Google if want u can change it to your downloaded.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Step 3: in body onload function
“checkCookie()” is called where you can change default lang value ” en” to lang u want
and expire days for your cookie “1” can also change .
step 4:function “changeLang(lang)”here you can define the languages content for your web pages as per selected switch case and you can add cases you wanted as per the list showing in body content.
setp 5: function “changelangDisplay(lang)” this function will be called on selecting languages from the list and don’t worry this function will also set the lang cookies.
Don’t you find it easy after setting up ……… For any fix you can contact me
