how to build a dual language webpage?

Question

I want to design a dual language webpage i.e in English and Kannada. I don't want to load a new webpage or reload the page as the user switches between the languages.Please let me know if there is any solution using JavaScript or PHP

Answer 1

The first thing we need to do is to create a couple of files that will contain the text for each of the languages that will be supported by the website. For demo purpose I have chosen English, Spanish and German.

Make a directory named “directory”. In this directory create 3 files:

• lang.de.php
• lang.en.php
• lang.es.php

In our main file (index.php) we will include a file (common.php) containing a piece of code that gets the requested language.

Here’s the content for 3 language files.

lang.en.php:

<?php
/*
  ------------------
  Language: English
  ------------------
 */

$lang = array();

$lang['PAGE_TITLE'] = 'My website page title';
$lang['HEADER_TITLE'] = 'My website header title';
$lang['SITE_NAME'] = 'My Website';
$lang['SLOGAN'] = 'My slogan here';
$lang['HEADING'] = 'Heading';

// Menu

$lang['MENU_HOME'] = 'Home';
$lang['MENU_ABOUT_US'] = 'About Us';
$lang['MENU_OUR_PRODUCTS'] = 'Our products';
$lang['MENU_CONTACT_US'] = 'Contact Us';
$lang['MENU_ADVERTISE'] = 'Advertise';
$lang['MENU_SITE_MAP'] = 'Site Map';
?>  

lang.es.php:

 <?php
/*
 -----------------
 Language: Spanish
 -----------------
 */

$lang = array();

$lang['PAGE_TITLE'] = 'Título de la página de mi sitio web';
$lang['HEADER_TITLE'] = 'Mi sitio web de la cabecera título';
$lang['SITE_NAME'] = 'Mi Sitio Web';
$lang['SLOGAN'] = 'Mi lema aquí';
$lang['HEADING'] = 'Título';

// Menu

$lang['MENU_HOME'] = 'Inicio';
$lang['MENU_ABOUT_US'] = 'Sobre Nosotros';
$lang['MENU_OUR_PRODUCTS'] = 'Nuestros productos';
$lang['MENU_CONTACT_US'] = 'Contáctenos';
$lang['MENU_ADVERTISE'] = 'Publicidad';
$lang['MENU_SITE_MAP'] = 'Mapa del Sitio';
?>

lang.de.php:

 <?php
 /*
  -----------------
  Language: German
  -----------------
  */

 $lang = array();

 $lang['PAGE_TITLE'] = 'Meine Webseite Titel';
 $lang['HEADER_TITLE'] = 'Meine Website-Header Titel';
 $lang['SITE_NAME'] = 'Meine Website';
  $lang['SLOGAN'] = 'Mein Slogan hier';
 $lang['HEADING'] = 'Position';

 // Menu

 $lang['MENU_HOME'] = 'Heim';
 $lang['MENU_ABOUT_US'] = 'Über uns';
 $lang['MENU_OUR_PRODUCTS'] = 'Unsere Produkte';
 $lang['MENU_CONTACT_US'] = 'Kontaktieren Sie uns';
 $lang['MENU_ADVERTISE'] = 'Werben';
 $lang['MENU_SITE_MAP'] = 'Site Karte';
 ?>

Analyzing the common.php file:

 <?php
 session_start();
 header('Cache-control: private'); // IE 6 FIX

 if(isSet($_GET['lang']))
 {
 $lang = $_GET['lang'];

 // register the session and set the cookie
 $_SESSION['lang'] = $lang;

 setcookie('lang', $lang, time() + (3600 * 24 * 30));
 }
 else if(isSet($_SESSION['lang']))
 {
 $lang = $_SESSION['lang'];
 }
 else if(isSet($_COOKIE['lang']))
 {
 $lang = $_COOKIE['lang'];
 }
 else
 {
  $lang = 'en';
 }

  switch ($lang) {
  case 'en':
  $lang_file = 'lang.en.php';
   break;

  case 'de':
  $lang_file = 'lang.de.php';
  break;

  case 'es':
    $lang_file = 'lang.es.php';
  break;

 default:
  $lang_file = 'lang.en.php';

 }

 include_once 'languages/'.$lang_file;
 ?>

The constants values should be outputted in the page. Examples; for document title:

  <title><?php echo $lang['PAGE_TITLE']; ?></title>

For header menu:

 <ul>
 <li><a href="/"><?php echo $lang['MENU_HOME']; ?></a></li>
 <li><a href="about_us"><?php echo $lang['MENU_ABOUT_US']; ?></a></li>
 <li><a href="our_products"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a> 
</li>
 <li><a href="contact_us"><?php echo $lang['MENU_CONTACT_US']; ?></a></li>
 <li><a href="advertise"><?php echo $lang['MENU_ADVERTISE']; ?></a></li>
 <li><a href="sitemap"><?php echo $lang['MENU_SITE_MAP']; ?></a></li>

Answer 2

Just have a look at this, Make two classes for your languages, say English and Kannada. In your layouts, keep the second language division next to the first language division. But don't display both. So this should be repeated for every content of your webpage. I think this is what you want.

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <style type="text/css">
 @import url(http://fonts.googleapis.com/earlyaccess/notosanskannada.css);



 #header
 {
 padding:10px;background:#484848;color:#EDEDED;text-allign:center;width:100%;font-size:25px;
 }
 .kannada,.english
 {
 position:absolute;
 top:100px;
 left:20px;font-size:20px;
 display:none;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function()
 {
     $('.english').fadeIn(1000);
     $('.kannada').fadeOut(500);
 });


 function changeLang()
 {
     var language = document.getElementById('change').innerHTML;
     if(language === "Kannada")
     {
         $('.english').fadeOut(500);
         $('.kannada').fadeIn(1000);
         document.getElementById('change').innerHTML = "English";
     }
     else if(language === "English")
     {
         $('.kannada').fadeOut(500);
         $('.english').fadeIn(1000);
         document.getElementById('change').innerHTML = "Kannada";
     }

 }
 </script>
 </head>

 <body>
 <div id="header"><font style="font-size:18px;color:#FFFFFF;">Load in : &nbsp;&nbsp;</font><span id="change" style="cursor:pointer;" onclick="changeLang();">Kannada</span></div>
 <div class="english"><p>This is the paragraph in English</p></div>
 <div class="kannada"><p>ಈ ಪ್ಯಾರಗ್ರಾಫ್ ಕನ್ನಡದಲ್ಲಿ ಇದೆ.</p></div>
 </body>

 </html>