Java script onklick button?
Ich möchte ein Javascript in meine Website einbauen um die Website übersetzen zu können. Diser Stadard Google translate Code sieht jedoch sehr unschön aus und ich wollte fragen, ob/wie es geht einen Knopf einzubauen, der einen Alert oder ein Popup auslöst, indem dieses Script ausgeführt wird und man die Sprache wählen kann.
Script:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'de' },
'google_translate_element'
);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
P.S. Falls es eine andere Möglichkeit gibt die Seite zu übersetzen (es handelt sich um einen Blog für mein anstehendes Auslandsjahr), also nur Von Deutsch zu Englisch notwendig, dass es Familie UND Gastfamilie lesen können bin ich gerne offen dafür
Danke schon einmal im Vorraus.
2 Antworten
Ein popupfenster mit Sprachauswahl liese sich realisieren, indem du ein entsprechendes Form der Seite hinzufügst oder sichtbar machst, sobald der Button geklickt wird.
Das Event zum Abschickend es Forms fängst du mittels einem Listener ab und wertest dann die eingegebene Sprache aus, um die Seite zu übersetzen.
Am einfachsten schaust du dir das vermutlich bei diversen Websiten ab.
Ein Beispiel hätte ich aber aus einem Userscript, das ich für GF schrieb(passt leider nicht im Comment, habe ich verlinkt).
Erklärung dazu:
Die Methode saveConversationGUI ist quasi die Onklick-Methode. Sie fügt das Popupfenster dem Dokument hinzu. Das Popupfenster wird durch createModalPane erstellt.
saveConversation ist das Callback des Forms. Beim Absenden wird diese Methode aufgerufen und die eingegebenen Werte werden geparst.
Das ganze Script ist auf folgender Seite erhältlich:
Ich empfehle allerdings eher, sich andere Webseiten anzuschauen und dort abzugucken.
hast du da evtl einen link für so eine seite oder kennst du eine andere einfache Methode die Seite zu übersetzen?
Ich hab schnell mal ein kürzeres, verständlicheres Beispiel erstellt:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init);
function init(){
document.getElementById("TranslateButton").addEventListener("click", showTranslateForm);
document.getElementById("TranslateFormContainer").addEventListener("submit", translateFormSubmit);
}
function showTranslateForm(){
document.getElementById("TranslateFormContainer").style.display = "block";
}
function translateFormSubmit(e){
e.preventDefault();
var language = document.getElementById("TranslateFormLanguageField").value;
translatePage(language);
}
function translatePage(language){
//Your Code here
alert(language)
}
</script>
<style>
#TranslateFormContainer{
position: fixed;
margin: 0 auto;
display: none;
}
</style>
</head>
<body>
<button id="TranslateButton">Übersetzen</button>
<div id="TranslateFormContainer">
<form method="POST" action="">
<input type="text" name="language" id="TranslateFormLanguageField"/>
<input type="submit" value="Absenden"/>
</form>
</div>
</body>
</html>
Guten Tag,
also für einen Blog, fällt mir spontan WordPress ein.
In WordPress kannst du ein Template aussuchen und dann würde ich dir Polylang empfehlen. Damit hättest du dann eine mehrsprachige Webseite.
Für mich wäre das die sauberste Lösung.
es macht mir aber sehr viel spaß selbst den Code zu schreiben und mich selbst herauszufordern. Deshalb schreibe ich ihn in reiner Codeform, teste ihn derzeit auf einem Gratisserver und kaufe vor Abflug bei Godaddy Domain+RootServer+MailClient
Ah OK, dann kannst du z.B. das Template selber programmieren. Sonst habe ich das selbst mal in einem php Projekt gemacht. Da habe ich gettext genutzt. Das ist aber super kompliziert. https://www.gnu.org/software/gettext/. Eine weitere Alternative wäre ein kleiner Blog, wo du den Nutzer auf die Seite umleitest die die ausgesuchte Sprache hat. Eine letzte Idee wäre eine Datenbank mit den Texten in der entsprechenden Sprache und du nimmst jeweils die Texte die du brauchst. Der Vorteil ist, dass du selbst die Texte übersetzt, da Google Translate nicht immer so toll übersetzt.
das ist die alternative im "Worst Case", ich hatte vor 1x die woche einen Beitrag zu schreiben und es war nicht das Ziel das in 2 Sprachen zu tun :-)
Falls du irgendwie Hilfe brauchst, helfe ich gerne. Ich lese super gerne Blogs. Wenn du deinen Code irgendwo postest, z.B. github kann ich dir gerne ein paar Tipps geben, brauchst mich nur kontaktieren.
ich bin leider noch ein kleiner anfänger was js angeht :/ hättest du evtl ein paar zeilen code/ein toutorial mit dem sich dass realieiseren ließe? ich weiß nur, dass ich das script ich keine Alert funciton einbauen kann, weil script im script nicht funktioniert