rudrathegreat/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Translation Capabilities on Website

The code in this gist can be used to provide simple translation on your website. The translation itself uses Google Translate, as can be indicated in the translator.js code. Google Translate is definetely not perfect at translation, in fact it is far from it, however it does provide a simple way to translate your website.

  
## arrow.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              arrow.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Languages</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="google_translate_element" class="translator">
		<div class="custom-arrow">
			<img src="arrow.svg" alt="">
		</div>
	</div>
	<span>
		<script src="translator.js"></script>
		<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	</span>
	<p>Hello. My name is rudrathegreat. This is a basic sentence. This paragraph is going to be used for translation purposes. This paragraph will test how good online translation is on the internt. This website will use Google Translate to make it easier to translate this paragraph into a variety of languages, including Hindi, Chinese, French, Greek, etc. Hopefully this goes well</p>
</body>
</html>

## style.css
* {
	padding: 0;
	margin: 0;
}

 body {
 	background-color: #eee;
 	color: #333;
 	text-align: center;
 	font-family: Arial;
 	font-size:1.25em;
 	display:flex;
 	justify-content: center;
 	width: 80%;
 	margin-left:10%;
 	height:100vh;
 	flex-direction: column;
 	align-items: center;
 }

 body * {
 	margin:1.5vh 0;
 }

 .translator select {
 	border:none !important;
 	background:none !important;
 	color:white !important;
 	padding:1vh 2vw;
 	border-radius:0;
 	-webkit-appearance:none;
 	width:100%;
 	padding-left:5%:;
 }

 .translator {
 	position:relative;
 	background:#333;
 	margin:0 !important;
 	z-index: 1;
 	width:50%;
 }

 .translator .skiptranslate {
 	width:100%;
 	height:100%;
 	margin:0 !important;
 }

.translator .skiptranslate div {
	width: 100%;
	height:100%;
	margin: 0 !important;
}

.translator .custom-arrow {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:20%;
	background:#555;
	margin:0 !important;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.translator .custom-arrow img {
	width:50%;
	transform: rotate(90deg);
}

@media screen and (min-width: 900px) {
	.translator {
		width:15%;
	}
}

## translator.js
function googleTranslateElementInit() {
 new google.translate.TranslateElement(
            {pageLanguage: 'en'},
            'google_translate_element'
        );
if(typeof(document.querySelector) == 'function') {
    document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
    document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}

$('.goog-logo-link').css('display', 'none');
$('.goog-te-gadget').css('font-size', '0');
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Languages</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="google_translate_element" class="translator">
	<div class="custom-arrow">
	<img src="arrow.svg" alt="">
	</div>
	</div>
	<span>
	<script src="translator.js"></script>
	<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	</span>
	<p>Hello. My name is rudrathegreat. This is a basic sentence. This paragraph is going to be used for translation purposes. This paragraph will test how good online translation is on the internt. This website will use Google Translate to make it easier to translate this paragraph into a variety of languages, including Hindi, Chinese, French, Greek, etc. Hopefully this goes well</p>
	</body>
	</html>
	* {
	padding: 0;
	margin: 0;
	}

	body {
	background-color: #eee;
	color: #333;
	text-align: center;
	font-family: Arial;
	font-size:1.25em;
	display:flex;
	justify-content: center;
	width: 80%;
	margin-left:10%;
	height:100vh;
	flex-direction: column;
	align-items: center;
	}

	body * {
	margin:1.5vh 0;
	}

	.translator select {
	border:none !important;
	background:none !important;
	color:white !important;
	padding:1vh 2vw;
	border-radius:0;
	-webkit-appearance:none;
	width:100%;
	padding-left:5%:;
	}

	.translator {
	position:relative;
	background:#333;
	margin:0 !important;
	z-index: 1;
	width:50%;
	}

	.translator .skiptranslate {
	width:100%;
	height:100%;
	margin:0 !important;
	}

	.translator .skiptranslate div {
	width: 100%;
	height:100%;
	margin: 0 !important;
	}

	.translator .custom-arrow {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:20%;
	background:#555;
	margin:0 !important;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.translator .custom-arrow img {
	width:50%;
	transform: rotate(90deg);
	}

	@media screen and (min-width: 900px) {
	.translator {
	width:15%;
	}
	}
	function googleTranslateElementInit() {
	new google.translate.TranslateElement(
	{pageLanguage: 'en'},
	'google_translate_element'
	);
	if(typeof(document.querySelector) == 'function') {
	document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
	document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
	}

	$('.goog-logo-link').css('display', 'none');
	$('.goog-te-gadget').css('font-size', '0');
	}