I've had problems like this before in the past. I can't seem to figure out what on earth I seem to be doing wrong here.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#rightSideContent {
width:48%;
height:100%;
float:right;
margin-left:10px;
position: relative;
}
span.explain_pass {
background:#111111;
color:#b4b4b4;
position: absolute;
top:-150px;
left:-17px;
padding:10px;
width:200px;
opacity: 0.9;
border-radius:5px;
}
span.explain_pass:after {
content: ' ';
position: absolute;
left:50%;
transform:translate(-50%);
bottom:-19px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #111111;
}
div#content {
width:100%;
margin: 300px;
}
</style>
<script type="text/javascript">
var showHint = {
timeOut : null,
hint : function(obj) {
clearTimeout(showHint.timeOut);
showHint.timeOut = null;
var explain_pass = document.createElement("span");
explain_pass.setAttribute("id","explain_pass");
explain_pass.classList.add("explain_pass");
explain_pass.textContent = obj.dataset.title;
if(!document.getElementById('explain_pass')) {
document.getElementById('rightSideContent').appendChild(explain_pass);
}
if(showHint.timeOut == null) {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseleave',function() {
console.log(showHint.timeOut);
showHint.timeOut = setTimeout(function(){
try{
document.getElementById('rightSideContent').removeChild(document.getElementById('explain_pass'));
}
catch(e) {}
},3000);
} );
}
}
}
window.onload = function() {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseenter',function(){
showHint.hint(this);
});
}
</script>
</head>
<body>
<div id="content">
<div id="rightSideContent">
<label for="password" class="inputColumn">Password <span
class="required">*</span> <span class="questionMark" data-title="Must
contain at least 2 characters long including lowercase characters,
uppercase characters, and numbers"><svg width="20" fill="#333333"
height="20" xmlns="http://www.w3.org/2000/svg" style="pointer-
event:none;" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043
248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248
248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353
12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122
17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698
32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941
216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-
28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-
102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-
20.636 46-46c0-25.365-20.635-46-46-46z"/></svg></span> <input
name="password" class="passRestrict" id="password" type="password"
placeholder="Password" maxlength="255" autocomplete="off" /> <span
class="showHidePass">show</span></label>
</div>
<div>
</body>
</html>
I clear the timeout at the begining of the hint script, but the timeout still runs and ends up removing the hint box, even though my mouse hasn't left the object that I was hovering over. Any tips and help would be greatly appreciated.
Thanks,
Jon W
Related
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'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 have the following directive:
import Vue from 'vue'
const Dialog = Vue.extend({
template: `
<div v-if="show" class="modal">
<div class="modal-body">
<div class="modal-header"><h3>Aktion bestätigen</h3></div>
<div class="modal-content">
<div class="uk-flex">
<div class="uk-margin-small-right">
<span uk-icon="icon: question; ratio: 3"></span>
</div>
<div>
Are You sure?
</div>
</div>
<hr>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmed">Yes</button>
<button class="uk-button uk-button-default" #click="show = false">Cancel</button>
</div>
</div>
</div>
</div>
`
});
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({data: data}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
This works fine. When I click on "Cancel", the modal closes. When I click "Yes", the method defined in Vue template
<button v-confirm="delete">delete</button>
is executed.
But the modal does not appear. How to tell the modal to close after the method has been executed, and maybe show an error message, when there was an error?
You can pass methods to Dialog:
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({
data: data,
methods: {
confirmedInternal() {
this.show = false
this.confirmed()
}
}
}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
then calling confirmedInternal when yes button is click
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmedInternal">Yes</button>
Demo: https://jsfiddle.net/guqc2src/
Vue documentation has pretty good example of modal.
The key option is $emit('close'). You can call $emit('close') on your method success.
// register modal component
Vue.component('modal', {
template: '#modal-template'
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
Anyone know how to get the sliders in this codepen example to manipulate the chart data for it's category? Currently only the Citizenship category is affected.
var valueBubble = '<output class="rangeslider__value-bubble" />';
function updateValueBubble(pos, value, context) {
pos = pos || context.position;
value = value || context.value;
var $valueBubble = $('.rangeslider__value-bubble', context.$range);
var tempPosition = pos + context.grabPos;
var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition;
if ($valueBubble.length) {
$valueBubble[0].style.left = Math.ceil(position) + 'px';
$valueBubble[0].innerHTML = value;
}
}
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function() {
this.$range.append($(valueBubble));
updateValueBubble(null, null, this);
},
onSlide: function(pos, value) {
updateValueBubble(pos, value, this);
updateChart(0, value);
}
});
function updateChart(location, value) {
myChart.data.datasets[0].data[location] = value;
myChart.update();
}
var ctx = document.getElementById("polarChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: [
"Citizenship",
"People",
"Growth",
"Management",
"Relationships",
"Health",
"Wealth",
"Joy"
],
datasets: [{
backgroundColor: [
"#00A3CE",
"#22CBED",
"#EB67A2",
"#FDA9ED",
"#EC5B22",
"#F78F21",
"#148F1E",
"#1EC428"
],
data: [4, 6, 6, 2, 4, 2, 2, 7],
}],
},
options: {
elements: {
arc: {
borderColor: "rgba(255,255,255,1)",
borderWidth: 2
}
},
scale: {
ticks: {
beginAtZero: true,
max: 8,
min: 0,
stepSize: 1,
fontFamily: "'Lato', sans-serif",
fontSize: 18,
fontColor: "#000",
display: false
},
gridLines: {
lineWidth: 1,
color: "#999"
},
},
layout: {
padding: {
left: 100,
right: 200,
top: 10,
bottom: 10
}
},
legend: {
display: true,
position: "right",
labels: {
fontFamily: "'Lato', sans-serif",
fontSize: 18,
fontColor: "#000"
}
}
}
});
#import "compass/css3";
body {
padding: 50px 0;
}
.sliderHolder {
width: 20%;
//height:400px;
float: left;
//border:1px solid;
//display:none;
}
.wheelCat {
width: 100px;
float: left;
//border:1px solid;
padding-top: 55px;
text-align: right;
padding-right: 10px;
font-family: "Lato", san-serif;
font-size: 13px;
}
.sliderAll {
height: 100px;
width: 50%;
padding-top: 55px;
//border:1px solid;
float: left;
}
.sliderCitizenship .rangeslider__fill {
background-color: #00A3CE;
}
.sliderPeople .rangeslider__fill {
background-color: #22CBED;
}
.sliderGrowth .rangeslider__fill {
background-color: #EB67A2;
}
.sliderManagement .rangeslider__fill {
background-color: #FDA9ED;
}
.sliderRelationships .rangeslider__fill {
background-color: #EC5B22;
}
.sliderHealth .rangeslider__fill {
background-color: #F78F21;
}
.sliderWealth .rangeslider__fill {
background-color: #148F1E;
}
.sliderJoy .rangeslider__fill {
background-color: #1EC428;
}
.rangeslider__value-bubble {
display: none;
}
*,
*:before,
*:after {
#include box-sizing(border-box);
}
.rangeslider__value-bubble {
border: 1px solid #ccc;
display: block;
padding: 5px;
position: absolute;
bottom: 100%;
margin-bottom: 25px;
width: 100px;
margin-left: -50px;
text-align: center;
#include border-radius(5px);
font-family: "Lato", san-serif;
font-size: 13px;
&:before,
&:after {
border-width: 11px;
border-style: solid;
border-color: transparent;
content: "";
display: block;
margin: auto;
width: 10px;
position: absolute;
left: 0;
right: 0;
}
&:before {
border-top-color: #ccc;
border-bottom-width: 0;
bottom: -11px;
}
&:after {
border-top-color: #fff;
border-bottom-width: 0;
bottom: -10px;
}
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
</head>
<main class="container">
<div class="sliderHolder">
<div class="wheelCat">Citizenship</div>
<div class="sliderAll">
<div class="sliderCitizenship">
<input type=range value=1 min=0 max=8 step=1 id="Citizenship">
</div>
</div>
<br>
<div class="wheelCat">People</div>
<div class="sliderAll">
<div class="sliderPeople">
<input type=range value=1 min=0 max=8 step=1 id="People">
</div>
</div>
<br>
<div class="wheelCat">Growth</div>
<div class="sliderAll">
<div class="sliderGrowth">
<input type=range value=1 min=0 max=8 step=1 id="Growth">
</div>
</div>
<br>
<div class="wheelCat">Management</div>
<div class="sliderAll">
<div class="sliderManagement">
<input type=range value=1 min=0 max=8 step=1 id="Management">
</div>
</div>
<br>
<div class="wheelCat">Relationships</div>
<div class="sliderAll">
<div class="sliderCitizenship">
<input type=range value=1 min=0 max=8 step=1 id="Citizenship">
</div>
</div>
<br>
<div class="wheelCat">Health</div>
<div class="sliderAll">
<div class="sliderHealth">
<input type=range value=1 min=0 max=8 step=1 id="Health">
</div>
</div>
<br>
<div class="wheelCat">Wealth</div>
<div class="sliderAll">
<div class="sliderWealth">
<input type=range value=1 min=0 max=8 step=1 id="Wealth">
</div>
</div>
<br>
<div class="wheelCat">Joy</div>
<div class="sliderAll">
<div class="sliderJoy">
<input type=range value=1 min=0 max=8 step=1 id="Joy">
</div>
</div>
<br>
</div>
<div style="float:left;width:80%;">
<canvas id="polarChart"></canvas>
</div>
</main>
</html>
This is where the problem sits:
updateChart(0, value);
this is responsible for updating data in data array position 0. When you change it to updateChart(1, value); it will update People category data. Change your code so the parameter is set dynamically based on the clicked slider.
--== UPDATE BELOW ==--
Looking up the code I found identifier for rangeSlider. Which suits perfectly for your case.
I do not know if this is correct way of passing this information, but it seems to be working.
Use updateChart(this.identifier.slice(-1), value);
Quick explanation - each object has got identifier such as
identifier : "js-rangeslider-0"
so I am taking current object (this), going inside .identifier and taking last character of this string .slice(-1).
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>