Multiple languages WITHOUT welcome page 
Autor: Dimitrios S.
Visitado 1686,
Seguidores 1,
Compartilhado 0
How can I create a multiple language website WITHOUT the welcome page? Let:s say a separate "menu" item with the available languages on the "bar", "sticky bar" etc
www.sparta.com.gr
Thank you
Dimitris
Publicado em
Yes, why not?
You could simply add flag images to the header or sticky bar and link to the appropriate language site.
As far as I know, most multi language sites are a separate project for each language, and then each is uploaded into its own folder. The primary or preferred language would be in the root folder (public_html)
Or are you intending to merely use Google to translate your site to the chosen language?
Autor
Thank you for your answer.
How do I set the "flag"? Make a "linkable" picture of the flag of each language? That seems it will work for a couple of languages. But what if I want to create a "drop down" menu with 5 or 10 languages? I have reason to ask, we have costumers in several countries and we already have labels in several languages, so our website in 7 languages could serve us a lot.
Yes, each "language" will be a separate site (a translation of the english) and uploaded upon clicking the "flag"
Thank you once again
Hello Dimitrios
I have made an example I will show in next post.
I made it with only text and with image. You can set the size of the image so the flags will have the same size.
You can yourself add more lines/links. If you want only the flag then you could remove the text.
I suggest the first link to be the "standard". All links should point to a language-copy in a subdirectory - and the first link should point to your head-project.
Hope this is something of what you intended.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Language<br>selection</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home-default language</a>
<a href="http://calendarforum.dk">English</a>
<a href="https://www.w3schools.com/" target="_blank"><img src="https://flaglane.com/download/dane-flag/dane-flag-small.png" alt="Girl in a jacket" width="50" height="30"> Danish</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
The code should be put in a html-object and then it should function as it is.
It should be fairly easy to chjange it and style it to the function nd look you want.
Please tell if you have it to function.
Dimitrios
If you prefer to simply use the functionality of WX5 you can simply add flag images to your header (each with a link), and if you want a menu of language choices you can just use levels with each level linked to either a page on the web or a local webpage. By having a hidden page you can make it a series of flag images as well if you like.
See example attached
(woops - having provided the example I note you are still on 2019.2, the example I provided is 2019.3 - can you update??)
Dimitrios
Here is the above (rather poor) example in v2019.1 which will open in v2019.2
It seems that your license has expired Dimitrios - I would not advice to make an upgrade just because of this. There is nothing in this issue where you will benefit of an upgrade.
The example of Esahc will function much the same way as my example, so you could also do that. But as design it would not be a good solution. The language selection should not be part of the menu system in my opinion.
Hello to whose that is interested.
If you have many items in the list, and want to have them shown in a limited "box" with a scrolling option, then you could add a line to the dropdown-content styling - like this example :
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 260px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
height:100px;overflow:scroll;
}
This will limit the height of the dropdown list to 100px - and add a scrollbar if necessary.
This could be useful if you want to put a dropdown in the header.
It is also possible to make the dropdown hoverable.