I am now trying to add a Google Map Places Search Box on to my webpage. I'd like to add it on to a Bootstrap modals. I have successfully add the Box; however, the search result is hidden under the modal, as the picture shown below. I don't know how to fix this. Could anyone please give me some suggestion? Thanks.
Here is how I add the search box using javaScript:
function searchBoxInit(){
var input = /** #type {HTMLInputElement} */(document.getElementById('pac-input'));
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(/** #type {HTMLInputElement} */(input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
place = places[0];
newpName = place.name;
newpLat = place.geometry.location.lat();
newpLong = place.geometry.location.lng();
});
}
function displaySearchEngine(){
var objElement = document.getElementById('pac-input');
searchBoxInit();
objElement.style.display = 'block';
objElement.style.visibility = 'visible';
}
Bootstrap
http://getbootstrap.com/javascript/#modals
Places search box
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=zh-Tw
Add this style in your css
.pac-container {
background-color: #FFF;
z-index: 20;
position: fixed;
display: inline-block;
float: left;
}
original response: here
Related
I have a dropdown menu container that is styled using flexbox. I have a vertical pipe after each list item and want to remove the pipe from the last item before the line break so as to avoid the dangling "|".
Any css wizardry to make this happen?
Here is the staging site: https://myersbrierkelly.djykrmv8-liquidwebsites.com/
Click on "Practice Areas" and you will see it on the dropdown.
.navbar .dropdown-menu li:last-child::after {
content: '';
}
I ended up having to go the javascript route by comparing each list item's offset top and finding the break based on that and adding a class of wrapped.
var detectWrap = function(className) {
var wrappedItems = [];
var prevItem = {};
var currItem = {};
var items = document.getElementsByClassName(className);
for (var i = 0; i < items.length; i++) {
currItem = items[i].getBoundingClientRect();
if (prevItem && prevItem.top < currItem.top) {
wrappedItems.push(items[i]);
}
prevItem = currItem;
};
return wrappedItems;
}
window.onload = function(e){
var wrappedItems = detectWrap('menu-item-object-practice-area');
for (var k = 0; k < wrappedItems.length; k++) {
wrappedItems[k].className = "wrapped";
}
};
Use nth-child(n) to select specific child element where you don't want the vertical pipe, like this
.navbar .dropdown-menu li:nth-child(4)::after,
.navbar .dropdown-menu li:nth-child(7)::after,
.navbar .dropdown-menu li:nth-child(10)::after {
content: "";
}
The nth-child(n) selector selects the nth child element.
I'm building a html-app for Android and I have an issue with the :active css rule. It works like it should BUT when I hide an element that is ':active'. the state is never dismissed.
For example:
I have a button with this css:
.button:active { background-color:rgba(0,0,0,0.5); }
and this javascript:
$(".button").on("click",function(evt){
$(evt.originalEvent.target).css("display","none");
});
When I tap the button it is hidden. But when I un-hide it, it will still have the .button:active css rule applied.
Help?
Try the following
$(".button").on("click",function(evt){
$(evt.originalEvent.target).removeClass("active");/*Or whatever your class name is**/
$(evt.originalEvent.target).css("display","none");
});
I think I got it working with a MAJOR workaround (because event.target for touches returns the element the user tapped on which may very well be a childnode of the actual element that binds the events (see example below, it will return the [img] elem, not the [div]). Seufs.
PS: #Richa's answer did help me to do a workaround instead of hoping there would be a fix for :active
HTML (snippet)
<div class='button activatablel'><img src='someicon.png'></div>
CSS
.activatablel { /* nothing, just used to find the elements with jquery) */ }
.activatablel_active {
background:#f00;
}
JAVASCRIPT
elems = $(".activatablel");
for (var i in elems) {
var elem = elems[i];
elem.ontouchstart = function(evt) {
// Now we have to find the ACTUAL element that bound this event
// because somebody decided it's useful to not do this &$*((#^#))_
var foundTheActualTarget = false;
var thetarget = evt.target;
var whilenum = 0;
while (!foundTheActualTarget) {
if (thetarget.className) {
if (thetarget.className.indexOf("activatablel")>=0) {
foundTheActualTarget = true;
break;
}
}
thetarget = thetarget.parentNode;
whilenum++;
if (whilenum>256) { break; } // TODO: unless we intend to do this job in Reno, we're in Barney
}
if ($(thetarget).hasClass("activatablel_active")) { return; }
$(thetarget).addClass("activatablel_active");
}
elem.ontouchend = function(evt) {
$("*").removeClass("activatablel_active");
}
elem.ontouchcancel = elem.ontouchend;
}
I have been trying to create a Placemark that I can hide and show (like turning visibility on and off) on demand (on click)... I am using this to make the placemark:
function placemark(lat, long, name, url, iconsrc){
var placemark = ge.createPlacemark(name);
ge.getFeatures().appendChild(placemark);
placemark.setName(name);
// Create style map for placemark
var icon = ge.createIcon('');
if(iconsrc == "0")
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
else{
icon.setHref(iconsrc);
}
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
if(iconsrc != "0")
style.getIconStyle().setScale(2.5);
placemark.setStyleSelector(style);
// Create point
var point = ge.createPoint('');
point.setLatitude(lat);
point.setLongitude(long);
//point.setAltitudeMode(1500);
placemark.setGeometry(point);
google.earth.addEventListener(placemark, 'click', function(event) {
// Prevent the default balloon from popping up.
event.preventDefault();
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark); // optional
balloon.setContentString(
'<iframe src="'+ url +'" frameborder="0"></iframe>');
ge.setBalloon(balloon);
});
}
I have tried everything... from this:
function hidePlacemark(name){
var children = ge.getFeatures().getChildNodes();
for(var i = 0; i < children.getLength(); i++) {
var child = children.item(i);
if(child.getType() == 'KmlPlacemark') {
if(child.getId()== name)
child.setVisibility(false);
}
}
}
to using this ge.getFeatures().removeChild(child);
can anyone point me to the right direction on creating a function that will allow me to turn the visibility on/off on demand please.
Your hidePlacemark function is missing some {} in your final IF statement
if(child.getId()== name)
you have
function hidePlacemark(name){
var children = ge.getFeatures().getChildNodes();
for(var i = 0; i < children.getLength(); i++) {
var child = children.item(i);
if(child.getType() == 'KmlPlacemark') {
if(child.getId()== name)
child.setVisibility(false);
}
}
}
make it
function hidePlacemark(name){
var children = ge.getFeatures().getChildNodes();
for(var i = 0; i < children.getLength(); i++) {
var child = children.item(i);
if(child.getType() == 'KmlPlacemark') {
if(child.getId()== name) {
child.setVisibility(false);
}
}
}
}
HOWEVER ------- you are better off doing this as it is much faster as you don't need to loop through ALL your placemarks
function hidePlacemark(name) {
var placemark = ge.getElementById(name);
placemark.setVisibility(false);
}
I think the plain ge.getFeatures().removeChild(placemark); works.
I played with this GooglePlayground, and just added the following code to line 8 (that is empty in this GooglePlayground Sample):
addSampleButton('Hide Placemark', function(){
ge.getFeatures().removeChild(placemark);
});
Clicking the button Hide Placemark hides the placemark like a charm here. Any chances your problem is somewhere else in your code?
In an ASP.NET web app, I am trying to create and populate a UL based on user input. This is not a quick fill. User enters a couple of letters, clicks a button, and the server returns all records like the entry. If there is more than one match, an UL is created showing all of the matches.
I've tried to adapt this code from a plugin. I can step through it with the debugger and everything seems OK, but the UL is either not generated to the document or it is invisible.
Here is the simplified code:
function fillBusinessDropdown(ListOfBusinesses) {
var results = document.createElement("div");
var $results = $(results);
$results.hide().addClass("ac_results").css("position", "absolute");
if ($.browser.msie) {
$results.append(document.createElement('iframe'));
}
results.appendChild(businessToDom(ListOfBusinesses));
$results.css({
width: 400 + "px",
top: 100 + "px",
left: 150 + "px"
}).show();
function businessToDom(ListOfBusinesses) {
var ul = document.createElement("ul");
var iLen = ListOfBusinesses.length - 1
for (var i = 0; i <= iLen; i++) {
var row = ListOfBusinesses[i];
if (!row) continue;
var li = document.createElement("li");
// add the business name
li.innerHTML = row.Bu_name;
// add the business ID
li.selectValue = row.Bupk;
var extra = null;
if (row.length > 1) {
extra = [];
for (var j = 1; j < row.length; j++) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
ul.appendChild(li);
$(li).hover(
function() { $("li", ul).removeClass("ac_over");
$(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },
function() { $(this).removeClass("ac_over"); }
).click(function(e) { e.preventDefault(); e.stopPropagation(); selectItem(this) });
}
return ul;
}
I am stumped. Does any0oe have any ideas where I've gone wrong?
Thanks
Mike Thomas
Not sure what is wrong with that code but you are using a mixture of javascript and Jquery. I suggest use JQuery all the time instead. Use .appendTo() etc
I wonder if anyone can help. An HTML div in a page of mine contains a tree control which is shown or hidden depending upon a button pressed by a user. The button triggers an Ajax event which sets a variable on the server to show or hide the tree so that the state is persisted.
But here's the problem; when the tree is re-displayed, the icons for expanding / collapsing brances are not present. So far, I've not been able to work out why this is the case.
The tree is shown below: the first graphic shows the tree as it should be, the second shows it after it has been hidden and re-displayed.
alt text http://www.dcs.bbk.ac.uk/~martin/Tree_with_icons.png
alt text http://www.dcs.bbk.ac.uk/~martin/Tree_without_icons.png
The tree's HTML is built on the server as a list and each list item has a class reference to CSS as follows:
ul.tree li.liOpen .bullet {
background: url(myApp_Minus.png) center left no-repeat;
cursor: pointer;
}
ul.tree li.liClosed .bullet {
background: url(myApp_Plus.png) center left no-repeat;
cursor: pointer;
}
ul.tree li.liBullet .bullet {
background: url(myApp_Hyphen.png) center left no-repeat;
cursor: pointer;
}
Can anyone advise a method of showing the icons when the tree is re-displayed?
I've tried putting a link to the CSS file in the div, inline CSS elements and so on but without success.
Any help would be welcome.
I attach an extract of the tree's HTML at runtime:
<td align = "left">
<div id = "tree"><ul class = "tree" id = "navTree">
<li class = "liOpen">
<a href = "/myDataSharer/aboutConcept#communities">
<img alt = "Community" src = "/myDataSharer/images/myDataSharer_Community_Small.png">
</a> 
Martin
<ul>
<li class = "liOpen">
<a href = "/myDataSharer/aboutConcept#datasets">
<img alt = "Tabular dataset" src = "/myDataSharer/images/myDataSharer_TabularDataset_Small.png">
</a> 
Planets
</li>
<ul>
<li>
<a href = "/myDataSharer/aboutConcept#QAV">
<img alt = "Visualisation" src = "/myDataSharer/images/myDataSharer_Visualisation_Small.png">
</a> 
Test QAV
</li>
<li>
<a href
The tree itself is in a div called 'tree' which is updated from Javascript method as follows:
document.getElementById("tree").style.visibility = "visible";
document.getElementById("tree").innerHTML = str;
The Javascript for the tree is:
/* WRITTEN BY: Martin O'Shea for myDataSharerAlpha.
*
* This program has been inherited verbatim from the original author's sample code as mentioned
* below. No changes have been made other than a rename of a variable on line 121 from 'mktree' to 'tree'.
* ===================================================================
* Author: Matt Kruse <matt#mattkruse.com>
* WWW: http://www.mattkruse.com/
*
* NOTICE: You may use this code for any purpose, commercial or
* private, without any further permission from the author. You may
* remove this notice from your final code if you wish, however it is
* appreciated by the author if at least my web site address is kept.
*
* You may *NOT* re-distribute this code in any way except through its
* use. That means, you can include it in your product, or your web
* site, or any other form where the code is actually being used. You
* may not put the plain javascript up on your site for download or
* include it in your javascript libraries for download.
* If you wish to share this code with others, please just point them
* to the URL instead.
* Please DO NOT link directly to my .js files from your site. Copy
* the files to your server and use them there. Thank you.
* =====================================================================
* HISTORY
* ------------------------------------------------------------------
* December 9, 2003: Added script to the Javascript Toolbox
* December 10, 2003: Added the preProcessTrees variable to allow user
* to turn off automatic conversion of UL's onLoad
* March 1, 2004: Changed it so if a <li> has a class already attached
* to it, that class won't be erased when initialized. This allows
* you to set the state of the tree when painting the page simply
* by setting some <li>'s class name as being "liOpen" (see example)
*
* This code is inspired by and extended from Stuart Langridge's aqlist code:
* http://www.kryogenix.org/code/browser/aqlists/
* Stuart Langridge, November 2002
* sil#kryogenix.org
* Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/)
* and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)
*/
// Automatically attach a listener to the window onload, to convert the trees
addEvent(window,"load",convertTrees);
// Utility function to add an event listener
function addEvent(o,e,f){
if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
else { return false; }
}
// utility function to set a global variable if it is not already set
function setDefault(name,val) {
if (typeof(window[name])=="undefined" || window[name]==null) {
window[name]=val;
}
}
// Full expands a tree with a given ID
function expandTree(treeId) {
var ul = document.getElementById(treeId);
if (ul == null) { return false; }
expandCollapseList(ul,nodeOpenClass);
}
// Fully collapses a tree with a given ID
function collapseTree(treeId) {
var ul = document.getElementById(treeId);
if (ul == null) { return false; }
expandCollapseList(ul,nodeClosedClass);
}
// Expands enough nodes to expose an LI with a given ID
function expandToItem(treeId,itemId) {
var ul = document.getElementById(treeId);
if (ul == null) { return false; }
var ret = expandCollapseList(ul,nodeOpenClass,itemId);
if (ret) {
var o = document.getElementById(itemId);
if (o.scrollIntoView) {
o.scrollIntoView(false);
}
}
}
// Performs 3 functions:
// a) Expand all nodes
// b) Collapse all nodes
// c) Expand all nodes to reach a certain ID
function expandCollapseList(ul,cName,itemId) {
if (!ul.childNodes || ul.childNodes.length==0) { return false; }
// Iterate LIs
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
var item = ul.childNodes[itemi];
if (itemId!=null && item.id==itemId) { return true; }
if (item.nodeName == "LI") {
// Iterate things in this LI
var subLists = false;
for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
var sitem = item.childNodes[sitemi];
if (sitem.nodeName=="UL") {
subLists = true;
var ret = expandCollapseList(sitem,cName,itemId);
if (itemId!=null && ret) {
item.className=cName;
return true;
}
}
}
if (subLists && itemId==null) {
item.className = cName;
}
}
}
}
// Search the document for UL elements with the correct CLASS name, then process them
function convertTrees() {
setDefault("treeClass","tree");
setDefault("nodeClosedClass","liClosed");
setDefault("nodeOpenClass","liOpen");
setDefault("nodeBulletClass","liBullet");
setDefault("nodeLinkClass","bullet");
setDefault("preProcessTrees",true);
if (preProcessTrees) {
if (!document.createElement) { return; } // Without createElement, we can't do anything
uls = document.getElementsByTagName("ul");
for (var uli=0;uli<uls.length;uli++) {
var ul=uls[uli];
if (ul.nodeName=="UL" && ul.className==treeClass) {
processList(ul);
}
}
}
}
// Process a UL tag and all its children, to convert to a tree
function processList(ul) {
if (!ul.childNodes || ul.childNodes.length==0) { return; }
// Iterate LIs
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
var item = ul.childNodes[itemi];
if (item.nodeName == "LI") {
// Iterate things in this LI
var subLists = false;
for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
var sitem = item.childNodes[sitemi];
if (sitem.nodeName=="UL") {
subLists = true;
processList(sitem);
}
}
var s= document.createElement("SPAN");
var t= '\u00A0'; //
s.className = nodeLinkClass;
if (subLists) {
// This LI has UL's in it, so it's a +/- node
if (item.className==null || item.className=="") {
item.className = nodeClosedClass;
}
// If it's just text, make the text work as the link also
if (item.firstChild.nodeName=="#text") {
t = t+item.firstChild.nodeValue;
item.removeChild(item.firstChild);
}
s.onclick = function () {
this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
return false;
}
}
else {
// No sublists, so it's just a bullet node
item.className = nodeBulletClass;
s.onclick = function () { return false; }
}
s.appendChild(document.createTextNode(t));
item.insertBefore(s,item.firstChild);
}
}
}
Thanks.
The Ajax of the web page is shown below:
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla / Safari.
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE.
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatePage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getQueryStr());
}
function getQueryStr() {
queryStr = "action=toggleTree";
return queryStr;
}
function updatePage(str) {
if (str == "false") {
// Hide tree buttons and tree.
document.getElementById("tree").style.visibility = "hidden";
document.getElementById("expColTreeButtons").style.visibility = "hidden";
}
else {
// Show tree buttons.
document.getElementById("expColTreeButtons").style.visibility = "visible";
// Show tree.
document.getElementById("tree").style.visibility = "visible";
document.getElementById("tree").innerHTML = str;
}
}
function toggleTree() {
// Make call to server to toggle tree.
document.getElementById("tree").innerHTML = "<img src='/myDataSharer/images/myDataSharer_Wait.gif' alt='Growing tree' />"
xmlhttpPost("/myDataSharer/toggleTree");
}
The Ajax above is triggered from a form which has three buttons. The 'Show / hide' button sees to things; the other two of the buttons are also enclosed within a div but they are alright.
<form>
<input class = "treeButton" type="submit" value="Show / hide" onClick = "toggleTree(); return false;">
<div id = "expColTreeButtons">
<input class = "treeButton" type="submit" value="Expand all" onClick = "expandTree('navTree'); return false;">
<br />
<input class = "treeButton" type="submit" value="Collapse all" onClick = "collapseTree('navTree'); return false;">
<br />
</div>
</form>
Your CSS looks fine ad like something that could produce the example on the left, so it must be the HTML or the JavaScript that does the showing and hiding. How does the JavaScript work?
It's not likely a CSS problem, since it's working the first time. I'd bet the problem lies in how your server is generating content - i.e. not assigning the proper attributes to each node.
This question has now resolved. Thanks those who contributed.
The solution was to re-process the Javascript tree after the div had been updated.