GTranslate Pro Show Flag + Language

[jrtaylor]

I'd like to show flags plus language ( e.g. Danish Flag with "Danske" next to it).

I've tried selecting "both" in the GTranslate admin panel but it is giving me a dropdown list (in English) with no flags.

If I select "flags" I do not get any text.

So.... I've tried to write some code to accomplish what I want. I get a nice vertical list (which is what I want) but I can't get the flags to appear (even though if I move my mouse to the left it senses an object).

I've also tried putting GTranslate into a table, with one flag per row. Still no luck. I assume that this is because I'm screwing up the jscript when I try to combine it with HTML.

Any advice?
Thanks.

(Sample of non-working code below):

Code: Select all

<a href="javascript:doTranslate('en|en')" title="English" class="flag" style="background-position:-0px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="English" />English</a><br/> <a href="javascript:doTranslate('en|af')" title="Afrikaans" class="flag"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Afrikaans" /> Afrikaans </a><br/> <a href="javascript:doTranslate('en|sq')" title="Albanian" class="flag" ><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Albanian" /> Shqiptar</a><br/> <a href="javascript:doTranslate('en|ar')" title="Arabic" class="flag" ><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Arabic" /> العربية </a><br/> <a href="javascript:doTranslate('en|hy')" title="Armenian" class="flag" ><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Armenian" /> Հայերեն </a>

[Edvard]

Can I see it the non-modified code in action on your site? When you select both, you will get flags and a dropdown. I suppose that there is some conflict between the CSS.

[jrtaylor]

Well now when I try it I get the flags on top and a separate dropdown box with the languages (in English).

What I really want is no dropdown, but a vertical menu, with language expressed in native, (e.g. Danish = Danske) and flags.

Can you help?

Thanks


Here's the code (from page source):

Code: Select all

<script type="text/javascript">
//<![CDATA[
if(jQuery.cookie('glang') && jQuery.cookie('glang') != 'en') jQuery(function($){$('body').translate('en', $.cookie('glang'), {toggle:true, not:'.notranslate'});});
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
    function doTranslate(lang_pair) {if(lang_pair.value)lang_pair=lang_pair.value;var lang=lang_pair.split('|')[1];_gaq.push(['_trackEvent', 'GTranslate', lang, location.pathname+location.search]);jQuery.cookie('glang', lang, {path: '/'});jQuery(function($){$('body').translate('en', lang, {toggle:true, not:'.notranslate'});});}
//]]>
</script>


<a href="javascript:doTranslate('en|en')" title="English" class="flag" style="background-position:-0px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="English" /></a> <a href="javascript:doTranslate('en|af')" title="Afrikaans" class="flag" style="background-position:-300px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Afrikaans" /></a> <a href="javascript:doTranslate('en|sq')" title="Albanian" class="flag" style="background-position:-300px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Albanian" /></a> <a href="javascript:doTranslate('en|ar')" title="Arabic" class="flag" style="background-position:-100px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Arabic" /></a> <a href="javascript:doTranslate('en|hy')" title="Armenian" class="flag" style="background-position:-400px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Armenian" /></a> <a href="javascript:doTranslate('en|az')" title="Azerbaijani" class="flag" style="background-position:-500px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Azerbaijani" /></a> <a href="javascript:doTranslate('en|eu')" title="Basque" class="flag" style="background-position:-600px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Basque" /></a> <a href="javascript:doTranslate('en|be')" title="Belarusian" class="flag" style="background-position:-0px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Belarusian" /></a> <a href="javascript:doTranslate('en|bg')" title="Bulgarian" class="flag" style="background-position:-200px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Bulgarian" /></a> <a href="javascript:doTranslate('en|ca')" title="Catalan" class="flag" style="background-position:-0px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Catalan" /></a> <a href="javascript:doTranslate('en|zh-CN')" title="Chinese (Simplified)" class="flag" style="background-position:-300px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Chinese (Simplified)" /></a> <a href="javascript:doTranslate('en|zh-TW')" title="Chinese (Traditional)" class="flag" style="background-position:-400px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Chinese (Traditional)" /></a> <a href="javascript:doTranslate('en|hr')" title="Croatian" class="flag" style="background-position:-500px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Croatian" /></a> <a href="javascript:doTranslate('en|cs')" title="Czech" class="flag" style="background-position:-600px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Czech" /></a> <a href="javascript:doTranslate('en|da')" title="Danish" class="flag" style="background-position:-700px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Danish" /></a> <a href="javascript:doTranslate('en|nl')" title="Dutch" class="flag" style="background-position:-0px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Dutch" /></a> <a href="javascript:doTranslate('en|et')" title="Estonian" class="flag" style="background-position:-400px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Estonian" /></a> <a href="javascript:doTranslate('en|tl')" title="Filipino" class="flag" style="background-position:-100px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Filipino" /></a> <a href="javascript:doTranslate('en|fi')" title="Finnish" class="flag" style="background-position:-100px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Finnish" /></a> <a href="javascript:doTranslate('en|fr')" title="French" class="flag" style="background-position:-200px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="French" /></a> <a href="javascript:doTranslate('en|gl')" title="Galician" class="flag" style="background-position:-500px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Galician" /></a> <a href="javascript:doTranslate('en|ka')" title="Georgian" class="flag" style="background-position:-700px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Georgian" /></a> <a href="javascript:doTranslate('en|de')" title="German" class="flag" style="background-position:-300px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="German" /></a> <a href="javascript:doTranslate('en|el')" title="Greek" class="flag" style="background-position:-400px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Greek" /></a> <a href="javascript:doTranslate('en|ht')" title="Haitian Creole" class="flag" style="background-position:-0px -700px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Haitian Creole" /></a> <a href="javascript:doTranslate('en|iw')" title="Hebrew" class="flag" style="background-position:-200px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Hebrew" /></a> <a href="javascript:doTranslate('en|hi')" title="Hindi" class="flag" style="background-position:-500px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Hindi" /></a> <a href="javascript:doTranslate('en|hu')" title="Hungarian" class="flag" style="background-position:-600px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Hungarian" /></a> <a href="javascript:doTranslate('en|is')" title="Icelandic" class="flag" style="background-position:-100px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Icelandic" /></a> <a href="javascript:doTranslate('en|id')" title="Indonesian" class="flag" style="background-position:-300px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Indonesian" /></a> <a href="javascript:doTranslate('en|ga')" title="Irish" class="flag" style="background-position:-600px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Irish" /></a> <a href="javascript:doTranslate('en|it')" title="Italian" class="flag" style="background-position:-600px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Italian" /></a> <a href="javascript:doTranslate('en|ja')" title="Japanese" class="flag" style="background-position:-700px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Japanese" /></a> <a href="javascript:doTranslate('en|ko')" title="Korean" class="flag" style="background-position:-0px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Korean" /></a> <a href="javascript:doTranslate('en|lv')" title="Latvian" class="flag" style="background-position:-400px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Latvian" /></a> <a href="javascript:doTranslate('en|lt')" title="Lithuanian" class="flag" style="background-position:-500px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Lithuanian" /></a> <a href="javascript:doTranslate('en|mk')" title="Macedonian" class="flag" style="background-position:-200px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Macedonian" /></a> <a href="javascript:doTranslate('en|ms')" title="Malay" class="flag" style="background-position:-400px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Malay" /></a> <a href="javascript:doTranslate('en|mt')" title="Maltese" class="flag" style="background-position:-700px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Maltese" /></a> <a href="javascript:doTranslate('en|no')" title="Norwegian" class="flag" style="background-position:-100px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Norwegian" /></a> <a href="javascript:doTranslate('en|fa')" title="Persian" class="flag" style="background-position:-200px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Persian" /></a> <a href="javascript:doTranslate('en|pl')" title="Polish" class="flag" style="background-position:-200px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Polish" /></a> <a href="javascript:doTranslate('en|pt')" title="Portuguese" class="alt_flag" style="background-position:-100px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Portuguese" /></a> <a href="javascript:doTranslate('en|ro')" title="Romanian" class="flag" style="background-position:-400px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Romanian" /></a> <a href="javascript:doTranslate('en|ru')" title="Russian" class="flag" style="background-position:-500px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Russian" /></a> <a href="javascript:doTranslate('en|sr')" title="Serbian" class="flag" style="background-position:-600px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Serbian" /></a> <a href="javascript:doTranslate('en|sk')" title="Slovak" class="flag" style="background-position:-700px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Slovak" /></a> <a href="javascript:doTranslate('en|sl')" title="Slovenian" class="flag" style="background-position:-0px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Slovenian" /></a> <a href="javascript:doTranslate('en|es')" title="Spanish" class="flag" style="background-position:-600px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Spanish" /></a> <a href="javascript:doTranslate('en|sw')" title="Swahili" class="flag" style="background-position:-500px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Swahili" /></a> <a href="javascript:doTranslate('en|sv')" title="Swedish" class="flag" style="background-position:-700px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Swedish" /></a> <a href="javascript:doTranslate('en|th')" title="Thai" class="flag" style="background-position:-0px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Thai" /></a> <a href="javascript:doTranslate('en|tr')" title="Turkish" class="flag" style="background-position:-100px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Turkish" /></a> <a href="javascript:doTranslate('en|uk')" title="Ukrainian" class="flag" style="background-position:-100px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Ukrainian" /></a> <a href="javascript:doTranslate('en|ur')" title="Urdu" class="flag" style="background-position:-100px -700px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Urdu" /></a> <a href="javascript:doTranslate('en|vi')" title="Vietnamese" class="flag" style="background-position:-200px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Vietnamese" /></a> <a href="javascript:doTranslate('en|cy')" title="Welsh" class="flag" style="background-position:-700px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Welsh" /></a> <a href="javascript:doTranslate('en|yi')" title="Yiddish" class="flag" style="background-position:-300px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt="Yiddish" /></a> <br/><select onchange="doTranslate(this);"><option value="">Select Language</option><option style="font-weight:bold;" value="en|en">English</option><option  value="en|af">Afrikaans</option><option  value="en|sq">Albanian</option><option  value="en|ar">Arabic</option><option  value="en|hy">Armenian</option><option  value="en|az">Azerbaijani</option><option  value="en|eu">Basque</option><option  value="en|be">Belarusian</option><option  value="en|bg">Bulgarian</option><option  value="en|ca">Catalan</option><option  value="en|zh-CN">Chinese (Simplified)</option><option  value="en|zh-TW">Chinese (Traditional)</option><option  value="en|hr">Croatian</option><option  value="en|cs">Czech</option><option  value="en|da">Danish</option><option  value="en|nl">Dutch</option><option  value="en|et">Estonian</option><option  value="en|tl">Filipino</option><option  value="en|fi">Finnish</option><option  value="en|fr">French</option><option  value="en|gl">Galician</option><option  value="en|ka">Georgian</option><option  value="en|de">German</option><option  value="en|el">Greek</option><option  value="en|ht">Haitian Creole</option><option  value="en|iw">Hebrew</option><option  value="en|hi">Hindi</option><option  value="en|hu">Hungarian</option><option  value="en|is">Icelandic</option><option  value="en|id">Indonesian</option><option  value="en|ga">Irish</option><option  value="en|it">Italian</option><option  value="en|ja">Japanese</option><option  value="en|ko">Korean</option><option  value="en|lv">Latvian</option><option  value="en|lt">Lithuanian</option><option  value="en|mk">Macedonian</option><option  value="en|ms">Malay</option><option  value="en|mt">Maltese</option><option  value="en|no">Norwegian</option><option  value="en|fa">Persian</option><option  value="en|pl">Polish</option><option  value="en|pt">Portuguese</option><option  value="en|ro">Romanian</option><option  value="en|ru">Russian</option><option  value="en|sr">Serbian</option><option  value="en|sk">Slovak</option><option  value="en|sl">Slovenian</option><option  value="en|es">Spanish</option><option  value="en|sw">Swahili</option><option  value="en|sv">Swedish</option><option  value="en|th">Thai</option><option  value="en|tr">Turkish</option><option  value="en|uk">Ukrainian</option><option  value="en|ur">Urdu</option><option  value="en|vi">Vietnamese</option><option  value="en|cy">Welsh</option><option  value="en|yi">Yiddish</option></select>

      <!-- /block-content -->