dialog is open by module on page.
html code:
<!DOCTYPE html>
<!--
#license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<dialog id="dialog">
<form method="dialog">
<input type="text" id="google">
</form>
</dialog>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places"
defer
></script>
</body>
</html>
and in js file, I created the google autocomplete and focus on the input field in the dialog.
js code:
let autocomplete;
const addressDialog = document.querySelector("#dialog");
const addressGoogleField = document.querySelector("#google");
addressDialog.showModal();
function fillInAddress() {
const place = autocomplete.getPlace();
console.log(place);
}
function initMap() {
autocomplete = new google.maps.places.Autocomplete(addressGoogleField, {
fields:["geometry"],
types:["geocode"]
});
addressGoogleField.focus();
autocomplete.addListener("place_changed", fillInAddress);
}
window.initMap = initMap;
results:
Google Places Autocomplete Box is behind the modal dialog.
I want to put autocomplete box in front of the dialog. What should I do?
This may be a z-index issue. The Google Place Autocomplete box ("pac-container" css class) is appended at the end of the body element, and not within your modal dialog.
To ensure the autocomplete box is above your modal dialog div. You can try and update your css with :
.pac-container {
z-index: 10000;
}
The 10000 z-index is just a value high enough to be above the modal z-index.
Related
I am trying to implement interactive pages with Google Apps Script. I've successfully opened a document in the UI sidebar, but the dimensions of the sidebar make it difficult to use:
How can the embedded sidebar page be made more attractive / easier to use?
My Google doc is here : https://docs.google.com/document/d/17AtHwUSQdci-lh7BDvXeELcpZdXr27AryHlfagRR4Hg/edit
Gode.gs
var TITLE = 'Sidebar Title';
//Here is the code.gs code:
function onOpen() {
var ui = DocumentApp.getUi();
ui.createMenu('==Sidebar==')
.addItem('Show Document','SideBar3')
.addToUi();
};
function SideBar3()
{
var ui = HtmlService.createHtmlOutputFromFile('ModeLessDialog').setTitle('Handler Communications');
ui.setWidth(800)
DocumentApp.getUi().showSidebar(ui);
}
//Here is the HTML file. I called it ModeLessDialog.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<iframe src="https://docs.google.com/document/d/1yb7knN941rdS-6okHQu_ZkvkgIaqXUIMioSAru9fzK4/" height="1000" width="90%"></iframe>
</body>
</html>
You can no longer change the sidebar width in Google addons. The UI had the setWidth() method earlier but it is now deprecated.
In Google Docs and Forms, sidebars now ignore the setWidth() method; they cannot be changed from the default width of 300px.
See release notes mentioning this change.
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
i have a link in place, which opens a popup window that gives you instructions on how to add this page to your bookmarks. Now i also want the link to fire a conversion in adwords when it gets clicked. For that i have a script from google which i tried ti combine with the existing link, but i think i did something wrong since no conversion gets fired in my test. Please help me here:
<html>
<head>
</head>
<body>
<a id="bookmarkme" href="#" rel="sidebar" onClick="goog_report_conversion" title="bookmark this page">Bookmark this page!</a>
<!-- Google Code for People who added website to their bookmarks Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = XXXXXXXX;
w.google_conversion_label = "COldCKSHnl8Q2cu9ywM";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
window.google_is_call = true;
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript">
$(function() {
$("#bookmarkme").click(function() {
// Mozilla Firefox Bookmark
if ('sidebar' in window && 'addPanel' in window.sidebar) {
window.sidebar.addPanel(location.href,document.title,"");
} else if( /*#cc_on!#*/false) { // IE Favorite
window.external.AddFavorite(location.href,document.title);
} else { // webkit - safari/chrome
alert('Please press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D in order to add this page to your bookmarks, you can also use your browsers bookmark menu to do that.');
}
});
});
</script>
</body>
</html>
Setting up an onclick handler for conversions
First, make sure you selected Click instead of Page load from the "Tracking event" section of the "Advanced tag settings" in Part I of the instructions above. Your conversion tag should look like something this:
<!-- Google Code for Add to Cart Conversion Page
In your html page, add the snippet and call goog_report_conversion
when someone clicks on the chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 12345678;
w.google_conversion_label = "abcDeFGHIJklmN0PQ";
w.google_conversion_value = 13.00;
w.google_conversion_currency = "USD";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
Now that you (or the person in charge of your website) have the conversion tracking tag, you're ready to paste. Here's how:
Go to the page on your website that shows the clickable button or link. Then open up the HTML code so you can edit it.
Find the body tags (<body></body>) of the page, then paste the code snippet you generated in AdWords between those two tags.
Adjust the HTML code to add the onclick handler. The particular onclick command you use will depend on how the link or button is displayed on your site: text link, image, or button.
Here's some sample code close up:
HTML before conversion tracking code (Sample only. Don't use in your website's code.)
<html>
<head>
<title>Sample HTML File</title>
</head>
<body>
This is the body of your web page.
</body>
</html>
Use the following command if the link is shown as:
a text link
<body>
<!-- Below is a sample link for a file download.
You need to replace the URL for the file and the
DOWNLOAD NOW text with the text you want to hyperlink. -->
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
</body>
</html>
an image
<!-- Below is a sample image for a file download.
Replace download_button.gif with your
button image and the document URL with your file's URL. -->
<body>
<img src="download_button.gif" alt="Download Whitepaper"
width="32" height="32"
onClick="goog_report_conversion
('http://www..pdf')"/>
</body>
</html>
For the tracking to work, you'll need to make sure you include both the tag and the appropriate onclick tags from one of the examples above. This tells AdWords to record a conversion only when a customer clicks on a chosen link or button.
Alright, it works the following way:
<a onclick="goog_report_conversion
('')" id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark this page!</a>
I'm coding a Windows 8 application in JavaScript and HTML5. I wish to show a dialog box when clicking a button.
I have specified the event handler in the default.js file like so:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().done(function () {
// Get the login button on the home page
var login_button = document.getElementById("login_submit");
// Set an event handler on the login button
login_button.addEventListener("click", UserActionLogin, false);
}));
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function UserActionLogin(mouseEvent) {
var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
}
app.start();
})();
My HTML markup is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- HelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div class="login_box">
<form method="post">
<input type="text" name="login_username" />
<input type="password" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</form>
</div>
</div>
</body>
</html>
When I click the login_submit button when the application loads, it shows the dialog box just fine.
But when I click it for a second time it doesn't work, it's like it's forgotten about the Event Handler.
The problem is having the element in there, which you don't need in an app because you won't want to have the submit button repost/reload the page with the form contents. You're effectively reloading the page but the activated handler isn't called in that case (the page is loaded as a post rather than a request), so you lose the event handler.
If you delete the element, then it works just fine. I'm also told that if you use type="button" instead of type="submit" then it should work. But in an app, you'll typically collect the data from the controls and save that in other variables, navigating to another "page" in the app using the WInJS navigation and page control mechanisms, which keeps you on default.html without changing script context.
Also, I notice that you're still referring to the RC version of WinJS. Since Win8 is officially released now, be sure to develop against the released version of the system and using the most recent tools.
The problem is your use of the form element, which is causing your HTML to be reloaded when you click the button - this replaces the element you set up the event handler for, meaning that subsequent clicks don't invoke your handler function.
Remove the form element and you will get the behavior you expect, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App7</title>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<div id="wrapper">
<div class="login_box">
<input type="text" name="login_username" />
<input type="password" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</div>
</div>
</body>
</html>
If you really need the form element for some reason (perhaps because you are using a JS library which expects it), then you can prevent the problem by stopping the form being submitted in your event handler function, as follows:
function UserActionLogin(mouseEvent) {
var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
mouseEvent.preventDefault();
}
The call to preventDefault stops the form being posted but allows you to keep the form element in the document.