Site multi-langue ou script pour traduire

[betclever]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.betclever.net

Description du problème

Bonsoir à tous,

Existe t-il une sorte de script qui permets à l'utilisateur de choisir sa langue sur chaque page ou alors dans l'entièreté (je préfère) ?

Je sais qu'il y a un script avec un genre de petit bouton google mais c'est horrible comme bouton et ça casse un peu tout le charme du fofo surtout que ça s'affiche sur chaque page...

J'aimerais vraiment un truc plus sérieux qu'un petit bouton google, cela existe t-il ?

Si pas, est-ce que je pourrais savoir les alternatives ?

Merci à vous et bonne fin de soirée,

[Ea]

Bonjour,


Sur le site de google ( lien ) il y a d'autres modules que le bouton présenté dans le tutoriel sur ce forum.

Par exemple celui "automatique" ne fait apparaître une barre de traduction que si la langue de navigateur du visiteur diffère de celle attendue.

À part ça, j'imagine qu'il y a des services de ce genre sur d'autres sites tels que bing.

Cordialement.

[betclever]

Merci beaucoup mais lors de la création, j'obtiens une balise meta et une div.

Dois-je mettre ces 2 là en créant un script ou alors via le module HTML ?

Merci à vous

[Ea]

J'imagine que par exemple avec :

Code:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
       

il faudrait mettre un script :

Code:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}
$(function(){
  $('body').append('<div id="google_translate_element"></div>');
  $.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
});

Par contre à mes essais ça ne donnait pas ce que j'attendais : https://i.imgur.com/aKQWZqC.png

Mais vu que c'est du html, il doit y avoir moyen de personnaliser par CSS ( et en modifiant le javascript "$('body').append('<div id="google_translate_element"></div>');" on peut choisir de le placer autre part qu'à la fin de la page ).

Cordialement.

[betclever]

Alors j'ai appliqué le script ci-dessus avec une balise "meta" qui permets d'afficher une barre si la langue détectée n'est pas le français en l’occurrence...

Ce script, une fois que je le mets sur "toutes les pages", il rentre en conflit avec mon script sur la palette de couleurs personnalisé et du coup, ce dernier se désactive (le script palette de couleurs) tandis que celui pour le clic droit reste actif...

Si j'active le script traducteur juste sur l'index, le problème ne se pose pas...

Une raison à cela ?

Je peux tout te copier si tu veux au niveau du code customisé...

Pour bing, il faut un compte apparemment et le bouton est encore plus laid que celui de google

Merci de ton aide

PS : Le script ne fonctionne pas chez moi et j'ai pourtant changé la langue de mon navigateur; c'est bizarre.

[Ea]

Vous pouvez laisser le script ?

Normalement ça arrive quand il y a un problème de syntaxe ( un ; qui manque mais qui ne cause un problème que si il y a un autre script après ).

Cordialement.

ps : pour l'edit, il n'y a pas un module en bas comme dans ma capture ?

[betclever]

Actuellement il sont tous deux activé mais celui du tracteur juste sur l'index tandis que celui de la palette de couleur quand à lui est activé sur toutes les pages.

Quand au dernier qui s'occupe de désactiver le clic droit, il est juste activé sur l'index également comme l'est le traducteur.

En gros, quand je mets "toutes les pages" pour le script traducteur, ma palette de couleur ne fonctionne plus.

Par contre, malgré le changement de langue, le script traducteur n'as pas l'air de fonctionner malgré le fait que j'ai fais un copier coller du votre et de celui créé sur le service "google".

Merci à vous,

[Ea]

Il y a une balise meta dans un script :

Code:

<meta name="google-translate-customization"content="40c24f6a8d5939b8-c1f3d20f52a0a065-g1ce976e68def1cc6-11"></meta>

C'est du html et on peut le mettre soit dans la partie <head> ... </head> par édition de la template "général > overall_header", soit ( mais ça ne sera que sur les pages d'accueils ) par le PA > Général > Les moteurs de recherche > Balises supplémentaires ( on peut ajouter des balises meta et insérer les valeurs name="{valeur}" et content="{valeur}".

Cordialement.

[betclever]

Alors, quand j'enlève la balise meta qui ne devrait donc pas être dans la partie script, ma bannière du dessus donc qui contient "betclever" descends de quelques crans et vient se loger sur les catégories...

Est-ce normal ou une erreur dans le script ?

Je l'ai effacé du coup car si je le laisse, c'est terriblement embêtant surtout pour les membres...

[Ea]

Si on n'a pas mis la ligne :

Code:

$(function(){
  $('body').append('<div id="google_translate_element"></div>');
});

le script va ajouter le module en haut de la page ( ce qui cause le décalage de la bannière pour une raison qui m'est inconnue ).

Si je mets par exemple :

Code:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}
$(function(){
  $('#fa_share').after('<span id="google_translate_element" class="fa_tbMainElement"></span>');
  $.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
});

pour l'ajouter dans la toolbar, puis que je joue sur le CSS :

Code:

#google_translate_element {
  width: 124px;
  overflow: hidden; 
}
#google_translate_element select { width: 124px;
}

et ça peut par exemple donner ceci : https://i.imgur.com/sCqy4yf.png ( le css étant personnalisable )

edit : je viens de remarqué que même comme ça la bannière se décale, je ne comprends pas trop la raison mais en ajouter ceci au CSS (PA > Affichage > Couleurs > Feuille de style) le problème semble se résoudre :

Code:

body{position:fixed!important}

[betclever]

Alors, j'ai essayé ce que tu écris plus haut et voici ce que j'obtiens comme résultat assez space.

En gros, j'ai ajouté et activé le script et ensuite j'ai remarqué qu'il n'y avait pas que la bannière qui décalait mais presque tout dont voici un print screen d'un poste par exemple ou lorsque tu cliques sur la couleur, la police d'écriture ou autre, tout se décale vers le bas comme avec la bannière :



Quand j'ajoute dans le CSS une position fixe pour la bannière, j'obtiens mon fofo tout recroquevillé voir le screen car très difficile à décrire avec des mots :



Donc en gros, le titre colle bien au dessus mais j'ai pas été voir dans les sujets pour le reste mais le fofo est décalé vers la gauche et totalement rétrécis.

Voilà, j'espère t'aider avec ces captures d'écran, si tu as besoin d'autre info, n'hésite pas, je suis vraiment coincer car j'ai des membres qui ne peuvent lire malgré qu'ils viennent et donc ne participent pas

Merci beaucoup

[Ea]

Si je rajoute juste un . invisible en haut de la page avec ce script :

Code:

$(function(){
  $('body').prepend('<span style="visibility:hidden">.</span>');
});

j'ai le décalage qui ne se fait pas.

Donc il faudrait essayer ça à la place du "position:fixed"

[betclever]

Bonsoir,

Pourrais-tu me dire exactement ce que je dois mettre dans partie script et dans le CSS car là je suis un peu perdu avec tout ce qui s'y trouve au dessus et surtout, je n'ai pas envie que des codes se perdent sans raison et qui seraient limite inutile...

Dès lors, sans vouloir t'en demander de trop, serait-il possible que tu me colles tout ce que je dois mettre dans un ou 2 scripts car j'ai l'impression qu'il en faut 2 ?

Faut-il également modifier le CSS et si oui, que dois-je y rajouter et est-ce que si je rajoute à la première ou à la dernière ligne change t-il quelque chose ?

Merci à vous,

[betclever]

Un petit UP

[betclever]

Un petit UP après 2 jours sans réponse ?

Si quelqu'un pourrait juste me dire ou mettre les codes ci-dessus car il y en a tellement à présent qu'il m'est difficile de savoir ou le coller ?

C'est très important pour aider les membres hors France.

Merci beaucoup

[betclever]

Un petit retour serait sympa svp, je suis totalement coincé, si une personne pourrait me dire ou mettre exactement au bon endroit de ce qu'il se trouve au dessus, ce serait sympa.

Merci

[Ea]

Les codes javascript sont dans PA > Modules > HTML & JAVASCRIPT | Gestion des codes Javascript.

Les codes CSS sont à ajouté dans PA > Affichage > Couleurs > Feuille de style.

[betclever]

Oui merci beaucoup EA mais que dois-je insérer exactement à présent car avec tous les scripts et le CSS, je ne sais plus quoi copier-coller exactement ?

Merci de ta réponse

[Ea]

Voilà des screenshot avec les codes qui vont ensemble, le reste ne devrait pas être utilisé il me semble.

=> https://i.imgur.com/vkVs5h3.png
=> https://i.imgur.com/Ddoo6yP.png
=> https://i.imgur.com/hEACbmM.png

[betclever]

Tu vas me prendre pour une quiche mais pour moi ce n'est pas encore très clair dans le sens ou dois-je mettre tous les scripts dans un seul script ou en créer 2 différent car je vois 2 scripts c'est bien juste ?

Pour la partie CSS, j'en vois qu'un donc ça, ça va.
De toute manière, je vais essayer en espérant que cela ne déconne pas...

Merci de ton retour

[betclever]

Alors j'ai essayé EA et ça marche, merci beaucoup !

3 choses par contre que j'aimerais encore te demander à propos de ce script :

Possibilité de le placer en haut de la page pour traduction car là il se trouve dans le coin inférieur gauche de la page et pas voyant du tout, la preuve j'ai demandé à des utilisateurs (membres) de traduire mais ils ne le voyaient pas...

Possibilité de le mettre ailleurs ?

Quand Google traduit le texte, il enlève la mise en forme et tape tout dans un bloc très moche... lol
Une possibilité qu'il laisse la mise en page avec le paragraphe ?

Possibilité qu'il traduise automatiquement en anglais si le navigateur est en anglais tout en laissant le choix ?

Merci en tout cas c'est super !

[Ea]

Dans ce post j'ai montré un exemple de comment le mettre dans la toolbar.

Cela cause le décalage de la bannière, mais en mettant le script de ce post, c'était résolu pour moi.

Je ne pense pas qu'on puisse agir sur la façon dont google affiche le texte traduit ( mais habituellement ça me semble correct ).

Et voilà un script qui devrait traduire dans la langue du navigateur automatiquement sauf si on a le français :

Code:

setTimeout(function() {
  if (window.localStorage && 1 != localStorage.autosetLang) {
    localStorage.autosetLang = 1;
    var a = (navigator.language || navigator.userLanguage || "").replace(/-.*/, "");
    if ("fr" != a && $('.goog-te-combo option[value="' + a + '"]').length) {
      if (a = $(".goog-te-combo").val(a)[0], "createEvent" in document) {
        var b = document.createEvent("HTMLEvents");
        b.initEvent("change", !1, !0);
        a.dispatchEvent(b);
      } else {
        a.fireEvent("onchange");
      }
    }
  }
}, 3E3);

[betclever]

Merci à toi mais rien ne se passe en gros quand j'applique ce script et j'ai essayé avec 2 différents navigateurs en changeant la langue vers l'anglais mais le site reste en français et donc ne change pas automatiquement.

Voilà ce que j'ai fait exactement :

J'ai copié-collé ton code et l'ai mis avec l'autre script de traduction... Dois-je le mettre à part ?

Pour ce qui est de la langue, en gros, je désire que les visiteurs anglophones puissent lire les analyses et autre donc la traduction doit se faire en anglais quand un visiteur hors navigateur (français) se connecte.

Pour le script plus haut, je n'ai pas compris comment le mettre dans la barre mais je me rappelle que cela décalait tout aussi...

Si ça ne t'ennuie pas, pourrais-tu me copier le script ou les scripts en entier à mettre et à part le CSS car avec tous ses codes, j'ai bien peur de faire une erreur.

Merci beaucoup en tout cas !

[betclever]

Pour être plus clair en fait EA, voici ce que j'ai dans l'unique script pour la traduction :

$(function(){
$('body').append('<div id="google_translate_element"></div>');
});

function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}
$(function(){
$('#fa_share').after('<span id="google_translate_element" class="fa_tbMainElement"></span>');
$.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
});

$(function(){
$('body').prepend('<span style="visibility:hidden">.</span>');
});

setTimeout(function() {
if (window.localStorage && 1 != localStorage.autosetLang) {
localStorage.autosetLang = 1;
var a = (navigator.language || navigator.userLanguage || "").replace(/-.*/, "");
if ("fr" != a && $('.goog-te-combo option[value="' + a + '"]').length) {
if (a = $(".goog-te-combo").val(a)[0], "createEvent" in document) {
var b = document.createEvent("HTMLEvents");
b.initEvent("change", !1, !0);
a.dispatchEvent(b);
} else {
a.fireEvent("onchange");
}
}
}
}, 3E3);

Voilà ce que j'ai dans la partie CSS ajouté pour ce script :

#google_translate_element {
width: 124px;
overflow: hidden;
}
#google_translate_element select { width: 124px;
}

Peux-tu me dire la partie que je dois changer pour qu'une part le script automatique fonctionne pour le changement de langue si pas le français détecté par le navigateur et également me dire ce que je dois changer pour avoir le choix de la traduction au dessus et non au pied de la page.

Merci beaucoup

[Ea]

Ceci il ne le faut pas :

Code:

$(function(){
$('body').append('<div id="google_translate_element"></div>');
});

c'était pour le mettre à la fin de la page.

Il faudrait voir sans, mais autrement sur un forum de test en mettant tout le code ça se mettait au dessus chez moi

[betclever]

Alors, lorsque je retire le bout de script que tu me dis, je n'ai plus la petite icone pour traduire...

J'ai vérifié aussi mais apparemment, le site ne se traduit toujours pas tout seul lors d'une visite d'un anglophone ou autre ?

Peux-tu essayer d'aller sur mon site et voir si chez toi ça traduit lors d'une visite avec un navigateur EN car chez moi ça ne marche pas mais j'ai peut-être mal changer la langue dans le navigateur

Merci de ton aide

[Ea]

Peut-être que la toolbar n'est pas encore affichée à l'exécution du script, il faudrait peut-être remplacer le script par ceci :

Code:

function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'fr',
        layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT
    }, 'google_translate_element');
}

$(function() {
    $(function() {
        $('#fa_share').after('<span id="google_translate_element" class="fa_tbMainElement"></span>');
        $.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
    });

    $(function() {
        $('body').prepend('<span style="visibility:hidden">.</span>');
    });

    setTimeout(function() {
        if (window.localStorage && 1 != localStorage.autosetLang) {
            localStorage.autosetLang = 1;
            var a = (navigator.language || navigator.userLanguage || "").replace(/-.*/, "");
            if ("fr" != a && $('.goog-te-combo option[value="' + a + '"]').length) {
                if (a = $(".goog-te-combo").val(a)[0], "createEvent" in document) {
                    var b = document.createEvent("HTMLEvents");
                    b.initEvent("change", !1, !0);
                    a.dispatchEvent(b);
                } else {
                    a.fireEvent("onchange");
                }
            }
        }
    }, 3E3);
});

J'ai juste entouré une partie par $(function(){ ... }); pour la retarder.

Pour ce qui est de la langue automatique ça fonctionne chez moi.

La première fois ça se met automatiquement, ensuite c'est google qui gère l'affichage automatique. Donc si on retire la barre de langue, on ne sera plus la première fois et il faudra le faire manuellement ( ou vider les données du navigateur ).

[betclever]

Un tout grand merci pour ta perspicacité, ça fonctionne à merveille et c'est bien dans la barre du dessus à présent et la traduction se fait bien automatiquement.

Une dernière chose que j'aimerais te demander :

Peut-on changer la phrase suivante qui se trouve sur le bouton de traduction "sélectionner une langue" par autre chose pour attirer l'attention sur ce bouton ?

Merci à toi

[Ea]

Le CSS :

Code:

#google_translate_element select { width: 124px;}

peut être modifié ( pour mettre en rouge par exemple, ou en gras, avec un bord bleu, ... ).

Sinon je pense que la phrase dépend de la langue, on devrait pouvoir la remplacer par ce qu'on veut avec ce script :

Code:

setTimeout(function(){ $("select.goog-te-combo option[value='']").text("bingo!!!") }, 3000);

[betclever]

Merci ça marche, pourrais-tu me donner les différents codes pour mettre en gras, en rouge et éventuellement avec un bord bleu ?

Le script fonctionne, j'ai mis translator qui je pense représente mieux la traduction que plutôt "sélectionner une langue"