0
I visualized on a site that exists in the upper right corner a dropdown menu where the user can make the language selection. Below a print of the site with the open selection option. When the user clicks on Français, for example, the flag of France appears instead of the flag of Brazil. I would like to know how to do this using javascript/jquery! I searched and found no code.
1
Since I couldn’t make the tooltip work, I didn’t put style, but the basics you asked for I think this is it:
//a estrutura e como esse objeto vai ser populado você decide como vai ser, aqui foi só exemplo
var langList = [
{name: 'Portugues', code:'pt-BR', icon:'https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/Flag_of_Brazil.png'},
{name: 'Ingles', code:'en-US', icon:'http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/United%20States%20Flag.png'},
]
$(document).ready(function(){
$langs = $('#langs');
$currentLang = $('#current-lang');
var lang;
//aqui é so para popular a lista, ela poderia vir do servidro ja populada tambem
for( var i in langList){
lang = langList[i];
$langs.append('<li data-index="'+i+'" class="lang-picker"><img src="'+lang.icon+'" width="50" /> '+lang.name+'</li>');
}
$('.lang-picker').on('click', function(){
var index = $(this).attr('data-index');
var lang = langList[index];
if(lang){
$currentLang.attr('src', lang.icon);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Por algum motivo que desconheco o tooltip da bootstrap nao funcionou aqui, mas o conceito é o mesmo -->
<img src="https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/Flag_of_Brazil.png" width="50" id="current-lang" />
<br />
Idiomas diponiveis<br>
<ul id="langs">
</ul>I’ll test!!!!!!
That’s just what I needed! You’re the Kra Neuber
if it helped you don’t forget +1 in the answer ;)
right, but I think my reputation is still low for that
Browser other questions tagged php javascript jquery html css
You are not signed in. Login or sign up in order to post.
Specify more because there are several ways to do it, with JS you can change the src of the image with the flag of Brazil, putting the src of the image you want. Could you also when you click redirect to the same page with the language other than my/site/index.php? lang=fr, and puts the flag according to the language via php.
– Neuber Oliveira
in javascript/jquery preference. if you have something send
– Tiago NET
ta using some css framework? bootstrap, Foundation?
– Neuber Oliveira
using bootstrap
– Tiago NET
Do you already have something? You only want the
dropdownwith the images or make the translation of the website as well?– Randrade
translation already made using cookies, Session and a php file for each translation using array! the url is like this: index.php? lang=br
– Tiago NET