Sorry, this plugin is deprecated! Google Translate API is no longer free. Enter the site anyway ?
Email me!
1.0.1 Beta
Bookmarklet generator

SundayMorning, What is it?

Hello! SundayMorning is a jQuery plugin that allows you to offer your visitors an easy way to translate page contents in +30 languages. Also available as a Bookmarklet.

Version: RSS Feed
1.0.1 Beta
Credits:
Tested:
Internet Explorer 6+, Firefox 3+, Safari 3+, Chrome

Sponsors

Demonstration

Inline translation with menu - See code

Double-click below to display a 6 language menu.

My kingdom for a horse!

$('#example1').sundayMorning({
    source:'en',
    trigger:'dblclick', 
    destination:{     
        fr:'Français',
        it:'Italiano',
        es:'Español',
        de:'Deutsch',
        ja:'アラビア語',
        ar:'العربية'
    }
});
Word translation - See code

Double-click a word below to get its french translation.

My kingdom for a horse!

$('#example2').sundayMorningBubble({
    source:'en',
    destination:'fr'
});
Translation with remote trigger - See code

Enter something below and click the button.

$('#submitButton').click(function(evt) {
    var text = $('#textInput').val();
    $.sundayMorning(text, {
        destination: 'fr', 
        menuLeft: evt.pageX, 
        menuTop:  evt.pageY},
        function(response) {
            $('#textInput').val(response.translation);
        }
    });	
});	

License

In short, do whatever you want with it. Just keep the credits in place.

Documentation

Take a look at the API pages by clicking below.

Documentation

sundayMorning()

This function allows you to translate a string or a DOM element.

$.sundayMorning(text, settings, callback)
$.sundayMorning('bonjour', {
    source:'fr',
    destination:'en'
}, function(response) {
    alert(response.translation);
});

Returned response object will be:

response = {
    translation: 'hello',
    source: 'fr',
    destination: 'en'
}
$(DOMElement).sundayMorning(settings)
$(":header, p").sundayMorning({
    source:'fr',
    destination:'en' 
});

The content of heading titles and p tags will be translated.

apiKey

Optionaly, you can specify your Google API key to use for requests. If you have one, set it here.

source

The source language code. If left blank, sundayMorning will try to guess it. Still, it is safer to define it manually as same words can exist in several languages but with totally different meanings.

$(":header, p").sundayMorning({
    source:'',
    destination:'fr' 
});
destination

The destination language code.

$(":header, p").sundayMorning();

If left blank, sundayMorning will try guess it from browser's language setting. If the language detection has failed or if the language is not translatable, destinationFallback settings will be used.

$(":header, p").sundayMorning({
    destination:'fr' 
});

The destination option can handle serveral languages in an object. This way a menu will be displayed (at the click position if trigger is used or at menuLeft / menuTop coordinates).

$(":header, p").sundayMorning({
    destination:{     
        fr:'Franais',
        it:'Italiano',
        es:'Espanol',
        de:'Deutsch',
    }
});
destinationFallBack

If the destination settings is left blank and the detection failed, those settings are used to define the destination language. Accept language code or menu object.

$(":header, p").sundayMorning({
    destination:'',
    destinationFallback:{     
        fr:'Franais',
        it:'Italiano',
        es:'Espanol',
        de:'Deutsch',
    }
});
trigger + shiftKey + ctrlKey

You can attach an event on a DOM Element to trigger its translation. . Ex. click, dblclick, mouseover etc...

$(":header, p").sundayMorning({
    destination:'fr',
    trigger:'dblclick'
});

To avoid conflict with other events, Shift key or/and Control key can be added to trigger the translation.

$(":header, p").sundayMorning({
    destination:'fr',
    trigger:'dblclick',
    shiftKey:true,
    ctrlKey:true
});
menuTop + menuLeft

These values represents the coordinates where to display the language menu. If the trigger setting is defined, those coordinates will be used.

$('a').click(function(evt) {
    $(":header, p").sundayMorning({
        destination:{     
            fr:'Franais',
            it:'Italiano',
            es:'Espanol',
            de:'Deutsch',
        },
        menuLeft:evt.pageX,
        menuTop: evt.pageY
    });
});

Documentation (2)

sundayMorningBubble()

This function allows you to get a word translated when double-clicked.

$(DOMElement).sundayMorningBubble(settings)
$(":header, p").sundayMorningBubble({
    source:'fr',
    destination:'en' 
});

The double-clicked word in a heading titles and p tags will be translated and displayed in a bubble.

apiKey

Optionaly, you can specify your Google API key to use for requests. If you have one, set it here.

source

The source language code. If left blank, sundayMorning will try to guess it. Still, it is safer to define it manually as same words can exist in several languages but with totally different meanings.

$(":header, p").sundayMorningBubble({
    source:'en',
    destination:'fr'
});
destination

The destination language code.

$(":header, p").sundayMorningBubble();

If left blank, sundayMorning will try guess it from browser's language setting. If the language detection has failed or if the language is not translatable, destinationFallback settings will be used.

$(":header, p").sundayMorningBubble({
    destination:'fr' 
});

The destination option can handle serveral languages in an object. This way a menu will be displayed (at the click position if trigger is used or at menuLeft / menuTop coordinates).

$(":header, p").sundayMorningBubble({
    destination:{     
        fr:'Français',
        it:'Italiano',
        es:'Español',
        de:'Deutsch',
    }
});
destinationFallBack

If the destination settings is left blank and the detection failed, those settings are used to define the destination language. Accept language code or menu object.

$(":header, p").sundayMorningBubble({
    destination:'',
    destinationFallback:{     
        fr:'Français',
        it:'Italiano',
        es:'Español',
        de:'Deutsch',
    }
});
keys

To avoid conflict with other events, Shift key or/and Control key can be added to trigger the translation. Note it can produce unexpected results with some native browser behavior.

$(":header, p").sundayMorningBubble({
    destination:'fr',
    shiftKey:true,
    ctrlKey:true
});
delay

Delay in milliseconds before the bubble to deseapper.

$(":header, p").sundayMorningBubble({
    destination:'fr',
    delay:5000
});

sundayMorningDetection()

This function allows you to detect the language of a string or directly by a DOM element.

$.sundayMorningDetection(text, callback)
$.sundayMorningDetection('bonjour', 
    function(response) {
        alert(response.language);
    }
);
$(DOMElement).sundayMorningDetection(callback)
$("p#infrench").sundayMorningDetection(
    function(response) {
        alert(response.language);
    }
);

Returned response object will be:

response = {
    language: 'fr',
    isReliable: [true|false],
    confidence: [0.0-1.0]
}

sundayMorningReset()

$(DOMElement).sundayMorningReset()
$(":header, p").sundayMorningReset();

Remove previously applied sundayMorning behaviors.

Documentation (3)

sundayMorning.defaults()

Here are the default values. Changing a setting here will apply it to all instances.

$.sundayMorning.defaults = {
    apiKey:'notsupplied',
    menuTop:50,
    menuLeft:30,
    trigger:false,
    source:'',
    destination:'',
    destinationFallback:
        $.sundayMorning.translatable,
    delay:3000
};

sundayMorning.translatable()

The translatable languages and code are:

$.sundayMorning.translatable = {
    en:'English', 
    ar:'العربية', 
    bg:'български', 
    ca:'català', 
    cs:'česky', 
    da:'Dansk', 
    de:'Deutsch', 
    el:'Ελληνικά', 
    es:'Español', 
    fi:'suomi', 
    fr:'Français', 
    hr:'hrvatski', 
    id:'Indonesia', 
    it:'Italiano', 
    iw:'עברית', 
    ja:'日本語', 
    ko:'한국어', 
    lt:'Lietuvių', 
    lv:'latviešu', 
    nl:'Nederlands', 
    no:'norsk', 
    pl:'Polski', 
    pt:'Português', 
    ro:'Română', 
    ru:'Русский', 
    sk:'slovenčina', 
    sl:'slovenščina', 
    sr:'српски', 
    sv:'Svenska', 
    tl:'Filipino', 
    uk:'українська', 
    vi:'Tiếng Việt', 
    CN:'中文 (简体)', 
    TW:'中文 (繁體)'
}

Installation

Download jQuery, SundayMorning script and stylesheet. Include them in your page.

<link 
    rel="stylesheet"
    type="text/css" 
    href="jquery.sundaymorning.css" />
<script 
    type="text/javascript" 
    src="jquery.js">
</script>
<script 
    type="text/javascript" 
    src="jquery.sundaymorning.js">
</script>
<script type="text/javascript">
    $(function() {
        // Call SundayMorning here.
        // See previous pages.
    });
</script>