There's this box that I can get to go away under my maps. I have a main map for my index and another map for show. I have the map options different for both of them. When I look at my page source I see my scripts for both maps. I can't figure out why this is happening.
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.auto_adjust = true;
Gmaps.map.initialize();
Gmaps.map.markers = [{"description":"test, 217 cleveland ave , liverpool, This is some additional information.","lat":43.1155,"lng":-76.2292},{"description":"bah, 215 university place, syracuse, ","lat":43.0396,"lng":-76.1355}];
Gmaps.map.markers_conf.do_clustering = true;
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.8&sensor=false&libraries=geometry&language=&hl=®ion="></script>
`<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.auto_adjust = true;
Gmaps.map.map_options.auto_zoom = false;
Gmaps.map.map_options.zoom = 10;
Gmaps.map.map_options.detect_location = true;
Gmaps.map.map_options.center_on_user = false;
Gmaps.map.initialize();
Gmaps.map.markers = [{"description":"test, 217 cleveland ave , liverpool, This is some additional information.","lat":43.1155,"lng":-76.2292},{"description":"bah, 215 university place, syracuse, ","lat":43.0396,"lng":-76.1355}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>`
I fixed it by making .map_container twice as small as the map height. My map height is 400px and my map container height is 200px. I still don't know why that would happen.
Related
I'm looking for a best way to Diff two Observables.
Filtered values from ObservableA should be emited as soon as ObservableB completes without waiting for ObservableA to complete.
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.0/Rx.js"></script>
<script>
const observable_a = Rx.Observable.interval(2000).take(10);//0,1,2,3,4,5,6,7,8,9
const observable_b = Rx.Observable.interval(1000).map(x=>x+3).take(5);//3,4,5,6,7
someDiffObservable(observable_a,observable_b).subscribe(console.log);//should output 0,1,2,8,9
</script>
</head>
<body></body>
</html>
Try this:
const a$ = Rx.Observable.interval(2000).take(10).share();
const b$ = Rx.Observable.interval(1000).map(x=>x+3).take(5);
Rx.Observable.combineLatest(
a$.buffer(
b$.startWith(null).last().concat(a$)
),
b$.toArray(),
(aItems, bItems) => aItems.filter(a => !bItems.includes(a))
)
.concatMap(filteredItems => Rx.Observable.from(filteredItems))
.subscribe(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
Currently i've came up with following function to diff two observables.
Is there a simpler/faster/better way to achieve this?
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.0/Rx.js"></script>
<script>
const observable_a = Rx.Observable.interval(2000).take(10);//0,1,2,3,4,5,6,7,8,9
const observable_b = Rx.Observable.interval(1000).map(x=>x+3).take(5);//3,4,5,6,7
function observableDiff(a,b,filter) {
if(!filter) {
filter = (value_to_check,blacklist_array)=>{
return blacklist_array.indexOf(value_to_check)===-1;
};
}
return Rx.Observable.create(observer=>{
let a_values = [];
let b_values = [];
let a_completed = false;
let b_completed = false;
a.forEach(a_value=>{
if(b_completed) {
if(filter(a_value,b_values)) {
observer.next(a_value);
}
} else {
a_values.push(a_value);
}
}).then(()=>{
a_completed = true;
if(b_completed) {
observer.complete();
}
});
b.forEach(b_value=>{
b_values.push(b_value);
}).then(()=>{
b_completed = true;
a_values.forEach(a_value=>{
if(filter(a_value,b_values)) {
observer.next(a_value);
}
});
a_values = [];
if(a_completed) {
observer.complete();
}
});
});
}
observableDiff(observable_a,observable_b).subscribe(console.log);//0,1,2,8,9
</script>
</head>
<body></body>
</html>
Want to create autogenerate code in angular inputbox on refresh page
like rand(function) in php. Im using this script for this. But problem
is its vanished on page refresh not working properly.
<script type="text/javascript">
function randString(x){
var s = "OL-";
while(s.length<x&&x>0){
var r = Math.random();
s+= (r<0.1?Math.floor(r*100):String.fromCharCode(Math.floor(r*26) + (r>0.5?97:65)));
}
return s;
}
document.getElementById("referal_code").value = randString(10);
</script>
<input required type='text' class='span2' id='referal_code' ng-model='empInfo.referal_code'>
Try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getNewID() {
try {
var myDate = new Date();
var varID = myDate.getHours() + "" + myDate.getMinutes() + "" + myDate.getSeconds() + "" + myDate.getMilliseconds();
if (varID.Length > 15) {
varID = varID.substr(0, 15);
}
return varID;
} catch (e) {
console.log(e.message);
}
}
function randString(x){
var s = getNewID();
return s;
}
window.onload = function(){
document.getElementById("referal_code").value = randString(10);
}
</script>
</head>
<body>
<input required type='text' class='span2' id='referal_code' ng-model='empInfo.referal_code'>
</body>
</html>
For any attribute in angular world you can use interpolation like this:
<input id="{{randString(10)}}"/>
If you want to have a certain value as id and not get lost after refresh you have to save it on some web storage (localstorage, sessionstorage).
e.g. :
function randString(x){
// ... your function's logic
//Save it in localStorage before returning it
localStorage.inputId = s;
return s;
}
document.getElementById("referal_code").value = localStorage.inputId || randString(10)
Example from Bing map V8 official documentation. By default infobox is given false but inspite its displaying for the first time.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
<script type="text/javascript">
var map, clusterLayer, infobox;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Bing Map Key'
});
//Add an infobox to the map.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
infobox.setMap(map);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
//Create a clustering layer
clusterLayer = new Microsoft.Maps.ClusterLayer(createCustomPushpins(100), {
clusteredPinCallback: createCustomClusterPushpins,
callback: createPushpinList
});
map.layers.insert(clusterLayer);
});
}
function createCustomPushpins(size) {
//Generate random pushpins within the map bounds.
var pins = Microsoft.Maps.TestDataGenerator.getPushpins(size, map.getBounds());
for (var i = 0; i < size; i++) {
//Create a title for each pushpin.
pins[i].setOptions({ title: 'Pushpin #' + i });
//Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
}
return pins;
}
function createCustomClusterPushpins(cluster) {
//Create a title for the cluster.
cluster.setOptions({
title: 'Cluster of ' + cluster.containedPushpins.length + ' pins'
});
//Add handler for the cluster click event.
Microsoft.Maps.Events.addHandler(cluster, 'click', pushpinClicked);
}
function pushpinClicked(e) {
//Show an infobox when a pushpin is clicked.
showInfobox(e.target);
}
function createPushpinList() {
//Create a list of displayed pushpins each time clustering layer updates.
if (clusterLayer != null) {
infobox.setOptions({ visible: false });
//Get all pushpins that are currently displayed.
var data = clusterLayer.getDisplayedPushpins();
var output = [];
//Create a list of links for each pushpin that opens up the infobox for it.
for (var i = 0; i < data.length; i++) {
output.push("<a href='javascript:void(0);' onclick='showInfoboxByGridKey(", data[i].gridKey, ");'>");
output.push(data[i].getTitle(), "</a><br/>");
}
document.getElementById('listOfPins').innerHTML = output.join('');
}
}
function showInfoboxByGridKey(gridKey) {
//Look up the cluster or pushpin by gridKey.
var clusterPin = clusterLayer.getClusterPushpinByGridKey(gridKey);
//Show an infobox for the cluster or pushpin.
showInfobox(clusterPin);
}
function showInfobox(pin) {
var description = [];
//Check to see if the pushpin is a cluster.
if (pin.containedPushpins) {
//Create a list of all pushpins that are in the cluster.
description.push('<div style="max-height:75px;overflow-y:auto;"><ul>');
for (var i = 0; i < pin.containedPushpins.length; i++) {
description.push('<li>', pin.containedPushpins[i].getTitle(), '</li>');
}
description.push('</ul></div>');
}
//Display an infobox for the pushpin.
infobox.setOptions({
title: pin.getTitle(),
location: pin.getLocation(),
description: description.join(''),
visible: true
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative; width:600px; height:400px;"></div>
<br />
<div id="listOfPins" style="max-height:250px;width:250px;overflow-y:scroll;"></div>
</body>
</html>
As per official documentation, we have to pass visible false while instantiating the infobox object (infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });) Any suggestions where I am going wrong?
Strange, just tried the code provided in IE11, Edge, Chrome and Firefox. It worked correctly in all browsers other than Chrome. Not sure why Chrome is acting differently. Will have the team look into this. Thanks for reporting.
I am fairly new to AngularJS, i am trying to generate .csv files from an Array using ng-csv.
Now i have tried everything but the files are not generated, i even tried the most simple example i could see on the internet.
I do not see any errors in the error console but still no files are generated.
I am working under windows with XAMPP.
<!DOCTYPE html>
<html ng-app="APP">
<head>
<meta charset="UTF-8">
<title>angular-count-to example</title>
<style type="text/css">
.element{cursor:pointer;float:left;background-color:#ccc;padding:4px;}
</style>
</head>
<body ng-controller="ExampleController">
<p>{{data}}</p>
<button type="button" ng-csv="data" filename="test.csv">Export</button>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/ng-csv/src/ng-csv/ng-csv.js"></script>
<script>
angular.module('APP',["ngSanitize","ngCsv"]).
controller('ExampleController', function ($scope) {
$scope.filename = "test";
$scope.data = [{a: 1, b:2}, {a:3, b:4}];
});
</script>
</body>
</html>
Above is the simplest example i tried, however even this is not working.
Try out a pure HTML5 Solution. This was a code block i did a while ago. Try customizing for yourself by excluding useless paramaters
function (JSONData, ReportTitle, ShowLabel, reportType, reportName) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
angular.forEach(arrData, function (data, index) {
if (data.date != undefined)
data.date = dateFormat(data.date)
});
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
row += index + ';';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
//var temp = arrData[i][index].toString().replace('.', ',');
//arrData[i][index] = temp;
row += '"' + arrData[i][index] + '";';
}
row = row.split('.').join(",");
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g, "_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
It looks like you are linking to the wrong ng-csv.js. The ng-csv.js file in the bower_components/ng-csv/src/ng-csv/ folder doesn't contain all of the code, you need to use the build version. Try this:
<script type="text/javascript" src="bower_components/ng-csv/build/ng-csv.js"></script>
How can I horizontally expand a combobox pull-down display?
My actual data is: ARAMEX1234
But the pull-down display only shows: ARAMEX123
I need to support the following browsers: IE 6, 7, 8.
I tested it using Firefox and it works out of the box. However, my application will be run on IE and never on FF.
Here is the code (jsp file content):
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
This is a well-known bug in IE. You can fix it by temporarily resizing the select input on mouseover or on focus as described in the following article: Select Cuts Off Options In IE (Fix)
In your specific example, the code might look like this:
$("#rowed5 select").live({
focus: function () {
$(this).
data("origWidth", $(this).css("width")).
css("width", "auto");
},
blur: function () {
var $this = $(this);
$this.css("width", $this.data("origWidth"));
}
});