Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget?

Check out this jsfiddle for more information

 <html>

 <body>
  <select id="lang-drop">
            <option value="english">EN</option>
            <option value="spanish">SP</option>
    </select>
  translate -> text: open the door!
 </body>
 </html>

Do you have any suggestions on how to achieve this functionality? I am struggling to make clicking on the option behave like clicking on the Google Translate text links.

(I have tried following
Implementing Google Translate with custom flag icons, but it does not work with my version of jQuery 3.1...)

javascriptjqueryhtmlcss

Answer №1

If you swap out !$frame.size() for !frame.length, the code provided in this thread on Stack Overflow will function properly.

In my experience, the solution presented by Boris Brdarić was spot on.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on accessing the JSON file data using jQuery

Currently, I am attempting to retrieve data from an API. Essentially, there is a URL that returns JSON data which I need to utilize. var url = "http://212.18.63.135:9034/played?sid=1&type=json"; $.getJSON(url, function(data) { console.log(data) ...

javascriptjqueryjsonajaxgetjson

The footer should never be positioned below the sidebar

Hello, I'm trying to position my footer below my side navigation bar. It's working fine with the header, but I can't seem to figure out how to do it for the footer. Also, another question - how can I ensure that the text on a smaller screen ...

htmlcssflexboxheaderfooter

What is the best method for deleting scripts to optimize for mobile responsiveness?

My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...

javascriptjquerywordpresshtmlresponsive-design

"Encountering a challenge with accessing the class or id of an HTML element following the retrieval of data from an

Having trouble accessing the id or class of the label fetched from PHP... Here is my code snippet: $.ajax({ type:'POST', url:"<?php echo base_url(); ?>main/user_list", data:"", async:false, success: ...

phpjqueryajaxcodeigniter

Tips for positioning two elements side by side in an li element without needing to clear each time

I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...

htmlcsscss-floathtml-lists

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

javascriptphpjquerycssajax

Switching icon images using JQuery based on state changes

I'm attempting to switch the background image of my webpage's "body" element when the user toggles between playing and pausing music icons. This is what the CSS for the "body" element looks like: body { background: url('https://s3-us-wes ...

javascriptjqueryhtmlcss

What are some ways to broaden the width of my footer div?

Can someone help me figure out why my footer div is not taking up all the available horizontal space? Below is my code, but it's not working as expected. Any assistance would be greatly appreciated! Markup: <div class="footer"> Copyright ...

htmlcss

What is the proper way to utilize the 'open' function in jquery dialog?

The function dialog() has been initialized with the code below: $("#repshare_dialog").dialog({autoOpen: false}); Now, I want to open a dialog box with a title. Is this the correct way to do it? $("#repshare_dialog").dialog({ open: function(event,ui) ...

jqueryjquery-ui

Is there a way to cross-reference a city obtained from geolocation with the cities stored in my database, and if a match is found, send the corresponding ID

Here's the script I'm currently working with: <script type="text/javascript"> search = new Vue({ el: '#offers', data: { data: [], authType: '{{uid}}', key : '1', wi ...

javascriptjqueryjsonajaxvue.js

Where the package.json file resides

Is there a designated location for the package.json file in a project, like within the project directory? Where should the package.json file be located in a multi-component project? What is the significance of having version 0.0.0 in th ...

javascriptnpmpackage.json

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

On a website, I am integrating an external 2-factor authentication solution called Duo Web using their PHP and Javascript. It works smoothly on all browsers except for IE8. When the user passes the initial login screen, the 2FA login page loads, but the if ...

javascripthtmlcssiframeinternet-explorer-8

Using multiple Django FBVs to capture and save data with Ajax and jQuery

Within my Django application, I have implemented two function views - FV1 and FV2. FV1 is responsible for retrieving data from the database and populating form/formsets. In FV2, the goal is to utilize Ajax to transmit serialized data from the page (conta ...

jquerydjangoajaxdjango-views

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

When the time comes, ReactDOM will render your element into the designated container,

What does the [,callback] parameter represent in the ReactDOM.render(element, container) method? ...

javascriptarraysreactjs

What steps do I need to take to create a basic API that links to a MySQL database?

I'm currently trying to develop an API for PHP that will enable one web server to communicate with another web server. Additionally, I want this API to be able to update MySQL code. Previously, I was utilizing $_GET parameters for this purpose but rea ...

phpmysqlhtml

Decrease in internal width

Seeking assistance to adjust the internal border width for better text alignment. I've been struggling with this issue as a beginner in the web development field and would appreciate some guidance. Link to image Here is a snippet of my HTML code: & ...

htmlcss

Downloading EJS File instead of Displaying on Express.js Router

As I embark on the journey of developing a live video sharing/watching feature using Pure Node.js and without relying on any frameworks, an unexpected issue arose in the middle of the process. The problem occurred when Express started downloading an EJS fi ...

javascriptnode.jsexpresssocket.ioejs

The function is not triggered when the select tag is changed

I'm currently working on implementing a drop-down menu using the <select> element in HTML. Here is the code snippet I have so far: <select id="Parameter1" onchange="function1()"> <option value = "0105" name = "Frequency">Frequency ...

javascriptangularjsdrop-down-menuangularjs-scopeonchange

The functionality of linear mode seems to be malfunctioning when using separate components in the mat-horizontal-stepper

In an effort to break down the components of each step in mat-horizontal-stepper, I have included the following HTML code. <mat-horizontal-stepper [linear]="true" #stepper> <mat-step [stepControl]="selectAdvType"> <ng-template matStep ...

javascriptangulartypescriptangular-materialangular5