Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown list containing all supported languages.

Create a custom flag country list and call Google translator code using custom javascript code. The benefit of this custom menu is that we can hide Google Translate and use all languages to translate the webpage.

Must Read: JQuery Plugin for Custom Select Dropdown With Search Box | Amsifyselect.js

How to make use of it:

1. Create a country checklist containing languages from which you’ll select to translate your webpage.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Bootstrap Select -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-select.min.css" />
<script src="/path/to/cdn/bootstrap-select.min.js"></script>

<!-- Flag Icon -->
<link rel="stylesheet" href="/path/to/cdn/flag-icon.min.css" />
<select class="selectpicker" data-width="fit" onchange="translateLanguage(this.value);">
  <option data-content='<span class="flag-icon flag-icon-af"></span> Afrikaans' value="Afrikaans">Afrikaans</option>
  <option  data-content='<span class="flag-icon flag-icon-al"></span> Albanian' value="Albanian">Albanian</option>
  <option  data-content='<span class="flag-icon flag-icon-ar"></span> Arabic' value="Arabic">Arabic</option>
  <option  data-content='<span class="flag-icon flag-icon-am"></span> Armenian' value="Armenian">Armenian</option>
  <option  data-content='<span class="flag-icon flag-icon-az"></span> Azerbaijani' value="Azerbaijani">Azerbaijani</option>
  ...
</select>

2. Load the needed Google Translate API.

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

3. Add the Google Translator Widget to the web page.

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

4. The important script to allow the Google Translator on your webpage.

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

function translateLanguage(lang) {
  googleTranslateElementInit();
  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;
}

$(function(){
  $('.selectpicker').selectpicker();
});

See Demo And Download

Official Website(devdreamsolution): Click Here

This superior jQuery/javascript plugin is developed by devdreamsolution. For extra Advanced usage, please go to the official website.

Related Posts

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

Extract-The-Dominant-Color-From-Image

Extract The Dominant Color From Image | jquery.primarycolor.js

Primary Color jQuery plugin that gets the base color of an image. A callback event that lets you apply RGB coloring to any HTML element is supported….

Checkboxes-and-Radio-Buttons-icheck

[Zepto] A Simple and Fully Accessible Checkboxes and Radio Buttons | icheck

iCheck is Highly customizable checkboxes and radio buttons for jQuery and Zepto. This plugin allows you to create fully accessible touch checkboxes and radio buttons with 25 built-in…

File-Extensions-and-File-Types-Icons

Most Popular File Extensions and File Types Icons | CSS-file-icons

Pure CSS file icons for most popular file extensions/types. CSS file icons are a CSS/SCSS library used to create file sort and extension icons utilizing Cascading Style…

clone-form-fields-jquery

jQuery Clone to Copy a Table Row and Increment ID | cloneData.js

cloneData.js is a simple, mostly jQuery-based plugin for cloning and deleting type making it possible to duplicate a number of fields in HTML type and additional discipline…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Leave a Reply

Your email address will not be published. Required fields are marked *