Modifying output of google.translate.TranslateElement.InlineLayout.VERTICAL

Question

I've read this answer Modifying element from google.translate.TranslateElement results as well as others dealing with modifying the style and loading of the Google Translate translate element.

The difference with my usage is that I'm using layout: google.translate.TranslateElement.InlineLayout.VERTICAL instead of SIMPLE; all of the other answers deal with SIMPLE.

One issue I'm having is using .fadeIn on the google-translate div doesn't work. I still get a flash of text from .goog-logo-link and I see Select a Language before it changes to Translate.

That might have something to do with the myTimer function from Modifying element from google.translate.TranslateElement results . But myTimer the only way I figured out how to change the text of .goog-te-combo option:first from Select a Language to Translate.

So,

1. Is there a more efficient way to change the text of .goog-te-combo option:first from Select a Language to Translate?

2. how can I get .fadeIn to work on the google-translate div so that changing the text from Select a Language to Translate and hiding .goog-logo-link is hidden until the entire div is faded in?

jsfiddle: https://jsfiddle.net/gfzcjwmv/7/

<script>
$(window).on('load', function() {
$(".goog-logo-link").empty();
$('.goog-te-gadget').html($('.goog-te-gadget').children());
$("#google-translate").fadeIn('1000');
});
</script>


<div id="google-translate">

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br',
layout: google.translate.TranslateElement.InlineLayout.VERTICAL
}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</div>


<script>

$(window).on('load', function() {

function cleartimer() {     
    setTimeout(function(){ 
        window.clearInterval(myVar); 
    }, 1000);             
}
function myTimer() {
    if ($('.goog-te-combo option:first').length) {
        $('.goog-te-combo option:first').html('Translate');
        cleartimer();
    }
}
var myVar = setInterval(function(){ myTimer() }, 300); 

});

</script>

Answer 1

Is there a more efficient way to change the text of .goog-te-combo option:first from Select a Language to Translate?

Looks like the timer is needed but it is enough if you wait for 0 milliseconds.

how can I get .fadeIn to work on the google-translate div so that changing the text from Select a Language to Translate and hiding .goog-logo-link is hidden until the entire div is faded in?

To get the fadeIn to work you first need to set display:none; with css.

This is what it looks like (I have removed the line which removes the google link because that's violation of the terms of use)

(Unfortunaltely the stacksnippet doesn't work) that's why here is the working jsFiddle link

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
  pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br,bs,ca,chr,ckb,co,crs,cs,cy,da,de,ee,el,en,eo,es,es-419,et,eu,fa,fi, fo,fr,fy,ga,gaa,gd,gl,gn,gu,ha,haw,hi,hr,ht,hu,hy,ia, id,ig,is,it,iw,ja,jw,ka,kg,kk,km,kn,ko,kri,ku,ky,la, lg,ln,lo,loz,lt,lua,lv,mfe,mg,mi,mk,ml,mn,mo,mr,ms,mt, ne,nl,nn,no,nso,ny,nyn,oc,om,or,pa,pcm,pl,ps,pt-BR, pt-PT,qu,rm,rn,ro,ru,rw,sd,sh,si,sk,sl,sn,so,sq,sr, sr-ME,st,su,sv,sw,ta,te,tg,th,ti,tk,tl,tn,to,tr,tt, tum,tw,ug,uk,ur,uz,vi,wo,xh,yi,yo,zh-CN,zh-TW,zu',
  layout: google.translate.TranslateElement.InlineLayout.VERTICAL
  }, 'google_translate_element');
}


$(window).on('load', function() {
  $('.goog-te-gadget').html($('.goog-te-gadget').children());
  $("#google-translate").fadeIn('1000');


  function cleartimer() {     
      setTimeout(function(){ 
          window.clearInterval(myVar); 
      }, 500);             
  }
  function myTimer() {
      if ($('.goog-te-combo option:first').length) {
          $('.goog-te-combo option:first').html('Translate');
          cleartimer();
      }
  }
  var myVar = setInterval(function(){ myTimer() }, 0); 

});

#google-translate {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="google-translate">
  <div id="google_translate_element"></div>
</div>