I am trying to create a visual studio extension. This extension gives the user an input form and calls the api when user hits submit button.
But the api is not getting hit in the form action method
Below is extension.js file
// #ts-nocheck
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
const fs = require('fs');
const path = require('path');
const { parentPort } = require('worker_threads');
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "Unit Test Generator" is now active!');
let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () {
vscode.window.showInformationMessage('Unit Test Generator is now active!');
createInputFormWebView();
});
context.subscriptions.push(disposable);
}
function createInputFormWebView()
{
const panel = vscode.window.createWebviewPanel(
'This webview will be used for taking user input for the type of test cases', // Identifies the type of the webview. Used internally
'Unit Test Generator', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
);
const htmlFormContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Input</title>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #1b78cc;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #527ba1;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class = "container">
<form enctype="multipart/form-data" action="http://localhost:35637" method="post" id="getUserInput">
<label for="testFramework">Test Framework</label><br>
<input type="radio" id="testFramework" name="test_framework" value="MSTest">
<label for="testFramework">MSTest</label><br>
<input type="radio" id="testFramework" name="test_framework" value="XUnit">
<label for="testFramework">XUnit</label><br>
<label for="projectName">Project Name:</label><br>
<input type="text" id="projectName" name="projectName"><br>
<label for="namespace">Namespace:</label><br>
<input type="text" id="namespace" name="namespace"><br>
<label for="testClassName">Test Class Name:</label><br>
<input type="text" id="testClassName" name="testClassName"><br>
<label for="testMethodName">Test Method Name:</label><br>
<input type="text" id="testMethodName" name="testMethodName"><br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" /><br>
Choose file to upload: <input name="uploadedfile" type="file" /><br>
<input type="submit" value="Generate Unit Tests" />
</form>
</div>
</body>
</html>`;
panel.webview.html = htmlFormContent;
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
This thing is working correctly in fiddler but not in extension.
I have WebView Options I have set enableScripts and enableForms to true. Is there anything else which needs to be set or there is problem with some other part of the code.
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
Any pointers would be helpful.
Related
We would like to have a website search bar form and a Google Driving Directions form on the same page.
Today we added a search bar to every page on MinnesotaSeasons.com, over 5,000 pages. It works on every page except 480 "Destination" pages that already have a driving directions form. Adding CSS positioning for "form" puts one form on top of the other. The Website does NOT use PHP - at least, those three letters do not appear together anywhere in the code.
The search bar is a must, but we would hate to lose the driving directions. The problem results can be seen here on the top right corner of the page:
http://www.minnesotaseasons.com/Destinations/Afton_State_Park.html
Here is the code on "Destinations" pages - no CSS used:
<td class="tableNote"><form action="http://maps.google.com/maps" method="get" target="_blank">
<p>Get driving directions from Google Maps to this destination from any address, and send those directions to your phone.</p>
<p>
<label for="mapsUsSaddr"><strong>Your Address</strong> (street address and either city and state or ZIP code)</label>
</p>
<p>
<input type="text" class="text" name="saddr" id="mapsUsSaddr" value="" placeholder="Your Address" />
</p>
<p>
<input type="submit" class="clickDirections" value="Click Here for Directions" />
<input type="hidden" name="daddr" value="N45 2.898, W93 10.384" />
<input type="hidden" name="hl" value="en" />
</p>
</form></td>
Here is the search bar code on all pages:
<form role="search" id="form">
<input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
<button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'minnesotaseasons.com';
function submitted(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>
Here is the CSS for the search bar:
form {
position: absolute;
top: 75px;
left: 680px;
z-index: 200;
background-color: #4654e1;
width: 250px;
height: 30px;
display:flex;
flex-direction:row;
align-items:center;
}
input {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
button {
all: unset;
cursor: pointer;
width: 44px;
height: 44px;
}
When I make request I get this.
I want the html to load and the run the scripts to create the full body before I parse it.
I working with flutter(dart).
I tried using the webview but I'm not getting the html from after the page is loaded.
When I make the request to the site, this is what the response looks like.
I need some help guys.
How should I go about it?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Just a moment...</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
color: #000000;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.7em;
-webkit-font-smoothing: antialiased;
}
h1 {
text-align: center;
font-weight: 700;
margin: 16px 0;
font-size: 32px;
color: #000000;
line-height: 1.25;
}
p {
font-size: 20px;
font-weight: 400;
margin: 8px 0;
}
p,
.attribution,
{
text-align: center;
}
#spinner {
margin: 0 auto 30px auto;
display: block;
}
.attribution {
margin-top: 32px;
}
#keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#-webkit-keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#cf-bubbles>.bubbles {
animation: fader 1.6s infinite;
}
#cf-bubbles>.bubbles:nth-child(2) {
animation-delay: .2s;
}
#cf-bubbles>.bubbles:nth-child(3) {
animation-delay: .4s;
}
.bubbles {
background-color: #f58220;
width: 20px;
height: 20px;
margin: 2px;
border-radius: 100%;
display: inline-block;
}
a {
color: #2c7cb0;
text-decoration: none;
-moz-transition: color 0.15s ease;
-o-transition: color 0.15s ease;
-webkit-transition: color 0.15s ease;
transition: color 0.15s ease;
}
a:hover {
color: #f4a15d
}
.attribution {
font-size: 16px;
line-height: 1.5;
}
.ray_id {
display: block;
margin-top: 8px;
}
#cf-wrapper #challenge-form {
padding-top: 25px;
padding-bottom: 25px;
}
#cf-hcaptcha-container {
text-align: center;
}
#cf-hcaptcha-container iframe {
display: inline-block;
}
</style>
<meta http-equiv="refresh" content="35">
<script type="text/javascript">
//<![CDATA[
(function(){
window._cf_chl_opt={
cvId: "2",
cType: "non-interactive",
cNounce: "86849",
cRay: "6a97b753b854da86",
cHash: "31c7b92e6efc7fe",
cPMDTk: "",
cFPWv: "b",
cTTimeMs: "1000",
cRq: {
ru: "aHR0cHM6Ly9nZy5jby51ay9yYWNpbmcvMjctb2N0LTIwMjEvZmFrZW5oYW0tMTI1NQ==",
ra: "UG9zdG1hblJ1bnRpbWUvNy4yOC40",
rm: "R0VU",
d: "kPxE7HAIMaSY0+Q26IXxpuTBsg9MYQ7J/ICHGaynkKTojWIXlwrmVPwT+F9kXDNE8Jc60RxAMi3ET5lG3UfaNS8h7kz8aJbykZ4EwheY/kJcnVBvvndt9WGhXuDvU0FOh9cZ9SAgRuYgtmkn+hRxxi5owt/uhRmgg5MfZWETvbbMY/jCMrFpPhenjJFusWE1eM0Uz1E7p5hOK/W9P9wDRmC4A8f4z9PTWHMJY6EjsHR5GNEOZzHvWUd5uKRmIbQxylvGKD8smzOR1mUYrI+hlAUB8U6wptxbbpDZDcxkEYk7M/bp4oIkQrJNBkPvVGmnVcBvZN2QrSJdUIVFNA9kjKh4AfzpxPMkfqhoJIXOhMQK+lr1R7T3wHf/qRMpzvgN5HD8wSySaGq+ZMUraHmms1bvI3p25Ril83l3CvfGA573nzB0Pl9wBt1Ilj+et9TonO/yCPUT9ncqu/HsuK6zoTsYs1XO9emsj8iGHyH20tEDL/QIQu0Xm+Na2nREmz4LLYNg/y/S/IlGc8LjDv548dVWGJxGuPSzeDWod49nzqXZR6u4otbfcHIIMdEgPjTa",
t: "MTYzNjEzMjQ0Mi4yMDcwMDA=",
m: "UHh8TWbrY8rIVckQYr2DEHf3xtqOy3IWbHpurhKo0Dg=",
i1: "bPb8laPvucq92fuTb8UHJQ==",
i2: "uyNfsEipqDYhS6+qFdYUkA==",
zh: "C039uzYEN6IwJDV7FwZVYsBSveHeK850qjEkkfVJ6vw=",
uh: "q2fUGDQwB25BKEmSOHJOj1NUZxjS6q3TVwtPqObOVZM=",
hh: "nfF1CEMggKTkMnWiuwyIjIi54NW2HaYcu4gV2CdK4ks=",
}
}
window._cf_chl_enter = function(){window._cf_chl_opt.p=1};
})();
//]]>
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="20">
<tr>
<td align="center" valign="middle">
<div class="cf-browser-verification cf-im-under-attack">
<noscript>
<h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on and reload the
page.</h1>
</noscript>
<div id="cf-content" style="display:none">
<div id="cf-bubbles">
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
<h1><span data-translate="checking_browser">Checking your browser before accessing</span>
gg.co.uk.</h1>
<div id="no-cookie-warning" class="cookie-warning" data-translate="turn_on_cookies"
style="display:none">
<p data-translate="turn_on_cookies" style="color:#bd2426;">Please enable Cookies and reload
the page.</p>
</div>
<p data-translate="process_is_automatic">This process is automatic. Your browser will redirect
to your requested content shortly.</p>
<p data-translate="allow_5_secs" id="cf-spinner-allow-5-secs">Please allow up to 5
seconds…</p>
<p data-translate="redirecting" id="cf-spinner-redirecting" style="display:none">
Redirecting…</p>
</div>
<form class="challenge-form" id="challenge-form"
action="/racing/27-oct-2021/fakenham-1255?__cf_chl_jschl_tk__=I4acmyvWUrWbLXAGjYC5HXUh31EzMntIEES9DIs8Yg8-1636132442-0-gaNycGzNBmU"
method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="md" value="WYgGQTwD0.PlAYN7zN9M7XpYgnUJxpt6W_rYCboneoQ-1636132442-0-AfDISHvT2GBIpWp1EPYu9cdxCuFQpLT_u7UKTH9TL-mj0X8Xxw9raGV2KUlDtB4DX7Z3h-LYRsfmLlNmrV-WstInbyHg2H3gWXOuMU2mnguq0TdSnDmB0MWffohG7RydsDYePGxxBYBAXhJMAYyRLWlbcprMPKCaHVm9zAxWf5tZFgYfCLP-CLdoXXS_HuKNhA0iXqanK-LYFcSJXKuvTr0M7oAx-vhljyX8JW3sJ2sgJlV7vLLB9MPl3l7WgWBZ4q0bW8KKVhNi3WXReGdIZUpIirNA6D2xHAe5oyfDMqUfEyopDE2EFGeNxKb2yI0qPvmmaup4WjHIG0DangljT0VcnK8oR2-lz7tVreiQQS50DcnX_EiDswWlbfXDvz83RI3IDOmSjBJXQZBSClMjhkCPs9yf5wOGXtq2jjd2sIFFWgw3zS5Q0n9dsTfFCNSFRGtOtHmCM2ztI8ivbpfvf27CNK55Xb7b2BPCOICarJUqM16ELz7AAQ6lS0OJymzCU0G1eC58DDvCiMCx6AC7nAI2ce38OjfjYHO5Wq_lI8u8VFrGaS4nZyySvn6-0gGqRA" />
<input type="hidden" name="r" value="i7Mahy4asxjhgyvRAVdQk8RCAO5shxagJMSNb2vkdXM-1636132442-0-Acl9elCj95M0xGc183cGdekXyIhJ+RXABhl9YAfeIxJZd5a0u4EX8e1wb7wJdeYsBwO/e42SiuMP3O5t3PoeEibaVnEIPnLgipqmvVXoSiOuK302AlzY5JmI0Xy80sRBsoyWLglYAEPZft7cFoS+XK3ayn3GMqgoQpnf8nhjeVmOx6g1v25gqwGYoz6MdvE/7Z2GAwvCnqP2Bk7fjp7gBBQ1pWSgzCEP2jXsbYuqcBE7HHlNbMyJF1tqOIAd1Hm7S8KtAQUllGHNfJy7s/L6Ibvg55SCP8XHUlAqASeMvqbJors5HimAx+iZgpjfYhetytGpQTqh8m7BlVyZBUkvVl6HA3r0eR0OSVOOUf/8BmuYTMrZKqkElg+BY4sNTy0UqLeuyLH5RS3zMLdNDx75IkGexDVPx2KXBxPwdmPhVO2jmoJdSl+ocBTzfPqjsXw+XAyo9Sm5id7TZ/Z+xxXYA2RMCpBiGBXPdfu2U+CJI4/S/6TWfmunwpMwRIfEby1fQNmvNCJWJPIybXpZR0tOH/eln7CoeR8qaSrCUjP7H5fNSgiIi/gtH2oxm3D20y5T4Hd1EGEtKf0E1pLUGSeZY8LBsIMtvPlnXr5srsz4965+WZu87RK9w8filse+9rtIT6KM55QcgIE7Cvb4yfI74x7y+uJ0bjUoc8D3ke5GjK4isNsMlh0kxgY9gVJmzxReZ9n9ahT77FOcOJh8eQEQOCPZQ8J9DqUduOkH7775AvPseKj1CPb3+++EJvoaZGdNIfYvUV6PjMAsnthNOaCKDQ8oHiYZLW8A8YxF2AUrQxMBGjeIjvv8OCAkFwk4RhX/JSqNXgWE+mj6x+ySSNFtBJp7cOEdB27Teyx11ImRvTXBZdv09XFIgYRO7WYmI/1sB/qfn65uL1Pr0chh5mCX8FgX1r/CRw/IkvJhLpDPNxq0MiXJK/gUuZK7URNCQI3ep+Dv+7lyuvi9sQgkXl2ne8fSp8Nbh3MogLWFAYx0o7Jz1iZY4Vtryw87I+e6Ditw9eklqURwEiSE7yIJ5foZGLZwClJs9W1pfpZ2G2OIU8HBvN/O4ERCqT2nLRVJH513AUzPv9DpowCMUxANLCAIvJL9XmSbVeUBvUQmdpOK+grZlgFRx6d8/kKepJStd8iuN/P9SGFPmOGKQHmECFiu70JPk4QCS3J08BjhuIpC4uvfLNmAzQi1yYEOpwSfv1XPf4DLS/GO59qg/jbgu0UZyRBQDL/KE4wOiE8Dtw7ACjkUtaON1NDgOS5nKkUu0diqIIRvreQdLCy4ehjuvG7LuWPPdrEmU4ZYS3R+IPHNBEBbak2pszPGm8Xc0GtVWldmtAeRr+sN0K8JeRPIbORtPuhwMPpGGosCiPmqxHshlyS0qPB0kYsykHvjDXzI63E3EccRyo353ByRSLe0wcz0k32Ku4I7uDGN/YmQEcggLEVsShXXUFA+FOgQzuM6PE9o+NPgke/M1mJBIuyyOrBtQFNskIgXQA0jPVVpJz84OeR3ylkTsVDGOvnhj5nYPEk27gDxHVoYc2C6Omi/FwRaZcGQrBrTxCTejlnmEnGTUd+M"/>
<input type="hidden" value="3734809bfba8e7119ff4a9e747f0a631" id="jschl-vc" name="jschl_vc"/>
<!-- <input type="hidden" value="" id="jschl-vc" name="jschl_vc"/> -->
<input type="hidden" name="pass" value="1636132443.207-qh8v/uVVqU"/>
<input type="hidden" id="jschl-answer" name="jschl_answer"/>
</form>
<script type="text/javascript">
//<![CDATA[
(function(){
var a = document.getElementById('cf-content');
a.style.display = 'block';
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
var trkjs = isIE ? new Image() : document.createElement('img');
trkjs.setAttribute("src", "/cdn-cgi/images/trace/jschal/js/transparent.gif?ray=6a97b753b854da86");
trkjs.id = "trk_jschal_js";
trkjs.setAttribute("alt", "");
document.body.appendChild(trkjs);
var cpo=document.createElement('script');
cpo.type='text/javascript';
cpo.src="/cdn-cgi/challenge-platform/h/b/orchestrate/jsch/v1?ray=6a97b753b854da86";
document.getElementsByTagName('head')[0].appendChild(cpo);
}());
//]]>
</script>
<div id="trk_jschal_nojs"
style="background-image:url('/cdn-cgi/images/trace/jschal/nojs/transparent.gif?ray=6a97b753b854da86')">
</div>
</div>
<div class="attribution">
DDoS protection by <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing/"
target="_blank">Cloudflare</a>
<br />
<span class="ray_id">Ray ID: <code>6a97b753b854da86</code></span>
</div>
</td>
</tr>
</table>
</body>
</html>
try to move <script> at the top of your app
I used the flutter WebView and it worked.
I wrote the full js script in a file.
The script does the parsing and returns the required data as json.
So I pass the script file content to my WebView controller's evaluateJavaScript and the result will be json. So I can just take that data and work with it.
// webview's controller
WebViewController? _controller;
// setup your webview and get the controller
WebView(
initialUrl: widget.url ?? 'https://www.google.com.tr',
onWebViewCreated: (controller) => _controller = controller,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onPageFinished: (_) => readJS(),
);
//
void readJS() async {
String js = await fileReader.readFile("lib/js/main.js"); // read script file
String data = await _controller!.evaluateJavascript(js);
print("data\n$data");
}
check out the full code here
I am attempting to use a <div> overlay but I am unable to call the overlay from within a function using Microsoft Edge (Chromium version). The overlay works fine with Firefox.
Here's the link to a fiddle which will illustrate my dilemma: https://jsfiddle.net/utd0z7qk/
First, open the link using Firefox then click on the "Check for Errors" button. You will see an alert box appear with the message "Check Point". Note, in the background you will also see that an overlay has been invoked with the message "Loading...".
Next, open the same link using Microsoft Edge and click on the "Check for Errors" button. Again, you will see an alert box appear with the message "Check Point.. However, note the overlay has not been invoked and there is no message in the background.
Why not?
I make extensive use of <div> overlays for messaging purposes, particularly when I am anticipating a noticeable delay in the response from a remote source (e.g. database, web service, REST API, etc). Is there a suitable work-around for this behavior with Microsoft Edge?
Edited to include code:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
alert("Check Point");
ovly.style.display = "none";
}
.overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,1.00); /* White background with opacity */
/* background-color: white;
opacity: 1.00; */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
overflow-y: auto;
}
<html>
<head>
<body>
<center>
<h5>Overlay Messaging Demo</h5>
<br />
<br />
<button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
</center>
<!-- Spinner Overlay -->
<div id="overlaySpinner" class="overlay" style="text-align:center;">
<div class="text-center" style="height:65%"></div>
<div class="text-center" style="height:5%">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
<span id="msgSpinner"></span>
</div>
</div>
</body>
</head>
</html>
Any assistance is greatly appreciated.
I've tested and the problem also happens in Google Chrome:
Basically, you need to give it time to do the reflow/redraw.
A simple setTimeout is enough to test.
Something like changing this:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
alert("Check Point");
ovly.style.display = "none";
}
Into this:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
setTimeout(function(){
alert("Check Point");
ovly.style.display = "none";
}, 2000);
}
And the "Loading ..." should show:
(By the way, remember that Microsoft Edge now runs on Blink, just like Google Chrome)
You can try this on the StackSnippet below:
function errorCheck(elem) {
var ovly = document.getElementById("overlaySpinner");
var msg = document.getElementById("msgSpinner");
msg.innerHtml = "CHECKING FOR ERRORS";
ovly.style.display = "block";
setTimeout(function(){
alert("Check Point");
ovly.style.display = "none";
}, 2000);
}
.overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,1.00); /* White background with opacity */
/* background-color: white;
opacity: 1.00; */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
overflow-y: auto;
}
<html>
<head>
<body>
<center>
<h5>Overlay Messaging Demo</h5>
<br />
<br />
<button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
</center>
<!-- Spinner Overlay -->
<div id="overlaySpinner" class="overlay" style="text-align:center;">
<div class="text-center" style="height:45%"></div>
<div class="text-center" style="height:5%">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
<span id="msgSpinner"></span>
</div>
</div>
</body>
</head>
</html>
I'm currently trying to develop a web form that uses HTML so that users can visit this webpage and drag and drop thousands of photos. After providing an email address, these photos would be directly sent to one of our Google Drive accounts inside a subfolder of the user's email address and the time of submission.
I've played around with this code, but nowhere did I find a place for me to connect my Google Drive account.
<body>
<div id="formcontainer">
<label for="myForm">Facilities Project Database Attachment Uploader:</label>
<br><br>
<form id="myForm">
<label for="myForm">Project Details:</label>
<div>
<input type="text" name="zone" placeholder="Zone:">
</div>
<div>
<input type="text" name="building" placeholder="Building(s):">
</div>
<div>
<input type="text" name="propertyAddress" placeholder="Property Address:">
</div>
<div>
<label for="fileText">Project Description:</label>
<TEXTAREA name="projectDescription"
placeholder="Describe your attachment(s) here:"
style ="width:400px; height:200px;"
></TEXTAREA>
</div>
<br>
<label for="attachType">Choose Attachment Type:</label>
<br>
<select name="attachType">
<option value="Pictures Only">Picture(s)</option>
<option value="Proposals Only">Proposal(s)</option>
<option value="Pictures & Proposals">All</option>
</select>
<br>
<label for="myFile">Upload Attachment(s):</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="button" value="Submit" onclick="iteratorFileUpload()">
</form>
</div>
<div id="output"></div>
<div id="progressbar">
<div class="progress-label"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;
// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
var allFiles = document.getElementById('myFile').files;
if (allFiles.length == 0) {
alert('No file selected!');
} else {
//Show Progress Bar
numUploads.total = allFiles.length;
$('#progressbar').progressbar({
value : false
});//.append("<div class='caption'>37%</div>");
$(".progress-label").html('Preparing files for upload');
// Send each file at a time
for (var i = 0; i < allFiles.length; i++) {
console.log(i);
sendFileToDrive(allFiles[i]);
}
}
}
function sendFileToDrive(file) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Something';
google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
}
reader.readAsDataURL(file);
}
function updateProgressbar( idUpdate ){
console.log('Received: ' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total)*100);
$("#progressbar").progressbar({value: porc });
$(".progress-label").text(numUploads.done +'/'+ numUploads.total);
if( numUploads.done == numUploads.total ){
//uploadsFinished();
numUploads.done = 0;
};
}
</script>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
body {
max-width: 400px;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 100%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
#progressbar{
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.progress-label {
float: left;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
width: 100%;
height: 100%;
position: absolute;
vertical-align: middle;
}
</style>
</body>
Source: Uploading Multiple Files to Google Drive with Google App Script
I wanna add a color asterix in my form's placeholder, is it possible?
Here is pure css solution IE10+
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 10px;
font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 25px;
font-size: 25px;
left: 10px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}
<form novalidate>
<div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Email <span>*</span>
</div>
</div>
<input type="submit">
</form>
At first glance it doesn't seem possible, but it may be a good alternative to create your own fake spanholder element:
<div class="holder">Email Address <span class="red">*</span></div>
<input id="input" size="18" type="text" />
Fiddle
As far as I know, this is not possible.
One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs
Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.
Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/
HTML
<form>
<div class="field">
<label class="placeholder" for="email">
Email Address
<span class="red">*</span>
</label>
<input id="email" type="text" />
</div>
</form>
CSS
.field {
position: relative;
height: 30px;
width: 200px;
}
input, label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
top: 0;
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 5px;
line-height: 30px;
}
JS
$('.field input')
.on( 'focus', function () {
$(this).siblings('label').hide();
} )
.on( 'blur', function () {
if ( !$(this).val() )
$(this).siblings('label').show();
} );
You can try the following :
HTML
<div class="hold">
<input type="text" placeholder="" required="required">
<span class="req_placeholder">Name <span>*</span></span>
</div>
CSS
.hold {
position: relative;
}
input[required="required"]:valid + .req_placeholder {
display: none;
}
.req_placeholder {
position: absolute;
top: 2px;
left: 2px;
}
.req_placeholder span {
color: red;
}
I found a jQuery plugin that might suit you, the pholder plugin.
If you look the demo, the placholder of the "Name" field is red.
There may be other plugins or maybe you can edit it. :)
This is a good case for pseudo-elements.
.someclass {
position:relative;
}
.someclass:after {
position:absolute;
top:0;
right:10px;
content: "*";
color:#ff0000
}
...adjust to your own layout.
You can use pseudo elements in CSS (not supported in old browsers)
.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #ff0000;
}
<form>
<p>
<label for="input1">Input 1:</label>
<input type="text" id="input1" placeholder="Fill input" class="mandatory" />
</p>
<p>
<label for="input2">Input 2:</label>
<input type="text" id="input2" placeholder="Fill input" />
</p>
<p>
<label for="textarea">Input 2:</label>
<textarea id="textarea" placeholder="Fill textarea"></textarea>
</p>
</form>