HTML5: Change the language on an object loaded on a div as external html file

HTML5: Change the language on an object loaded on a div as external html file

I have a language selector. I have succeeded to change language on the start page. However, I could not find the way to work universally on all objects that are loaded in the main div, as external html files.

I dont want to install the language selector, and its script in every html file. I want to be the language selector, and the language script in the main html only e.g. index.html.

How can I do that ?

The problem:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!-- stylesheet css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- google web font css -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>

</head>


<body>    
        <a id=idStatistics     href ="#Statistics"      onclick="load_services()"> <span lang="en">Statistics      </span>     <span lang="gr">Στατιστική      </span>   </a>

            <select id="lang-switch">
              <option value="en">English</option>
              <option value="gr">Greek</option>
            </select>

        <script>
        //stackoverflow: 13591983   // This script MUST BE under the "ID" that is calling // Do not transfer it to a differ DIV than the caller "ID"
            document.getElementById("idStatistics").addEventListener("click", function(){
            document.getElementById("mainbody").innerHTML = '<object data="Statistics.html" class="Statistics_page"; ></object>'; });
        </script>   

<div id="mainbody" class="main_body">

<p lang="en">
Statistics is a science based on probabilities
Statistics is a science based on probabilities
    </p>

<p lang="gr">
Στατιστιστική 
Στατιστική
 </p>


</div>


<script>
    // Taken by 49637061 on stackoverflow
$('[lang="es"]').hide();
$('[lang="gr"]').hide();

$('#lang-switch').change(function () {
  var lang = $(this).val();
  switch (lang) {
    case 'en': 
      $('[lang]').hide();
      $('[lang="en"]').show();
      break;
    case 'gr':
      $('[lang]').hide();
      $('[lang="gr"]').show();
      break;
    default:
      $('[lang]').hide();
      $('[lang="en"]').show();

if ($.cookie('lang') === 'en') {
   $.cookie('lang', 'gr', { expires: 7 });
     } else {
       $.cookie('lang', 'en', { expires: 7 });
     }       
  }
});
</script>

</body>

</html>

and the external html file...

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- stylesheet css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- google web font css -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>


</head>

<body>


<span lang="en">
    <div id="Statistics_page" class="Statistics_htmlfile_page">

Statistics is a science based on probabilities
  Statistics is a science based on probabilities
Statistics is a science based on probabilitiesStatistics is a science 
</div>
</span>


<span lang="gr">
<div id="Statistics_page2" class="Statistics_htmlfile_page">

Στατιστιστική 
Στατιστική

</div>
</span>

</body>

I would probably be interested of something like this...

    "       <script>
    document.getElementById("idR_Code_PSPP").addEventListener("click", function(){

   if lang=en do that:   document.getElementById("mainbody").innerHTML = '<object data="R_Code_PSPP.html" class="R_Code_PSPP_page"; >        
   if lang=gr, do that: document.getElementById("mainbody").innerHTML = '<object data="Statistics.html" class="Statistics_page"; ></object>'; });
    </object>';});
            </script>"
728x90

1 Answers HTML5: Change the language on an object loaded on a div as external html file

Finally, I found that the code was not working outside a server environment - at least not with my settings e.g. file:// .....

In linux, I must set a local server e.g. sudo python -m SimpleHTTPServer in order to run webpage's Jquery code successfully.

Then, I must type http://0.0.0.0:8000/index.html in a web browser in order to run the website in a proper manner.

Note, that you may need to clear Browser's cache in order to see the updated version of your website between edits.

The div part on the index.html was that --note the "id" declaration:

<a href="index.html"   class="topnav_estatistics">ESTATISTICS </a>
    <a id=idStatistics     href ="#Statistics"      > <span lang="en">Statistics        </span>     <span lang="gr">Στατιστική      </span>   </a>
    <a id=info_page        href ="#info_page"       > <span lang="en">info_page      </span>    <span lang="gr"> info_page  </span>   </a>
    <a id=articles         href ="#articles"        > <span lang="en">Stat Articles   </span>     <span lang="gr"> Άρθρα          </span>   </a>   
    <a id=Planets_Health   href ="#Planets_Health"  > <span lang="en">Planet's Health </span>     <span lang="gr"> Περιβάλλον     </span>   </a>    
    <a id=Services         href ="#Services"        > <span lang="en">Services        </span>     <span lang="gr"> Υπηρεσίες      </span>   </a>  

The code for language selector was like that in index.html page, after head:

 <!--- The Language options  --->
            <select id="lang_switch" class="lang_switch">
               <option value="en">En </option>
               <option value="gr">Gr </option>
            </select>

The external html information was added to the following divs of index.html page in the body section:

<div id="left_link_index" class="left_link_index"> 

<div id="mainbody" class="main_body">

The "statistics.html" page in body part was like that:

 <body>
   <div id="Statistics_page"  class="Statistics_htmlfile_page">
   <div id="stat"  class="stat_main">

    <div id="st_en"  lang="en" class="stat_en">
    Statistics is a science based on probabilities
    </div>

    <div id="st_gr"  lang="gr" class="stat_gr">
    Στατιστιστική 
    Στατιστική
    Στατιστιστική
    </div>

    </div>

    <div id="left_links_en"  class="Statistics_links">
        <a href ="#Articles" >    <li>    <span lang="en"> Articles       </span>  </li>   </a>  

      </div>

    <div id="left_links_gr"  class="Statistics_links">
        <a href ="#Articles" >    <li>    <span lang="gr"> Αρθρογραφία    </span>  </li>   </a> 

    </div>

    </body>

a) The script cod to change ( switch ) the language between different language options as well b) the script code to insert parts of external html page into a number of divs --based on language selections, was that:

<script>
    // stackoverflow: 49637061  &  11134701 
 //Default settings 
$('[lang="en"]').show();
$('[lang="gr"]').hide();
          $(document).ready(function(){
           $("#info_page").click(function(){
             $("#mainbody").load("info_page.html #st_en"); 
             $("#left_link_index").load("info_page.html #left_links_en"); 
          });
           $("#stat_page").click(function(){
             $("#mainbody").load("stat_page.html #st_en"); 
             $("#left_link_index").load("stat_page.html #left_links_en"); 

          }); 
           $("#articles_page").click(function(){
             $("#mainbody").load("articles_page.html #st_en"); 
          }); 
           $("#Planets_Health").click(function(){
             $("#mainbody").load("Planets_Health.html #st_en"); 
          }); 
           $("#Services").click(function(){
             $("#mainbody").load("Services.html #st_en"); 
          }); 
          }); 

$('#lang_switch').change(function () {
  var lang = $(this).val();
  switch (lang) {
    case 'gr':
      $('[lang]').hide();
      $('[lang="gr"]').show();
          $(document).ready(function(){
           $("#info_page").click(function(){
             $("#mainbody").load("info_page.html #st_gr"); 
             $("#left_link_index").load("info_page.html #left_links_gr"); 
          });
           $("#stat_page").click(function(){
             $("#mainbody").load("stat_page.html #st_gr"); 
             $("#left_link_index").load("stat_page.html #left_links_gr"); 
          }); 
           $("#articles").click(function(){
             $("#mainbody").load("articles.html #st_gr"); 
          }); 
           $("#Planets_Health").click(function(){
             $("#mainbody").load("Planets_Health.html #st_gr"); 
          }); 
           $("#Services").click(function(){
             $("#mainbody").load("Services.html #st_gr"); 
          }); 
          }); 
      break;
      case 'en':
      $('[lang]').hide();
      $('[lang="gr"]').show();
          $(document).ready(function(){
           $("#info_page").click(function(){
             $("#mainbody").load("info_page.html #st_en"); 
             $("#left_link_index").load("info_page.html #left_links_en"); 

          });
           $("#stat_page").click(function(){
             $("#mainbody").load("Statistics.html #st_en"); 
             $("#left_link_index").load("stat_page.html #left_links_en"); 
          }); 
           $("#articles").click(function(){
             $("#mainbody").load("articles.html #st_en"); 
          }); 
           $("#Planets_Health").click(function(){
             $("#mainbody").load("Planets_Health.html #st_en"); 
          }); 
           $("#Services").click(function(){
             $("#mainbody").load("Services.html #st_en"); 
          }); 
          }); 
      break;
  };
});
</script>

Note that the formatting options of the loaded external html page into the index.html are available through: ".left_link_index{ }" and ".mainbody { }" options, in general. Specifically, you can declare additional e.g. div id codes or class codes in order to format specific parts of the external inserted pieces of html into the index main page.

5 months ago