Question

11

Implementing Google Translate with custom flag icons

rated 0 times [ 12] [ 1] / answers: 1 / hits: 93582 / 12 Years ago, mon, may 7, 2012, 12:00:00

Currently, I'm using the simple Google Translate drop-down menu found here:
http://translate.google.com/translate_tools

I'd like to also be able to click on some flag icons I have and trigger the same javascript calls that are called by the text-based links in the google translate widget.

Anyone have ideas on how to accomplish this? I can't figure out how to make clicking on the flags initiate the same behavior as clicking on the google translate text links.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janettejordynm

Add To Favorites

Follow

Total Points: 550

Total Questions: 94

Total Answers: 98

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

janettejordynm questions

1 Chunk file upload with axios

Tue, Nov 24, 20, 00:00, 4 Years ago

1 Node unable to find module alias defined in tsconfig and package.json

Thu, Jun 18, 20, 00:00, 4 Years ago

1 How to check if an entered answer is correct with HTML code?

Sat, May 23, 20, 00:00, 4 Years ago

1 Can someone explain this piece of Javascript code?

Mon, Apr 6, 20, 00:00, 4 Years ago

1 AES Encryption/Decryption in Node JS similar to Java

Tue, Feb 18, 20, 00:00, 4 Years ago

View All

answered 12 Years ago karleel · Accepted Answer

Had a lot of fun finding a solution for this question!

<!-- Use CSS to replace link text with flag icons -->

<ul class=translation-links>

  <li><a href=# class=spanish data-lang=Spanish>Spanish</a></li>

  <li><a href=# class=german data-lang=German>German</a></li>

</ul>



<!-- Code provided by Google -->

<div id=google_translate_element></div>

<script type=text/javascript>

  function googleTranslateElementInit() {

    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');

  }

</script>

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



<!-- Flag click handler -->

<script type=text/javascript>

    $('.translation-links a').click(function() {

      var lang = $(this).data('lang');

      var $frame = $('.goog-te-menu-frame:first');

      if (!$frame.size()) {

        alert(Error: Could not find Google translate frame.);

        return false;

      }

      $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();

      return false;

    });

</script>