Search code examples
javascriptjquerytranslate

Translate This pop up covers content


I am using the Translate This service for translation on my site. Everything works great but for one thing. When you translate the site a bar drops down that says

Page Finished Translating. Translated by the
TranslateThis Button | Undo Translation >

That is also fine but the issue is that the bar covers up content on my site. Is there a way to change the script in some form that will push the content down instead of covering it up? I do not see a way to do this in the settings of translate this but I was wondering if someone might help me figure out how to hard code that in there. I do not know enough about javascript to do this myself.

Thanks for any and all help!

Here is a short video to show what I mean by content being covered up.

Here is the Translate This code used on my site:

<!-- Begin TranslateThis Button -->
<div id="translate-this"><a href="http://translateth.is/" 
class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js">
</script>
<script type="text/javascript">
TranslateThis({
  GA : true,
  doneText : 'Page Finished Translating. Translated by the',
  undoText : 'Undo Translation »', 
  undoLength : 15000, 
  fromLang : 'en',
  ddLangs : [ 
'es',
'fr',
'en',
'ar',
'zh-CN',
'ko',
'it',
'cs',
'iw',
'de',
'pt-PT',
'ru',
'ja',
'vi',
'el',
'hi',
'nl',
'tr'
   ],
    btnImg : '/images/skin/translate-button.png',
    btnWidth : 120,
    btnHeight : 18,
});
</script>
<!-- End TranslateThis Button -->

Thanks for any help anyone can offer!


Solution

  • The popup is a dynamically created div with class ttb-undo. It is absolutely positioned by a CSS file which is included by the TranslateThis script. The easiest solution is to just hide the bar entirely:

    .ttb-undo {
       display: none;
    }
    

    You could also try changing its position and top values in a CSS sheet, but since it's shrunk programmatically, I'm not sure what kind of jittering you might get. When I manually deleted the top: 0 rule and added a bottom: 0 in Firebug, the thing danced as it was shrinking.