Im trying to create a menu with language settings.
(EDIT: most works now, only problem remaining is that the text in the language menu translates immediately, while the content-text only changes after page reload. Im not sure what the best solution is.)
First time it loads with language menu open, shows language based on browser settings and asks user to confirm or change. After cookies are set it'll load with language menu closed.
If cookies are set, load index.php normal with the language variable (either js, json or xml i think from external file, i could use some tips here).
If the cookie is not set, detect lang and check in available. I want to load my index page with language select pop up, preferably css class add and remove, so it will be shown the same after closed with something like document.getElementById("langpick").classList.toggle("hide"); (works fine)
show message in selected language (changes immediately, while the rest doenst??)
show other languages and on click change above message; (perhaps hide current?)
set val to cookie selectedLang;
Here im getting stuck;
i only seem to get one innerhtml corresponding with selected language
after a language is selected, either by script or user, i want to load only those texts into the main file. Now it only works after reloading page.
<!-- php get / set cookie (perhaps this could be a js code) -->
<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
$sitelang = array("nl", "fr", "de", "en");
// if cookies are set, load page with language variable
if(isset($_COOKIE['selectedLang'])){
$cookie = $_COOKIE['selectedLang'];
}
// if cookies not set, find language. If not in array get EN. Set cookie.
else{
if (in_array($lang, $sitelang)) {
$langset = $lang;
setcookie("selectedLang", $langset,time() + (86400 * 30 * 86400), "/");
}
else {
setcookie("selectedLang", "en",time() + (86400 * 30 * 86400 ), "/");
}
}
?>
<html>
<meta name="viewport" content="width=device-width, scale=1">
<title>page</title>
<head>
<style type="text/css">
/* css for language menu, show and hide */
body {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
.lang-no {background-color: orange; position: absolute; display: inline-block; overflow: hidden;}
.hide {top: 50%; left: 0; width: 50px; height: 50px; border: 3px solid black; transition: 0.6s; overflow: hidden;}
.show {top: 20%; left: 10%; width: 200px; height: 600px; border: 3px solid black;transition: 0.6s; }
.but-lang {width: 50; height: 50px; background-color: green; overflow: hidden; border-bottom-left-radius: 25px; border-top-right-radius: 25px; }
.but-select {background-color: grey;}
.showstuff {color: green;}
</style>
<script type="text/javascript">
// Cookie value selectedLang, set to JS var lang2, etc later.
var lang = document.cookie;
var lang2 = lang.replace('selectedLang=', '');
var lang3 = lang.replace('selectedLang=', '_');
var lang4 = lang2+"_";
var menu = "_menu";
var lang_current = lang2+menu;
</script>
</head>
<body>
<!-- Language menu START-->
<div class="lang-no hide" id="langpick">
<!-- Toggle button language menu-->
<div id="but-lang" class="but-lang"></div>
<!-- some content here by innerhtml-->
<div id="select-lang"></div>
<!-- buttons with lang -->
<div id="button_NL" class="but-select">
<button onclick="set_lang2_NL('selectedLang', 'nl', 30)" id="inner.but.NL">NL</button>
</div>
<div id="button_FR" class="but-select">
<button onclick="set_lang2_FR('selectedLang', 'fr', 30)" id="inner.but.FR">FR</button>
</div>
<div id="button_DE" class="but-select">
<button onclick="set_lang2_DE('selectedLang', 'de', 30)" id="inner.but.DE">DE</button>
</div>
<div id="button_EN" class="but-select">
<button onclick="set_lang2_EN('selectedLang', 'en', 30)" id="inner.but.EN">EN</button>
</div>
<div>
<button id="button_submit"><p id="subm_txt">X</p></button>
</div>
</div>
<!-- Language menu END-->
<!-- First visit, open langmenu -->
<!-- perhaps also just js code -->
<?php
// if cookie is set do nothing
if(isset($_COOKIE['selectedLang'])){
$cookie = $_COOKIE['selectedLang'];}
// echo "Cookies set";}
else{
// if cookie not set, Show language menu.
// i wanted to put this on top but only works after the div #langpick
echo '
<script type="text/JavaScript">
document.getElementById("langpick").classList.toggle("hide");
document.getElementById("langpick").classList.toggle("show");
</script>
'
;}
?>
<!-- actual site content / will come from php echo -->
<?php
/*
if(isset($_GET['page']) && $_GET['page'] != '' ){
$page = $_GET['page']; // page being requested
}else{
$page = 'home'; // default page
}
include('header.php');
// Dynamic page based on query string
include($page.'.php');
*/
?>
<!-- header.php -->
<script type="text/javascript">
// external file later, should be loading header_lang text file
var about = {
"_en": "about",
"_nl": "over",
"_fr": "propos",
"_de": "über"};
var porto = {
"_en": "porto",
"_nl": "porto",
"_fr": "porto",
"_de": "porto"};
var serv = {
"_en": "1services",
"_nl": "2services",
"_fr": "3services",
"_de": "4services"};
</script>
Brand-logo
<a id="one" href="index.php?page=home"> | Home icon </a>|
<a id="two" href="index.php?page=black"></a> |
<a id="three" href="#"></a> |
<script type="text/javascript">
document.getElementById('two').innerHTML = about[lang3];
</script>
<script type="text/javascript">
document.getElementById('three').innerHTML = porto[lang3];
</script>
<!-- end header.php -->
<!-- begin home.php -->
<script type="text/javascript">
// external file later, should be loading home_lang text file
var hi = {"_en": "English",
"_nl": "Nederlands",
"_fr": "Français",
"_de": "Deutsch"};
var black = {"_en": "black",
"_nl": "zwart",
"_fr": "noir",
"_de": "schwarz"};
</script>
<div class="showstuff"><p id="welcome_01"></p></div>
<div id="words"></div>
<div class="black"><p id="blck"></p></div>
<script type="text/javascript">
document.getElementById('words').innerHTML = hi[lang3];
</script>
<script type="text/javascript">
document.getElementById('blck').innerHTML = black[lang3];
</script>
<!-- end home.php -->
<!-- final js codes -->
<script type="text/javascript">
// etc variables here
var en_menu = "<p>Selected language: English</p>";
var nl_menu = "<p>Geselecteerde taal: Nederlands</p>";
var fr_menu = "<p>Langue choisie : Français</p>";
var de_menu = "<p>Ausgewählte Sprache: Deutsch</p>";
var b;
if(lang2=="nl"){ b=nl_menu;}
else if(lang2=="de"){b=de_menu;}
else if(lang2=="fr"){b=fr_menu;}
else{b=en_menu;}
var en_wlcm = "<p>Welcome</p>";
var nl_wlcm = "<p>Welkom</p>";
var fr_wlcm = "<p>Bonjour</p>";
var de_wlcm = "<p>Gutentag</p>";
var zzx;
if(lang2=="nl"){zzx=nl_wlcm;}
else if(lang2=="de"){zzx=de_wlcm;}
else if(lang2=="fr"){zzx=fr_wlcm;}
else{zzx=en_wlcm;}
// + innerhtml better results than createTextnode
// - cant seem to duplicate the span or span two different innerhtml with something like _lang ?
document.getElementById('select-lang').innerHTML = b;
document.getElementById('welcome_01').innerHTML = zzx;
// could be improved alot here //
function set_lang2_NL(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*5000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
document.getElementById("select-lang").innerHTML = nl_menu;
var newlang = "nl";
}
function set_lang2_FR(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*5000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
document.getElementById("select-lang").innerHTML = fr_menu;
var newlang = "fr";
}
function set_lang2_DE(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*5000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
document.getElementById("select-lang").innerHTML = de_menu;
var newlang = "de";
}
function set_lang2_EN(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*5000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
document.getElementById("select-lang").innerHTML = en_menu;
var newlang = "en";
}
/* On button X close menu and reload page
needs improving! */
document.getElementById("button_submit").onclick = function(){
document.getElementById("langpick").classList.toggle("hide");
document.getElementById("langpick").classList.toggle("show");
window.location.reload(); }
</script>
<!-- Toggle button language script 1-->
<script type="text/javascript">
document.getElementById("but-lang").onclick = function(){
document.getElementById("langpick").classList.toggle("hide");
document.getElementById("langpick").classList.toggle("show"); }
</script>
<!-- Toggle button language script 2 with page reload-->
<script type="text/javascript">/*
document.getElementById("but-lang").onclick = function(){
if (document.getElementById("langpick").classList.contains("hide")){
document.getElementById("langpick").classList.toggle("hide");
document.getElementById("langpick").classList.toggle("show"); }
else {
document.getElementById("langpick").classList.toggle("hide");
document.getElementById("langpick").classList.toggle("show");
window.location.reload() }
}
</script>
</body>
</html>
Theres probably a lot that can be written more efficient, but half of it works now. Im still considering Ajax for a solution perhaps, but i know not enough yet how to combine them, or which ones.
So, right now im looking for a way to show my header, normal menu and content with the chosen language, without having to reload the whole page.
Many thanks in advance! (i run this on localhost if you'd like to copy paste to try)
EDIT: quite alot.. still not there (: