While translating something I notice the tools tab in Google Translate (Google account required). I found out some little toys I'd never played with, so guess what.
First it's a one line line JavaScript inclusion, quite practical but not easy to customize. I know should create my own widget to achieve it, but I did not feel like rewriting this widget just to be able to position it at the right place in the page or just show it when I want.
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
I also try to put remote JavaScript links at the end of my document for to optimize load time.
I tried to use show/hide to toggle it but it throws an exception .. not sure why. Fortunately the good old position trick did the job:
#translate-help {
font-size:90%;
color:#fff;
width:160px;
top: -1000px;
left: -1000px;
position: absolute;
}
table.ig_reset.ig_tbl_line {
top: -1000px;
left: -1000px;
position: absolute;
}
The rest was a cake:
$(document).ready(function(){
$('#translate').click(function(){
offset = $(this).offset();
$('table.ig_reset.ig_tbl_line').queue(function(){
$(this).css({
top: offset.top + 25,
left: offset.left - 106
});
$(this).dequeue();
});
$('#translate-help').hide().css({
top: offset.top + 93,
left: offset.left - 106
}).slideDown();
return false;
});
});
Of course the link will degrade gracefully if JavaScript is disabled:
<a id="translate" href="http://translate.google.com/translate_t?hl=en" title="Translate this page">translate</a>
/* Google Widget Translate */
.gw-translate {}
.gw-translate-title {}
#gw-translate-content {}
The only bugs remaining (I just checked Firefox) is when a translation is selected, the translation box stop working. I'll have to investigate that, but I fear there's not much to do..
Oh.. and for a demo, watch at the top right of the page.
no comments :|