Fix cross-browser support for language select

This fixes cross-browser support for the language select box by replacing it with a custom menu box.
Swader · Oct 28, 2014 · dc7afcb · dc7afcb
1 parent b512153
commit dc7afcb
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 25 deletions.
diff --git a/css/main.css b/css/main.css
@@ -69,18 +69,49 @@ div#header {
 	margin-left: 20px;
 }
 
-.select-wrap {
-	display: inline-block;
+.customSelect {
+	height: 20px;
+}
+
+span.customSelectOptions {
+	margin: 0;
+	width: 80px;
+}
+
+.customSelectOptions > ul {
+	max-height: 20px;
+	width: 80px;
 	overflow: hidden;
+	-webkit-transition: max-height 1s;
+	transition: max-height 1s;
+	padding: 0;
+	margin: 0;
+	bottom: 0;
+	position: absolute;
+	right: 0;
+}
+
+.customSelectOptions > ul:hover {
+	max-height: 400px;
+}
+
+.customSelectOptions > ul > li {
+	padding: 0 0 3px 0;
+	list-style-type: none;
 	height: 20px;
 }
 
-select.menuBtn {
-	color: #666;
-	border: none;
-	cursor: pointer;
-	margin: -1px -20px 0 0;
-	background: transparent;
+.customSelectOptions > ul > li:last-child {
+	padding: 0;
+}
+
+.customSelectOptions > ul > li:hover {
+	text-decoration: underline;
+}
+
+.customSelectOptions > ul > li:first-child:hover {
+	cursor: default;
+	text-decoration: none;
 }
 
 .menu span:hover {

diff --git a/index.html b/index.html
@@ -72,7 +72,7 @@
 	<script type='text/javascript'>
 		var oldIE = false;
 	</script>
-	<!-- [if lt IE 9]> 
+	<!--[if lt IE 9]> 
 		<script type="text/javascript">oldIE = true;</script> 
 	<![endif]-->
 

diff --git a/lang/langs.js b/lang/langs.js
@@ -1,14 +1,13 @@
 var langs = {
-	'en':'english',
-	'fr':'français',
-	'de':'deutsch',
 	'cn':'简体中文',
+	'de':'deutsch',
+	'en':'english',
 	'es': 'español',
-	'uk':'українська',
-	//'jp':'日本語',
+	'fr':'français',
+	'kr':'한국어',
+	'pl':'polski',
 	'ru':'русский',
 	'sv':'svenska',
-	'pl':'polski',
 	'tr':'türkçe',
-	'kr':'한국어'
+	'uk':'українська'
 };
diff --git a/script/engine.js b/script/engine.js
@@ -116,17 +116,25 @@
 				.appendTo('body');
 
 			if(typeof langs != 'undefined'){
-				var selectWrap = $('<span>')
-					.addClass('select-wrap')
-					.appendTo(menu);
-				var select = $('<select>')
+				var customSelect = $('<span>')
+					.addClass('customSelect')
 					.addClass('menuBtn')
-					.append($('<option>').text("language."))
-					.change(Engine.switchLanguage)
-					.appendTo(selectWrap);
+					.appendTo(menu);
+				var options = $('<span>')
+					.addClass('customSelectOptions')
+					.appendTo(customSelect);
+				var optionsList = $('<ul>')
+					.appendTo(options);
+				$('<li>')
+					.text("language.")
+					.appendTo(optionsList);
 
 				$.each(langs, function(name,display){
-					$('<option>').text(display).val(name).appendTo(select)
+					$('<li>')
+						.text(display)
+						.attr('data-language', name)
+						.on("click", function() { Engine.switchLanguage(this); })
+						.appendTo(optionsList);
 				});
 			}
 
@@ -660,7 +668,7 @@
 		},
 
 		switchLanguage: function(dom){
-			var lang = $(this).val();
+			var lang = $(dom).data("language");
 			if(document.location.href.search(/[\?\&]lang=[a-z]+/) != -1){
 				document.location.href = document.location.href.replace( /([\?\&]lang=)([a-z]+)/gi , "$1"+lang );
 			}else{