jTextTranslate: A jQuery Translation Plugin

The double-click functionality in the New York Times was somehow fascinating but also highly discussed because it boldly used the browser functionality to get the definitions of words. Fortunately, the […]

The double-click functionality in the New York Times was somehow fascinating but also highly discussed because it boldly used the browser functionality to get the definitions of words. Fortunately, the double click now causes not an immediate popout to appear but lets the user confirm by showing an interrogation mark.

This inspired me to create a new jQuery plugin for translating text. Imagine, how users that don’t have English as their first language could profit from an integrated functionality to translate e.g. an article.

The plugin works with the Google Language API and can be used to translate a text in all the languages provided by the API.

You can call the plugin like this:

$(element).translate()

And you can configure the plugin in the following way:

  1. original: the language shortage of the initial language (default is “en”)
  2. notfound: the message shown when no translation was found
  3. title: The title of the translation overlay
  4. firstOptionText: the text shown as first option in the languages drop down

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 13

Comments are closed.
  1. Pingback: CSS and jQuery Tutorial: Overlay with Slide Out Box | Codrops

  2. Pingback: Plugin jQuery : jTextTranslate, traduire facilement vos textes | DevZone - Zone de développement web

  3. Pingback: jTextTranslate — Traduction de votre site en 87 langues » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour intégrateurs web front-end (avec parfois un soupçon de PHP)

  4. Pingback: CSS and jQuery Tutorial: Overlay with Slide Out Box | Excellence from web

  5. I am attempting to integrate a translation facility into the above website. I am using coldfusion and the text for translation will be presented in the form of tags. #recordset1.mytext#.

    I am playing around with your demo page and it is working on my desktop server. But when I replace your text with the above, the text does appear but the translater says no translation available. This is the revised part of your code with the coldfusion tag

    =========================

    Paragraph 1

    #recordset_test.pageone#

    =======================

    I suspect that the translation does not fire because
    $(“#text1”).translate(); has not the ability to dynamically translate text1 into real text.

    Is there a workaround ??

    Many thanks for any assistance.

    James kane

  6. Excellent contribution, but I have a question, is it possible to limit the number of languages ??available for editing?, Ie can be configured to only be translated into English, French, Portuguese and Italian

    Thank you very much

  7. Is it possible to make it replace in it’s original space? I’m looking to do that and make it to translate a full page but exclude certain parts such as peoples names ect?