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

Views: 743

Reply to This

Replies to This Discussion

Really thanks Jen and TJ @ jQueryHelp  !!  :)

Very sorry for not replying. I had to be away for several days but now I'm back. infinite thanks. Code does not appear because he was testing at the experimental site. Tomorrow I'll put it on my network.

For now warn that it is not a matter of css styles because deleting all my CSS and continuous without being the translator.


Really, my heartfelt thanks. :)

OK, I've added the tip but still not seen.
Greetings!

In my site i see 3 translators can I get help thanks in advance

No idea why. I would need to see the code installed, and maybe I can see why this happened.

Best,

Jen

<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 -->

I could not tell you what is wrong. I might could help if I could see the code installed.

Best,

Jen

<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 -->


Read more: http://jensocial.com/forum/topics/add-google-translate-to-ning-bar#...
Under Creative Commons License: Attribution Non-Commercial No Derivatives
Follow us: @jensocial on Twitter | JenSocialTips on Facebook
<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
.ningbarlink img { margin-top:7px!important; }
</style>

<script type="text/javascript">
var getinbox;
var getalert;
var getrequest;

if (ning.CurrentProfile != null ) {
getinbox = x$('.xj_messages_present .xj_count_unreadMessages').html();
getalert = x$('.xj_alerts_present .xj_count_unreadAlerts').html();
getrequest  = x$('.xj_count_friendRequestsReceived .xj_multiple_friend_requests a').html();


var NingBarLinks = '<li id="ninbox" class="ningbarlink"><a href="/profiles/message/listInbox"><img alt="Inbox" src="http://api.ning.com:80/files/UNKbObYJPtqfg2aS-dgvbW4oXlCd3U5WkjJEpeoMl6C5xN35tcqAFoslfCJEsXpcbF8P6-Xxn4I50nhLef7ns4MKoyX6OGm7/nb_mail.png">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nalert" class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="http://api.ning.com:80/files/qQrSmPU5KN3zAoKLSl-79Laa3XysHZWEL7-Zj18kXMSfY6wNNkJ6Rk5Y6Tw*sksG582rvj3*cbHut*nFvPQqbA__/nb_bell.png">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nfriends"  class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="http://api.ning.com:80/files/Ysd3GOwEDPYA7uPoibzkeZenfd4mM24U72C3pYGeFzwVL-ja2egQVMLHhxfODqgi9uh5CTlR-mmOov11u1fcmpBntSHGIxR5/nb_friends3.png" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="http://api.ning.com:80/files/6Jh2*58jpdlF21tISzcGBxmH6eHIHJ7Gdyl1BSTeWc*e5LLO6JwoA*lquR5NCgFAZTlUrdTVXJNr1S4cQAssmI2QzQmnQw9F/nb_invite.png" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="http://api.ning.com:80/files/F9CXodZonLEtbcyTdP1TyY6xmsw37eTy4Bh5WHYpdOQS7GrETVqwzGFYcFHW*y3WWCMV3I3GzQr3YgirS*cbX8QHJEmdu1IX/nb_settings.png" width="16">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};

var ninboxa = x$('#ninbox a').html();
var nalerta = x$('#nalert a').html();
var nfriendsa = x$('#nfriends a').html();

if(getinbox > '0') x$('#ninbox a').html(ninboxa + ' ( ' + getinbox + ' ) ');
if(getalert > '0') x$('#nalert a').html(nalerta + ' ( ' + getalert + ' ) ');
if(getrequest.indexOf( 'xj_count') <= 0) x$('#nfriends a').html(nfriendsa + '  ' + getrequest);
</script>
<!-- End NingBar Navigation Links -->

The problem of my three translators with a single code, and the bar Skysa that already the translator JenSocial

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips