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.
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:'العربية'
}
});
Double-click a word below to get its french translation.
My kingdom for a horse!
$('#example2').sundayMorningBubble({
source:'en',
destination:'fr'
});
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);
}
});
});
In short, do whatever you want with it. Just keep the credits in place.
Take a look at the API pages by clicking below.
This function allows you to translate a string or a DOM element.
$.sundayMorning('bonjour', {
source:'fr',
destination:'en'
}, function(response) {
alert(response.translation);
});
Returned response object will be:
response = {
translation: 'hello',
source: 'fr',
destination: 'en'
}
$(":header, p").sundayMorning({
source:'fr',
destination:'en'
});
The content of heading titles and p tags will be translated.
Optionaly, you can specify your Google API key to use for requests. If you have one, set it here.
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'
});
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',
}
});
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',
}
});
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
});
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
});
});
This function allows you to get a word translated when double-clicked.
$(":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.
Optionaly, you can specify your Google API key to use for requests. If you have one, set it here.
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'
});
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',
}
});
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',
}
});
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 in milliseconds before the bubble to deseapper.
$(":header, p").sundayMorningBubble({
destination:'fr',
delay:5000
});
This function allows you to detect the language of a string or directly by a DOM element.
$.sundayMorningDetection('bonjour',
function(response) {
alert(response.language);
}
);
$("p#infrench").sundayMorningDetection(
function(response) {
alert(response.language);
}
);
Returned response object will be:
response = {
language: 'fr',
isReliable: [true|false],
confidence: [0.0-1.0]
}
$(":header, p").sundayMorningReset();
Remove previously applied sundayMorning behaviors.
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
};
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:'中文 (繁體)'
}
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>