Saturday, September 24, 2011

Multilingual html pages using basic html, javascript and jquery


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