JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Add Google Translate to Ning Bar

This is an old tip, revamped. In the past I offered a tip that added Google Translate to top of site using absolute position. And that works fine, except when zooming in/out. This should work better in regards to placement, whereas it will insert the Google Translate code before the Ning Bar Menu Tabs.

Instructions:

Add all code to your Custom Code Box via: My Network/Tools/Custom Code
Save.
If Google Translate gets in the way based on other elements in your Ning Bar, you can adjust the float:left. Locate this code below: div style="float:left;padding-right:20px; You can change the float:left to float:right;padding-left:20px;

<style>
#google_translate_element {height:26px!important;margin-top:3px;}
.goog-te-gadget-simple {padding:0px!important;height:24px!important;}
.goog-te-gadget img {float: left;}
.goog-te-menu-value  {margin-top:-5px!important;}
</style>

<!-- Google Translate -->
<div id="tmp_translatenbar" style="display:none;">
<div id="google_translate_element"></div>
<script type="text/javascript">// <![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
// ]]></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript">// <![CDATA[

// ]]></script>
</div>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xn_bar_menu_tabs").prepend('<div style="float:left;padding-right:20px;" id="translatenbar"></div>');
var t_translatenbarCode = document.getElementById('tmp_translatenbar');
var translatenbarCode = document.getElementById('translatenbar');
translatenbarCode.innerHTML = t_translatenbarCode.innerHTML;
}
</script>
<!-- End Google Translate -->

Enjoy,

Jen

2 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Armani Rouse on November 27, 2012 at 1:04pm

excellent tip to keep things neat and clean on your network without having to add a bunch of text boxes to achieve what you have hear! I'll be sending you those images soon jen for the custom project we are working on! Im in my office so pardon my sporadic responses lol im a 9-5 corporate guy then a programmer the rest of the day! :) we'll talk soon, but excellent tip here ;)

▶ Reply

Permalink Reply by JenSocial on November 27, 2012 at 1:26pm

Hi Armani,

Thank you for the positive feedback, always nice to hear!

No hurry on your icons.

Best,

Jen

▶ Reply

Permalink Reply by Armani Rouse on November 27, 2012 at 1:32pm

LOL I see, you've created another floater for VIP tips! :)

▶ Reply

Permalink Reply by JenSocial on November 27, 2012 at 1:49pm

Yeah, I like VIP Members to be able to access club fast and easy.

▶ Reply

Permalink Reply by JenSocial on November 29, 2012 at 12:34pm

iAuthen,

Great! This kind of comment is what inspires me to write more tips.

Thanks!

Jen

▶ Reply

Permalink Reply by Dr. Husky on March 18, 2013 at 5:16pm

is really good but do not work in my site, I can not make it visible the translator. There any suggestion?

disgoo.com

▶ Reply

Permalink Reply by TJ @ jQueryHelp on March 19, 2013 at 11:43pm

Hi Dr Husky,

I just looked at your Custom Code area to see if there was a problem with the code, but I don't see Jen's code in there. Did you put it in to try it and then take it out? By the way, I also see an extra </div> right near the bottom - it doesn't belong there because it does not close any open <div> tag.

Best wishes!

"TJ"

▶ Reply

Permalink Reply by JenSocial on March 20, 2013 at 5:47pm

Thanks TJ!

▶ Reply

Permalink Reply by JenSocial on March 31, 2013 at 7:30pm

Dr. Husky,

I received your private message, thank you. I'm really confused. The code I provided would not work for you? Can you explain what went wrong?

Thanks,

Jen

▶ Reply

Permalink Reply by Dr. Husky on April 15, 2013 at 10:07am

Sorry for taking so long to reply, I have had many personal problems lately that I walked away from my duties. But now if I'm ready to 100%
Thank you very much for your prompt help, and manages to discover my problem: the problem was that the ningbar hid the translator. Applying a z-index managed to fix it. Now looks great and therefore again to all of you, especially Jen and TJ @ jQueryHelp. They are a great team;)