Hey,
I'm building a website that should be available in several languages. In order for a user to select a language, I've implemented a drop down menu. However, the client insists that the flags of the countries are beside the menu items.
So, my code takes a normal select menu, and converts it to a list of div's. Here is the code:
HTML Code:
<div class="country-select">
<form action="">
<select class="country-options" name="country-options">
<option selected="selected" value="/en" class="en" label="<span class='flag'></span><em>English</em>">English</option>
<option value="/ar" class="ar" label="<span class='flag'></span><em>Arabic</em>"> Arabic </option>
<option value="/hy" class="hy" label="<span class='flag'></span><em>Armenian</em>"> Armenian </option>
<option value="/bg" class="bg" label="<span class='flag'></span><em>Bulgarian</em>"> Bulgarian </option>
<option value="/zh" class="zh" label="<span class='flag'></span><em>Chinese</em>"> Chinese </option>
<option value="/cs" class="cs" label="<span class='flag'></span><em>Czech</em>"> Czech </option>
<option value="/da" class="da" label="<span class='flag'></span><em>Danish</em>"> Danish </option>
<option value="/nl" class="nl" label="<span class='flag'></span><em>Dutch</em>"> Dutch </option>
<option value="/et" class="et" label="<span class='flag'></span><em>Estonian</em>"> Estonian </option>
<option value="/tl" class="tl" label="<span class='flag'></span><em>Filipino</em>"> Filipino </option>
<option value="/fi" class="fi" label="<span class='flag'></span><em>Finnish</em>"> Finnish </option>
<option value="/fr" class="fr" label="<span class='flag'></span><em>French</em>"> French </option>
<option value="/de" class="de" label="<span class='flag'></span><em>German</em>"> German </option>
<option value="/el" class="el" label="<span class='flag'></span><em>Greek</em>"> Greek </option>
<option value="/he" class="he" label="<span class='flag'></span><em>Hebrew</em>"> Hebrew </option>
<option value="/hi" class="hi" label="<span class='flag'></span><em>Hindi</em>"> Hindi </option>
<option value="/hu" class="hu" label="<span class='flag'></span><em>Hungarian</em>"> Hungarian </option>
<option value="/id" class="id" label="<span class='flag'></span><em>Indonesian</em>"> Indonesian </option>
<option value="/it" class="it" label="<span class='flag'></span><em>Italian</em>"> Italian </option>
<option value="/ja" class="ja" label="<span class='flag'></span><em>Japanese</em>"> Japanese </option>
<option value="/ko" class="ko" label="<span class='flag'></span><em>Korean</em>"> Korean </option>
<option value="/lv" class="lv" label="<span class='flag'></span><em>Latvian</em>"> Latvian </option>
<option value="/lt" class="lt" label="<span class='flag'></span><em>Lithuanian</em>"> Lithuanian </option>
<option value="/ms" class="ms" label="<span class='flag'></span><em>Malay</em>"> Malay </option>
<option value="/no" class="no" label="<span class='flag'></span><em>Norwegian</em>"> Norwegian </option>
<option value="/fa" class="fa" label="<span class='flag'></span><em>Persian</em>"> Persian </option>
<option value="/pl" class="pl" label="<span class='flag'></span><em>Polish</em>"> Polish </option>
<option value="/pt" class="pt" label="<span class='flag'></span><em>Portuguese</em>"> Portuguese </option>
<option value="/ro" class="ro" label="<span class='flag'></span><em>Romanian</em>"> Romanian </option>
<option value="/ru" class="ru" label="<span class='flag'></span><em>Russian</em>"> Russian </option>
<option value="/sk" class="sk" label="<span class='flag'></span><em>Slovak</em>"> Slovak </option>
<option value="/sl" class="sl" label="<span class='flag'></span><em>Slovene</em>"> Slovene </option>
<option value="/es" class="es" label="<span class='flag'></span><em>Spanish</em>"> Spanish </option>
<option value="/sv" class="sv" label="<span class='flag'></span><em>Swedish</em>"> Swedish </option>
<option value="/th" class="th" label="<span class='flag'></span><em>Thai</em>"> Thai </option>
<option value="/tr" class="tr" label="<span class='flag'></span><em>Turkish</em>"> Turkish </option>
<option value="/uk" class="uk" label="<span class='flag'></span><em>Ukrainian</em>"> Ukrainian </option>
<option value="/ur" class="ur" label="<span class='flag'></span><em>Urdu</em>"> Urdu </option>
<option value="/vi" class="vi" label="<span class='flag'></span><em>Vietnamese</em>"> Vietnamese </option>
</select>
<input value="Select" type="submit" />
</form>
</div>
And the js:
PHP Code:
function createDropDown2(obj,eventObj){
var id = 'sm-' + Math.ceil(Math.random() * 10000000);
var newList = $('<div id="' + id + '" class="sm-langdropdown"></div>');
var listItem = [];
obj.children("option").each(function(i){
if($(this).attr('label').search("\<") == 0){
listItem[i] = $('<div class="listItem"></div>');
listItem[i].addClass($(this).attr('class'));
listItem[i].attr('value',$(this).attr('value'));
listItem[i].html($(this).attr('label'));
//listItem[i].appendTo(newList);
}
//$(this).attr('selected') == 'selected'
});
function sortLangs(prepend){
listItem.sort();
for(var i = 0;i<listItem.length;i++){
listItem[i].appendTo(newList);
listItem[i].click(function(){
sortLangs($(this));
window.location.href = $(this).closest('.listItem').attr('value');
});
}
prepend.prependTo(newList);
}
sortLangs($('.listItem.en'));
newList.appendTo(obj.parent());
obj.css({'display':'none'});
obj.siblings('input[type="submit"]').css({'display':'none'});
newList.css({'height':'24px','overflow':'none'});
eventObj.mouseover(function(){
newList.css({
'height':'100px',
'box-shadow':'1px 1px 3px rgba(0,0,0,0.5)',
'overflow-y':'auto'
});
}).mouseleave(function(){
newList.css({
'height':'24px',
'box-shadow':'none',
'overflow':'none'
}).scrollTop(0);
});
}
createDropDown2($('.country-options'),$('.langDrop'));
This works perfectly fine in Firefox, but in Chrome and IE it won't order the elements properly. In Chrome, it is mostly in the right order, but some of the elements are jumbled (Japanese is on top, Arabic is around the middle of the list). In IE, all of the items appear to be jumbled.... attached is an image
I really don't care about keeping whatever I've already done or not, so long as I can get this working...