I have a website in English, and recently some users reported that they do not know English, so I thought, maybe the site is not accessible to everyone, because some do not know English.
So my question is: is there any way for the website to automatically translate into the user's language?
I've been searching, it seems that Google has a translation API, is this what I need?
EDIT
I want to detect the user's browser language and translate the page into the user's browser language. We can obtain the language of the browser using navigator.language || navigator.userLanguage in JavaScript. Is there any way to integrate this with the Google API and then automatically translate without requiring user interaction?
I think it may be possible through control structures and methods, or by passing a variable as a parameter on the Googgle Translate website, am I right?
Please, I need help, I don't want the user to choose the language, I want to translate automatically, I want to recognize the language of the user's browser and automatically translate
Note: I use <meta charset="UTF-8">, does this affect anything?
This answer might answer the question and the solution is from w3schools. What it basically does is that a dropdown will be created with different types of languages. Here is the code, tell me if it works.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
I hope this is what you are looking for.
Remember how you asked me how I can detect the user's language? Well I finally came up with a code for that. Code is below.
let lang = window.navigator.languages ? window.navigator.languages[0] : null;
lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
let shortLang = lang;
if (shortLang.indexOf('-') !== -1)
shortLang = shortLang.split('-')[0];
if (shortLang.indexOf('_') !== -1)
shortLang = shortLang.split('_')[0];
console.log(lang, shortLang);
I hope this is what you are looking for!
Related
I don't have any expertise in programming, just from the little I've researched to solve one-off needs. However, the one thing I can't seem to find answers for is populating dynamic content on a page.
I currently build my website with no code programs (Airtable as my back-end).
For my work, my clients each receive a link to a webpage that contains a few client-specific variables (name, birthdate, pdf link) - is it possible to pass these parameters through the URL to have them show on the webpage?
I assumed it would function similarly to passing form data to a thank you page URL, is this theory correct? And if so, can anyone help with what I need to do/what html & js codes I need to implement to make this happen?
Thanks in advance (this would make my life a million times easier)!
Yes you can easily parse URL parameters with JS, see simple example bellow:
https://exampleurl.com/?birthdate=22091977&pdflink=yourlink123.pdf
<html>
<body>
<span id="birthdate"></span>
</body>
</html>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const birthdate = urlParams.get('birthdate');
const pdflink = urlParams.get('pdflink');
document.getElementById("birthdate").innerHTML = birthdate;
</script>
you can completely pass parameters via URL. eg: your_domain.com/name1/birth-date/code-pdf
I am preparing for GMAT and hence preparing a question bank. gmatclub.com has lots of question and I was able to write a python script that got the questions and respective answers. While getting the data,I am retaining the HTML formatting as some questions will have underline and bold portion.
I want to develop a desktop application that should read the HTML data (i will use excel or access db as datasource). However I am not sure how to design GUI that will render the HTML formatted data. Any suggestions, on if I can use excel or access user form to show HTML formatted data. Otherwise, if I have to use browser, can I implement the logic without server side scripting that is can I use Javascript to access database(IE allows use of ActiveXobject, however it wont work on chrome and firefox thats what MS site says). The reason for not using server side scripting is, so that I can share the source code with my non-tech friends and they can use it without installing anything.
I would recommend making a very simple web page, all stored in a single file (no server side). If you can get all the HTML for the questions and answers using your python code, use that same code to also write the Q&A into an HTML file that looks like what I have below (I note with comments where you should be writing the Q&A).
I would recommend hard-coding the rest of the html file (i.e. the parts outside the Q&A section) into your python code so that it can print this entire file in one fell swoop. You can then just open this in your browser of choice:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var json = [
//Use Python to write in your Q&A's here
{
"question":"Do you want to take the GMAT",
"answer":"<b>Yes</b>, I do"
},
{
"question":"What is LLC?",
"answer":"Limited Liability <i>Company</i>"
},
//End Q&A section
];
function reset()
{
$('#next').hide();
$('#showAns').show();
$('#a').hide();
ask();
}
function showAnswer()
{
$('#next').show();
$('#showAns').hide();
$('#a').show();
}
reset();
$('#next').click(function(){reset();});
$('#showAns').click(function(){showAnswer()});
function ask()
{
var randNum = Math.floor(Math.random() * json.length);
$('#q').html(json[randNum].question);
$('#a').html(json[randNum].answer);
}
});
</script>
</head>
<body>
<div id="q"></div>
<div id="a"></div>
<button id="showAns">Show Answer!</button>
<br>
<button id="next">Next Question</button>
</body>
</html>
Notes
1) They'll need internet connection to use this, since I make a call to google's jQuery (so it's technically not one page), but you can just download jQuery and call it locally.
2) It sounds like you'll just be getting the list of questions once, so it might actually be quicker to format them in excel into the JSON format and then paste them in the code.
i'm currently working with the google cse and i wonder wether it's possible to jump to a specific searchword. for example if i goole on my page the word publications, and there is a section of publications on a page, is it possible to jump directly to this section by using the implemented google search?
at the moment every search i do, leads me to the beginning of the page where the keyword is placed.
greetings martin
This is possible, yes, but you would have to do some coding. If you think about how the Google search works, it just generates a list of links. It has no control over what happens once you reach the other page. So, anything that you wanted to happen on the destination page, you would have to code yourself. If you really want to do this, you could set it up something like this:
First, you will want to use a V1 CSE, since it offers the ability to set a callback function on search complete, which the new, simplified V2 does not. See V1 documentation here: https://developers.google.com/custom-search/docs/js/cselement-devguide
Here's the sample code from that page, modified to add a callback function:
<!--
copyright (c) 2012 Google inc.
You are free to copy and use this sample.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Custom Search Element API Example</title>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
customSearchControl = new google.search.CustomSearchControl().draw('cse');
}, true);
customSearchControl.setSearchCompleteCallback(this, searchCompleteFn);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="cse" style="width:100%;">Loading...</div>
</body>
</html>
Then you can create that callback function like so:
function searchCompleteFn(control, searcher) {
//your code
}
In your code, you would want to get all the a.gs-title elements within the cse div and modify their href attributes to add the user's query. That way your destination page can see what the user searched for and take appropriate action (scroll to the appropriate section, highlight the keywords, whatever you want). For example, if the existing href is http://www.yoursite.com/somepath/somepage.html, you could change it to http://www.yoursite.com/somepath/somepage.html#query=[user_query].
[user_query] is given by control.getInputQuery()
Finally, on your destination pages you would have javascript check for a query parameter in location.hash, and act appropriately.
I'm guessing this is way more work than you're interested in doing, but perhaps it will be helpful to someone.
I've never been able to figure this out!
Yeah I copy the java script in but what is the html code required and css??
Their website doesn't explain any of that (unless I am missing it!!)
If someone could please break it down for me I would be very grateful
Actually used this in a site before, this is what I have in my code:
In the header, assuming you have it installed in the /soundmanager2/ directory:
<script type="text/javascript" src="soundmanager2/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = 'soundmanager2/';
soundManager.useHTML5Audio = false;
soundManager.useFlashBlock = false;
soundManager.debugMode = false;
</script>
Then on each element you want to play a sound with on click, include this attribute:
onClick="soundManager.play('Name','path/to/filename.mp3')"
Or you can simply call soundManager.play wherever you want.
Granted it is not the easiest interface in the world in terms of copy and paste code and your good to go.
However all of the demos on there site have all the CSS / HTML you need to get started writting your own themes and templates.
There site is mor about the JS behind the scenes then the look of the interface.
http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ (as an example)
Although I am sure you were hoping for downloadable code I hope this at least gets you pointed in the right direction.
This is likely a very simple question with hopefully a simple answer. I'm using a CMS (TeamSite) and trying to add Google Analytics to a site. The problem is, as the CMS generates the HTML I can't add the Google Analytics code just before the closing </head> tag as Google tells you to. The other method of adding GA to your site is to add some JavaScript before the closing </body> tag. Now I have done this but TeamSite seems to put HTML comments around the JavaScript. Now without sounding like a complete fool, does this mean that the browser will ignore the JavaScript and not execute it? Code is below:
<script type="text/javascript"><!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try{
// --></script>
<script type="text/javascript"><!--
var pageTracker = _gat._getTracker("UA-20657322-12");
pageTracker._trackPageview();
} catch(err) {}
// --></script>
Is there another way for me to add GA to the site without having to take the file from the production server and manually add the script before the closing </head> tag? Any help would be much appreciated.
Thanks
If the HTML comment tags are inserted before and after your and tags, the Javascript will not run. If it is inside the script tag, everything should work fine.
See for yourself:
<html>
<head><title>test</title></head>
<body>
<script>
alert('not commented');
</script>
<!--
<script>
alert('outside commented');
</script>
-->
<script>
//<!--
alert('inside commented');
//-->
</script>
</body></html>
The first and third alert will fire, but the second one will not. Like the poster below me mentions, this has to do with backwards compatibility so older browsers that do not support Javascript don't get confused.
In a script block HTML comments are treated slightly differently. In a script block single line comment.
The reason for this is so that in really old browsers that don't know about script tags you could use this sort of markup and if it didn't understand script tags it would not render the javascript to page (because it thinks its in a comment) and if it does understand script tags it will just treat teh opening one as a single line comment and then the closing tag is normally marked as a commetn using the //.
So in summary these comment tags shouldn't be causing you a problem that I can see.
Is the script not being run on your page are are you just uncertain where your issue lies? Sticking an "alert('test');" into that block should allow you to confirm that it is being run.