Ondersteuning » Plugin vragen » Object shows on wrong place

  • Hi everyone,

    Recently I installed a plugin called GTranslate and I’m trying to optimize it for my website. On the right side of my header, there is a globe that allows people to switch languages but when you open it the flags show up on the right side of the screen. Instead of this, I would love to create a list under the icon in the header. Does anybody now how to change this? The code I used is attached.

    Thanks in advance.

    Kind regards,
    Tim

    <span class="gsatelites"></span><span class="gglobe"></span><style>
    .gglobe {background-image:url(http://tkmedia.nl/wp-content/uploads/2022/09/translation-global-svgrepo-com.svg);opacity:0.8;border-radius:50%;height:25px;width:20px;background-repeat: no-repeat;cursor:pointer;display:block;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
    .gglobe:hover {opacity:1;-moz-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);}
    .gsatelite {background-color:#777777;opacity:0.95;border-radius:50%;height:24px;width:24px;cursor:pointer;position:absolute;z-index:100000;display:none;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
    .gsatelite:hover {opacity:1;-moz-transform: scale(1.3);-webkit-transform: scale(1.3);transform: scale(1.3);}
    </style>
    
    <script>
    function renderGSatelites($, e) { $('.gsatelite').remove();
    var centerPosition = $('.gglobe').position();
    centerPosition.left += Math.floor($('.gglobe').width() / 2) - 10;
    centerPosition.top += Math.floor($('.gglobe').height() / 2) - 10;
    var language_codes2 = ["nl","en","fr","de","it","pt","ru","es"];
    var languages = ["Dutch","English","French","German","Italian","Portuguese","Russian","Spanish"];
    var us_flag = false;
    var ca_flag = false;
    var br_flag = false;
    var mx_flag = false;
    var qc_flag = false;
    var count = language_codes2.length, r0 = 55, r = r0, d = 34, cntpc = 12, nc = 0, m = 1.75;
    cntpc = 2 * Math.PI * r0 / 34;
    for (var i = 0, j = 0; i < count; i++, j++) {
    var x, y, angle;
    do {if (j + 1 > Math.round(2 * r0 * Math.PI / d) * (nc + 1) * (nc + 2) / 2) {nc++;r = r + r0;cntpc = Math.floor(2 * Math.PI * r / d);}angle = j * 2 * Math.PI / cntpc + Math.PI / 4;x = centerPosition.left + Math.cos(angle) * r;y = centerPosition.top + Math.sin(angle) * r;
    var positionGSatelites = ($('.gsatelites').parent().css('position') == 'fixed' ? $('.gsatelites').parent().position() : $('.gsatelites').offset()),vpHeight = $(window).height(),vpWidth = $(window).width(),tpViz = positionGSatelites.top + y >= 0 && positionGSatelites.top + y < vpHeight,btViz = positionGSatelites.top + y + 24 > 0 && positionGSatelites.top + y + 24 <= vpHeight,ltViz = positionGSatelites.left + x >= 0 && positionGSatelites.left + x < vpWidth,rtViz = positionGSatelites.left + x + 24 > 0 && positionGSatelites.left + x + 24 <= vpWidth,vVisible = tpViz && btViz,hVisible = ltViz && rtViz;if (vVisible && hVisible) {break;} else {j++;}} while (j - i < 10 * count);
    $('.gsatelites').append('<span class="gsatelite gs' + (i + 1) + ' glang_' + language_codes2[i] + '" onclick="doGTranslate(\'nl|'+language_codes2[i]+'\')" title="' + languages[i] + '" style="background-image:url(//tkmedia.nl/wp-content/plugins/gtranslate/24/' + (function(l){if(l == 'en' && us_flag)return 'en-us';if(l == 'pt' && br_flag)return 'pt-br';if(l == 'es' && mx_flag)return 'es-mx';return l;})(language_codes2[i]) + '.png);left:' + x + 'px;top:' + y + 'px;"></span>');
    $('.gs' + (i + 1)).delay((i + 1) * 10).fadeIn('fast');
    }}
    function hideGSatelites($) { $('.gsatelite').each(function(i) { $(this).delay(($('.gsatelite').length - i - 1) * 10).fadeOut('fast');});}
    (function gt_jquery_ready() {
        if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);
        (function($) { $('body').click(function() {hideGSatelites($);});$('.gglobe').click(function(e) {e.stopPropagation();renderGSatelites($, e);});})(jQuery);
    })();
    </script>
    <style>#goog-gt-tt{display:none!important;}.goog-te-banner-frame{display:none!important;}.goog-te-menu-value:hover{text-decoration:none!important;}.goog-text-highlight{background-color:transparent!important;box-shadow:none!important;}body{top:0!important;}#google_translate_element2{display:none!important;}</style>
    <div id="google_translate_element2"></div>
    <script>function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'nl',autoDisplay: false}, 'google_translate_element2');}if(!window.gt_translate_script){window.gt_translate_script=document.createElement('script');gt_translate_script.src='https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2';document.body.appendChild(gt_translate_script);}</script>
    
    <script>
    function GTranslateGetCurrentLang() {var keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
    function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
    function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;if(typeof ga=='function'){ga('send', 'event', 'GTranslate', lang, location.hostname+location.pathname+location.search);}var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf('goog-te-combo')!=-1){teCombo=sel[i];break;}if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
    </script>

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Hi
    These are the Dutch WordPress.org forums, so here we communicate in Dutch. If you don’t speak Dutch, feel free to join the international forums at https://wordpress.org/support/

    Hallo,
    Dit zijn de Nederlandse forums van WordPress.org, dus de voertaal hier is Nederlands. Als je enkel Engels spreekt, dan ben je meer dan welkom op de internationale forums op https://wordpress.org/support.

    Groet,
    Jeroen

    Thread starter consilii

    (@consilii)

    Hi @jeroenrotty,

    Excuses in het Nederlands is uiteraard alleen maar gemakkelijker,

    Tnx voor de info!

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Hey,

    De code van de positie van alle subitems binnen die lijst staat met CSS code gedefineerd als absolute waarde en dan met pixels vanaf links boven in het scherm. Dus je zal CSS code moeten schrijven die het op de juiste plek zet – voorbeeld van de CSS die de positie bepaald van item 1:

    left: 38.8909px;
    top: 40.8909px;
    display: inline;

    Heb je die code niet zelf geschreven want daar lijkt het wel op in ieder geval. Heeft die plugin geen soort van widget of schortcode of eigen methode om het op een makkelijke manier aan een WordPress menu toe te voegen? Ik heb er verder geen ervaring mee want ik hou niet van automatische vertalingen.

    Thread starter consilii

    (@consilii)

    Hi @jeroenrotty

    Thanks voor je hulp, heb het uiteindelijk kunnen fixen met een z-index.

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Het staat er nu wel dichterbij, maar hou er rekening mee dat het niet goed responsive is momenteel bij niet-brede schermen. En op mobiel heb je het item 2x staan (icoontje is zwart en bijna onzichtbaar) en ook daar is de positionering niet erg optimaal.

    Thread starter consilii

    (@consilii)

    Thanks voor je hulp @jeroenrotty, ik ga kijken of ik het opgelost krijg

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)