I am trying to set non-clickable loading bar and everything looks good but I can still click on the button. You can see the same on plnkr.
https://plnkr.co/edit/4eh6ibG45JnLB6qYktxn?p=preview
I checked that both of the bellow div has attribute "pointer-events: none" but its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<style>
#loading-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 11002;
}
#loading-bar-spinner {
display: block;
position: fixed;
z-index: 11002;
top: 50%;
left: 50%;
margin-left: -15px;
margin-right: -15px;
}
</style>
<div ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<button ng-click="startLoading()">startLoading</button>
<button ng-click="completeLoading()">completeLoading</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script>
var LoadingBarExample = angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate'])
.config(function (cfpLoadingBarProvider) {
//cfpLoadingBarProvider.includeSpinner = false;
//cfpLoadingBarProvider.includeBar = false;
// //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Loading...</div>';
// //cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
// //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
});
LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.startLoading = function () {
cfpLoadingBar.start();
};
$scope.completeLoading = function () {
cfpLoadingBar.complete();
};
});
</script>
</body>
</html>
loading-bar
loading-bar-spinner
You can handle this with angularjs way, just add ng-disabled="loading" to make the button disabled and enabled based on the loading value
<button ng-disabled="loading" ng-click="startLoading()">startLoading</button>
<button ng-disabled="loading" ng-click="completeLoading()">completeLoading</button>
and controller as,
LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.loading = false;
$scope.startLoading = function () {
cfpLoadingBar.start();
$scope.loading =true;
};
$scope.completeLoading = function () {
cfpLoadingBar.complete();
$scope.loading =false;
};
});
DEMO
EDIT
If you want to disable the whole form with a single way, use fieldset instead of div and use ng-disabled
<fieldset ng-disabled="loading" ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<button ng-click="startLoading()">startLoading</button>
<button ng-click="completeLoading()">completeLoading</button>
</fieldset>
Related
I have created one AngularJs directive to clear the input field. I want the "close" icon to be placed inside the respective input element. But its going out of input field.
Here is the plnkr -
https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview
Note: Please check the plnkr preview by resizing it.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
display: inline-block
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</body>
</html>
As input tags are not container tag, you need to wrap input tag and close tag in a div.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
.wrap{position:relative;}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<div class="wrap">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
</div>
<br>
<div class="wrap">
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</div>
</body>
</html>
Change your .wrapper class like this:
.wrapper {
position: relative;
display: inline-block;
}
I'm making an HTML5 game using Tululoo.
I want to play the game in fullscreen. I used CSS to display the game in fullscreen. There is an image beneath the Tululoo game (div) where I want to display the score. I gave the scores an X and Y position, to be on top of the image.
When I activate fullscreen, the tululoogamewill be centered in the middle of the page. Now I want the score image to be placed beneath the game, and the scores to be placed at the exact same point on the image, as I did when the game was not in fullscreen and at the left top of the page. I can´t give an X and Y position to the scores, because of the difference in screen sizes.
How do I need to solve this?
Here's my HTML:
<html lang='en'>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var scoreteen = 0;
var scoremutant = 0;
var fullscreenteller = 0;
window.onload = function () {
document.getElementById('tululoogame').style.display = 'none';
document.getElementById('scoreteen').style.display = 'none';
document.getElementById('scoremutant').style.display = 'none';
}
function laatgamezien() {
document.getElementById('tululoogame').style.display = 'block';
document.getElementById('play').style.display = 'none';
document.getElementById('scoreteen').style.display = 'block';
document.getElementById('scoremutant').style.display = 'block';
}
function launchFullscreen(element) {
laatgamezien();
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function dumpFullscreen() {
console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}
document.addEventListener("fullscreenchange", function(e) {
console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
console.log("msfullscreenchange event! ", e);
});
function puntvoorteen(){
if (NaN === (scoreteen)) {
scoreteen = 0;
}
scoreteen++;
tekst = scoreteen;
document.getElementById("scoreteen").innerHTML = tekst;
}
function puntvoormutant(){
if (NaN === (scoremutant)) {
scoremutant = 0;
}
scoremutant++;
tekst = scoremutant;
document.getElementById("scoremutant").innerHTML = tekst;
}
</script>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='pragma' content='no-cache' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, height=device-height' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta charset='utf-8' />
</head>
<body style='background: black; margin: 0; padding: 0; overflow: hidden;'>
<div id="play">
<img src="afbeeldingen/playbutton.png" width="180" height="180" onclick="launchFullscreen(document.documentElement);" />
</div>
<div id='tululoogame'></div>
<img src="afbeeldingen/opzetscore.png" width="1024" height="98" id="scorepicture">
<div id="scoreteen"> </div>
<div id="scoremutant"> </div>
<script type='text/javascript' src='game.js'></script>
</body>
</html>
And here is my CSS:
#scoreteen {
position:absolute;
color:white;
left: 680px;
top: 670px;
font-size: 30px;
}
#scoremutant {
position:absolute;
color:white;
left: 320px;
top: 670px;
font-size: 30px;
}
#play {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#tululoogame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height: 100vh;
width: 100vw;*/
}
#scorepicture {
}
And some screenshots:
Game not in fullscreen
Game in fullscreen
I've been working with Google Maps for a while in my local development environment (I'm working on http://127.0.0.1:5000), but lately I'm getting this error:
Google has disabled use of the Maps API for this application. See the Terms of Service for more information: http://www.google.com/intl/en-US_US/help/terms_maps.html.
In my Google API Console I have created an Browser Key, and I've tried the following domains:
http://127.0.0.1/*
http://localhost/*
http://127.0.0.1:5000/*
http://0.0.0.0:5000/*
http://*:*/*
Obviously, not being about to see the map is making local development quite tricky. But I cannot figure out how to get around this. Can anyone point me at the correct configuration/approach to resolve this?
The documentation doesn't seem to talk about this sort of thing, which isn't helpful.
I got the same trouble, and the issue is to remove the key param in the adress as suggested by Mano Marks.
Just change
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
async defer></script>
to
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
Below is a full working code (HTML + JS)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<style>
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
I want to highlight a area like on the image below which is taken from Google Maps. Is this possible to accomplish with the current version of their API (v3)? If yes, how?
Thanks in advance.
You need to know the vertices of the area and create a polygon based on them.
But dashed strokes currently are not supported by polygons, if you require to have a dashed stroke you must create a sequence of polylines with different stroke-colors based on the vertices.
A built-in method to highlight an area currently doesn't exist.
You can automatically highlight an area with Google Maps Javascript API, here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Place ID Finder</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#ggg
{
position: absolute;
left:20%;
top:5%;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<div style="display: none">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
<strong>Place ID:</strong> <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.9989746, lng: 23.6413698},
zoom: 11
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.setFields(
['place_id', 'geometry', 'name', 'formatted_address']);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({map: map});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location,
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent = place.formatted_address;
infowindow.open(map, marker);
var frame = document.getElementById("map");
frame.innerHTML = '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:'.concat(place.place_id).concat('&key=XXXXXXX" allowfullscreen></iframe>');
frame.innerHTML += '<p id="ggg"><button type="button" onclick="location.reload()">Try again!</button></p>';
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX&libraries=places&callback=initMap" async defer></script>
</body>
</html>
You will need to replace API KEY with your API KEY. Try e.g."Nea Smyrni 171 21, Greece" in the input and then select the first drop down option and notice that it automatically highlights the area!
i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page...
initial state when i load the page
when i resize the browser, map is still sized at initial state size.
[Code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var point;
var mrktx;
function mshow()
{
$("#search_content").css("display","");
}
function mhide()
{
$("#search_content").css("display","none");
}
function load() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(ShowPosition)
}
else
{
alert("Browser does not support");
setTimeout( function(){ window.location = "../" },500);
}
function ShowPosition(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var cwidth = document.getElementsByTagName("body")[0].clientWidth;
var cheight = document.getElementsByTagName("body")[0].clientHeight;
//alert(cwidth + ',' + cheight);
$("#body").css("overflow","hidden");
$("#map_canvas").css("position","absolute");
$("#map_canvas").css("overflow","auto");
$("#map_canvas").css("height",cheight);
$("#map_canvas").css("width",cwidth);
$("#map_canvas").css("z-index","99")
$("#map_canvas").css("top","0");
$("#map_canvas").css("left","0em");
$("#top_nav").css("width",cwidth);
$("#top_nav").css("height","8%");
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$('document').resize(function(){
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
var myMrkrTxt = "";
var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });
var myMrkr = new google.maps.Marker({position:latlng,map:map});
google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); });
google.maps.event.trigger(map, "resize");
}
}
</script>
<style>
#top_nav
{
position: absolute; z-index: 200; top: 0px; background-color: black;
}
#top_nav h2
{
color: white;
}
body, html {
height: 100%;
width: 100%;
}
</style>
</head>
<body onload='load()'>
<div id="map_canvas"></div>
</body>
</html>
i guess you have to resize your map_canvas as well.
so just add this to your resize()
//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
$('#map_canvas').css("height",$(window).height());
$('#map_canvas').css("width",$(window).width());
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
so you have track of the resizing of your browserwindow :)
Same things can be done using only CSS too. I'll put an example below, use this if you like.
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe>
</div>