I am trying to add a custom control to my google map (v3): I want to have search box just near the other map controls. So I add a div with <input type="textbox"> on it, and it's being shown on the map. But the problem is that the textbox is inaccessible: I can't type anything inside it, or even focus on it.
function SearchBox() {
var searchTextBox = $('<input type="text" id="txtGeoSearch" />');
var div = $('<div class="geoSearchBox"></div>')
.append($('<span>Search:</span>'))
.append(searchTextBox);
return div.get(0);
}
// inside init()
geoMap.controls[google.maps.ControlPosition.TOP_LEFT].push(new SearchBox());
So what should I do to make my textbox behave like normal one?
Works for me: http://jsfiddle.net/cFpkt/
Related
I am trying to put conditions for displaying a hidden div. I want that after entering some value in 'name' textbox and if we click on search link then the hidden block should appear. But in my code, if we click on search link first then enter any value in textbox then also the hidden div is appearing. But I need that only after entering value in textbox , if we click on search then only hidden div should appear.
Iam using below code for hiding the div-
<div ng-show="name.length>0 && IsVisible">
and in script I am writing this code-
$scope.isVisible = false;
$scope.ShowHide = function () {
//If DIV is hidden it will be visible and vice versa.
$scope.IsVisible = true;
}
I have created a plunker here-
https://plnkr.co/edit/oVwZONrn4gtQs1BaiMbO?p=preview
Can any one help me how can I achieve this?
You should add a condition in the method ShowHide itself:
$scope.ShowHide = function () {
if($scope.name) {
//If DIV is hidden it will be visible and vice versa.
$scope.IsVisible = true;
}
}
If you wish the hidden section to be visible only when 'Search' is clicked, then make changes as per following in the HTML file:
<div ng-show="IsVisible">
Refer to the demo here
Check this plnkr. Added a watch on name change:
<input type="text" name="name" class="form-control" ng-change="resetShowHide()" ng-class="" ng-model="name" required/>
and if the name length is 0, reset is IsVisible
$scope.resetShowHide = function(){
if($scope.name.length) $scope.IsVisible = false;
}
I am using Angular UI's Google Maps directives.
I would like to use a text box for the user to enter a location and with auto-complete, load the location in the maps canvas when user selects from auto-complete drop down.
How would i go about doing that using these directives ?
Thanks
This feature is not supported yet and is under construction. Refer: https://github.com/nlaplante/angular-google-maps/issues/383
The auto-complete location is supported by Angular UI Google Maps directives
Here's your search textbox and map canvas.
<input id="pac-input" class="controls" type="text" placeholder="Search for a location" ng-model="model.searchAddress" />
<div ui-map="model.locationMap" ui-options="mapOptions" id="map_canvas" class="map"
style="height: 420px; width: 420px;" ui-event="{'map-click': 'setMarker($event, $params)'}"></div>
Here's JS code that you should put into controller associated with your map and search textbox. This code taps into Google Maps API,
var searchAddressInput = document.getElementById('pac-input');
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.5085011, -6.2154598), //south east corner
new google.maps.LatLng(53.5585011, -6.2654598) //north west corner
);
var mapOptions = {
center: new google.maps.LatLng(53.5085011, -6.2154598),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
bounds: mapBounds
};
var autocomplete = new google.maps.places.Autocomplete(searchAddressInput, mapOptions);
//set the bounds of autocomplete to map's current viewport
autocomplete.bindTo('bounds', $scope.model.locationMap);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
onPlaceChanged();
});
In the code above you are associating autocomplete object with your searchbox, then binding the onPlaceChanged() function to it, once one of the suggested locations is clicked.
This is the code that will be executed
function onPlaceChanged() {
var place = autocomplete.getPlace();
$scope.model.locationMap.panTo(place.geometry.location);
$scope.model.locationMap.setZoom(14);
//place pin on the map
marker.setPosition(new google.maps.LatLng(place.geometry.location.k, place.geometry.location.B));
}
That would be all. One more word of advice though. If you happen to be using an autocomplete for a Google Map in the modal window, you have to add this snippet into your CSS:
div.pac-container {
z-index: 1050 !important;
}
Bootstrap modal has a z-index of 900 something, so the autocomplete suggestions would appear behind it. You wouldn't get any JS errors, so it's not an ideal situation, cause you donn't know what the hell is going on. Changing z-index ensures that autocomplete suggestions are on the top.
On Google sites on edit mode, I have prepared a checkbox using Insert - HTML Box
and within the HTML Box the following code..
<style>
div{
width:100px;
height:30px;
}
</style>
<script>
function putResult(e) {
var ss = SpreadsheetApp.openById("0AkkxdNrvyzqzdE1yU21FRGJ6akJ6MmZiSVhTN0JMNnc");
var calc = ss.getSheetByName("Customer");
var chvalue = e.parameter.bike
calc.getRange("C3").setValue("chvalue");
}
</script>
<div>
EDC:
<input type="checkbox" id="bike" onclick="putResult(e)">
</div>
Now my requirements:
I want simply a True/False based on checkbox to be populated in the SS.Calc (C3) Sheet.
The page should automatically be refreshed each time the checkbox is clicked.
I am a novice and in learning stage. Please do shout if things are unclear.
PS:
I copied some code within GAS, that's where the e.parameter.bike comes from, don't know if that's the right way...
I have also inserted a chart in the Google sites with source data from spreadsheet (insert Chart), I want to make it dynamic using checkboxes.
Old but, since April 2018 they implemented a checkbox in spreadsheets.
You can find it in Menu > insert > checkbox or if you add a datavalidation.
Dealing with your Task by simply checking the field value with
=IF(A1=TRUE();"Checked";"Unchecked")
should be way more easy now! It also instantly checks state changes.
I think HTML Box is not accepting onclick , not sure but by inspecting the checkbox in firebug you can see that there is no onclick for the element.
I think you can do it using google app script as follows,
In code.gs file,
function doGet() {
return HtmlService.createHtmlOutputFromFile('Test').setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
and have file called Test.html.This can be created File --> New --> Script File, in that have the following code,
<style>
div{
width:100px;
height:30px;
}
</style>
<script>
function putResult() {
var ss = SpreadsheetApp.openById("0AkkxdNrvyzqzdE1yU21FRGJ6akJ6MmZiSVhTN0JMNnc");
var calc = ss.getSheetByName("Customer");
var chvalue = document.getElementById('bike').value;
calc.getRange("C3").setValue("chvalue");
}
</script>
<div>
EDC:
<input type="checkbox" id="bike" onclick="putResult()">
</div>
I haven't tested the above code.Try this if it works for you.
I want a textbox to be in focus when my webpage loads. If you go to google.com you can see the textbox is already in focus. That's what I want.
Heres my form:
<form id="searchthis" action="#" style="display:inline;" method="get">
<input id="namanyay-search-box" name="q" size="40" x-webkit-speech/>
<input id="namanyay-search-btn" value="Search" type="submit"/>
Give your text input the autofocus attribute. It has fairly good browser-support, though not perfect. We can polyfill this functionality rather easily; I've taken the liberty to write up an example below. Simply place this at the bottom of your document (so that when it's ran, the elements already exist), and it will find your autofocus element (note: you should have only one, otherwise you could get inconsistent results), and draw focus upon it.
(function () {
// Proceed only if new inputs don't have the autofocus property
if ( document.createElement("input").autofocus === undefined ) {
// Get a reference to all forms, and an index variable
var forms = document.forms, fIndex = -1;
// Begin cycling over all forms in the document
formloop: while ( ++fIndex < forms.length ) {
// Get a reference to all elements in form, and an index variable
var elements = forms[ fIndex ].elements, eIndex = -1;
// Begin cycling over all elements in collection
while ( ++eIndex < elements.length ) {
// Check for the autofocus attribute
if ( elements[ eIndex ].attributes["autofocus"] ) {
// If found, trigger focus
elements[ eIndex ].focus();
// Break out of outer loop
break formloop;
}
}
}
}
}());
After some initial testing, this appears to provide support all the way back to Internet Explorer 6, Firefox 3, and more.
Test in your browser of choice: http://jsfiddle.net/jonathansampson/qZHxv/show
The HTML5 solution of Jonathan Sampson is probably the best. If you use jQuery, steo's sample should work, too. To be complete, here you go plain JS solution for all browsers and IE10+
window.addEventListener("load",function() {
document.getElementById("namanyay-search-box").focus();
});
$(document).ready(function(){
..code..
$('.textbox-class-name').focus();
..code..
});
Or you can try it on $(window).load()
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.