ADD animation on get position

This commit is contained in:
Krivchikov Dmitry 2016-05-12 00:44:51 +03:00
parent 41654e500f
commit 7ac9048aa8
2 changed files with 6 additions and 1 deletions

View File

@ -74,6 +74,7 @@ body.openBox div#control {right: 250px;}
div#control div {background-color: rgba(10, 10, 10, 0.8); border-radius: 8px 0 0 8px; width: auto; padding: 10px; margin-left: 10px; margin-bottom: 8px; cursor: pointer;} div#control div {background-color: rgba(10, 10, 10, 0.8); border-radius: 8px 0 0 8px; width: auto; padding: 10px; margin-left: 10px; margin-bottom: 8px; cursor: pointer;}
div#control div:before {cursor: pointer;} div#control div:before {cursor: pointer;}
div#control div:hover {background-color: #000;} div#control div:hover {background-color: #000;}
div#control div.inProgress {animation: blink 3s 0s infinite;}
div#control div.active {background-color: rgb(255, 162, 0)!important;} div#control div.active {background-color: rgb(255, 162, 0)!important;}
div#control div.important {background-color: rgba(0, 145, 90, 0.8);} div#control div.important {background-color: rgba(0, 145, 90, 0.8);}
div#control div.big {font-size: 22px; padding: 14px; margin-left: 0;} div#control div.big {font-size: 22px; padding: 14px; margin-left: 0;}
@ -83,6 +84,7 @@ div#control div._b {border-radius: 0 0 0 8px;}
div#control div.space {height: 10px; background-color: transparent; padding: 0;} div#control div.space {height: 10px; background-color: transparent; padding: 0;}
div#control div._t2 {background-color: rgba(200, 200, 200, 0.65); border-radius: 8px 0 0 0;border-bottom: solid 1px #ddd; margin-bottom: 0;} div#control div._t2 {background-color: rgba(200, 200, 200, 0.65); border-radius: 8px 0 0 0;border-bottom: solid 1px #ddd; margin-bottom: 0;}
div#control div#notify {position: absolute; background-color: red;color: white;border-radius: 50%; width: 20px;height: 20px;margin: 0;padding: 0;padding-top: 2px;text-align: center;font-weight: bolder;font-size: 15px;vertical-align: middle;font-family: sans-serif;top: 18px;left: -7px;} div#control div#notify {position: absolute; background-color: red;color: white;border-radius: 50%; width: 20px;height: 20px;margin: 0;padding: 0;padding-top: 2px;text-align: center;font-weight: bolder;font-size: 15px;vertical-align: middle;font-family: sans-serif;top: 18px;left: -7px;}
@keyframes blink {0 { background-color: rgba(10, 10, 10, 0.8); } 70% { background-color: rgb(0, 162, 255); } 100% { background-color: rgba(10, 10, 10, 0.8);}}
nav.navbar.navbar-inverse.navbar-fixed-top {opacity: 0.9} nav.navbar.navbar-inverse.navbar-fixed-top {opacity: 0.9}
nav.navbar.navbar-inverse.navbar-fixed-top:hover {opacity: 1} nav.navbar.navbar-inverse.navbar-fixed-top:hover {opacity: 1}

View File

@ -14,10 +14,11 @@ function showMeOnTheMap() {
geolocationFailure, geolocationFailure,
{ {
enableHighAccuracy: true, enableHighAccuracy: true,
timeout: 5000, timeout: 20000,
maximumAge: 60000 maximumAge: 60000
} }
); );
$('#showMeOnTheMap').addClass('inProgress');
} }
else { else {
alert('Error'); alert('Error');
@ -25,6 +26,7 @@ function showMeOnTheMap() {
} }
function geolocationSuccess(pos) { function geolocationSuccess(pos) {
$('#showMeOnTheMap').removeClass('inProgress');
coords = [pos.coords.latitude, pos.coords.longitude]; coords = [pos.coords.latitude, pos.coords.longitude];
$.cookie('userLat',pos.coords.latitude); $.cookie('userLat',pos.coords.latitude);
$.cookie('userLng',pos.coords.longitude); $.cookie('userLng',pos.coords.longitude);
@ -34,6 +36,7 @@ function geolocationSuccess(pos) {
} }
function geolocationFailure(positionError) { function geolocationFailure(positionError) {
$('#showMeOnTheMap').removeClass('inProgress');
if(positionError.code == 1) { if(positionError.code == 1) {
text = "Вы решили не предоставлять данные о своем местоположении, " + text = "Вы решили не предоставлять данные о своем местоположении, " +
"но это не проблема. Мы больше не будем запрашивать их у вас."; "но это не проблема. Мы больше не будем запрашивать их у вас.";