Javascript - Variable Missing - javascript
I am having some issues getting this javascript and css to work correctly on about 50% of machines. The odd things is, they're all work computers that have browsers up-to-date and I have tried multiple browsers. I can verify that this code works correctly, but can't verify why it's not working on a large amount of machines. Here is my beginning code with js:
<!DOCTYPE html>
<head>
<style type='text/css'>
.body-content {
background: rgba(255, 202, 25);
color: red;
position: relative;
left: 20em;
top: -6.2em;
background-color: rgb(255, 202, 25);
padding: 10px 100px;
font-weight: 700;
line-height: 2em;
max-width: 45em;
border: 3px solid yellow;
border-radius: 7px;
}
.comp-form {
color: rgb(24, 33, 128);
transform: rotate(90deg);
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 70px;
transform-origin: 5%;
font-style: normal;
font-variant: small-caps;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
font-weight: 700;
line-height: 2em;
position: absolute;
border: 3px solid black;
background: rgb(255, 202, 25);
padding: 0 600px;
z-index: 1;
left: -20px;
top: -400px;
}
.country-select {
position: absolute;
top: 58px;
left: 325px;
color: yellow;
}
body {
background-color: rgb(24, 33, 128);
position: relative;
top: 6.5em;
font-color: white;
}
.submitbutton {
-moz-box-shadow:inset 50px 50px 50px 0px #ffc919;
-webkit-box-shadow:inset 50px 50px 50px 0px #ffc919;
box-shadow:inset 50px 50px 50px 0px yellow;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc919), color-stop(1, #ffc919) );
background:-moz-linear-gradient( center top, #ffc919 5%, #ffc919 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc919', endColorstr='#ffc919');
background-color:#ffc919;
-webkit-border-top-left-radius:37px;
-moz-border-radius-topleft:37px;
border-top-left-radius:37px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:37px;
-moz-border-radius-bottomright:37px;
border-bottom-right-radius:37px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:9px solid #182180;
display:inline-block;
color:#182180;
font-family:Comic Sans MS;
font-size:33px;
font-weight:bold;
font-style:normal;
height:63px;
line-height:40px;
width:147px;
text-decoration:none;
text-align:center;
position: relative;
left: -120px;
bottom: 25px;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
border-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
}
.submitbutton:active {
position: relative;
top:-20px;
color: yellow;
border-color: yellow;
box-shadow:inset 50px 50px 50px 0px rgb(24, 33, 128);
}
.cancelbutton {
-moz-box-shadow:inset 50px 50px 50px 0px #ffc919;
-webkit-box-shadow:inset 50px 50px 50px 0px #ffc919;
box-shadow:inset 50px 50px 50px 0px yellow;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc919), color-stop(1, #ffc919) );
background:-moz-linear-gradient( center top, #ffc919 5%, #ffc919 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc919', endColorstr='#ffc919');
background-color:#ffc919;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:37px;
-moz-border-radius-topright:37px;
border-top-right-radius:37px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:37px;
-moz-border-radius-bottomleft:37px;
border-bottom-left-radius:37px;
text-indent:0px;
border:9px solid #182180;
display:inline-block;
color:#182180;
font-family:Comic Sans MS;
font-size:33px;
font-weight:bold;
font-style:normal;
height:63px;
line-height:40px;
width:147px;
text-decoration:none;
text-align:center;
position: relative;
left: -120px;
bottom: 25px;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
border-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
}
.cancelbutton:active {
position: relative;
top:-20px;
color: yellow;
border-color: yellow;
box-shadow:inset 50px 50px 50px 0px rgb(24, 33, 128);
}
.ccTitle {
color: rgb(24, 33, 128);
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 70px;
font-style: normal;
font-variant: small-caps;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
font-weight: 700;
line-height: 2em;
position: relative;
left: 250px;
border: 3px solid black;
background: rgb(255, 202, 25);
width: 80%;
top: -170px;
padding: 0 100px;
z-index: 2;
white-space: nowrap;
}
.dropbox1 {
position: absolute;
top: 4.45em;
left: 34.5em;
}
.dropbox2 {
position: absolute;
top: 3.75em;
left: 36em;
color: yellow;
}
.expimg {
width: 300px;
height: 300px;
float: left;
position: absolute;
left: -15px;
top: -170px;
border: 3px solid black;
z-index: 3;
}
.tableheader {
color: rgb(24, 33, 128);
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 30px;
font-style: normal;
font-variant: small-caps;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
font-weight: 700;
padding-bottom: 10px;
}
#reqTbl {
position: relative;
top: 20px;
left: -28px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
width: 760px
}
#supplierTbl {
position: relative;
top: 50px;
left: -30px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
}
#currencyTbl {
position: relative;
top: -170px;
left: 357px;
border: 3px solid yellow;
padding: 30px 30px;
border-radius: 7px;
width: 375px;
}
tr {
color: rgb(24, 33, 128);
font-size: 14px;
text-align: center;
}
#commentsheader {
position: relative;
top: -100px;
left: -33px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
width: 460px;
}
#commentBox {
position: relative;
top: -127px;
left: -33px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
height: 200px;
width: 700px;
}
#MPIFid {
position: relative;
bottom: 0px;
right: 290px;
overflow: auto;
}
</style>
</head>
And the HTML (I have functions that are not built yet in this. Please let me know if this could be an issue):
<body>
<h1 class="ccTitle">CURRENCY CONVERSIONS</h1>
<h2 class="comp-form">Header2</h2>
<img src="http:/photo.png" alt="Logo" class="expimg">
<div class="country-select">Select Bank Country:</div>
<select name="slist1" class="dropbox1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="United_States">United States</option>
<option value="Italy">Italy</option>
<option value="Greece">Greece</option>
</select>
<span id="slist2" class="dropbox2"></span>
<div id="test" style="display:none;" class="body-content">
<form id='curForm'>
<table id='reqTbl'>
<tr>
<th class='tableheader' align='center' colspan=3>Prerequisites</th>
</tr>
<tr>
<td>
Has the partner already been placed on stop sell?
</td>
<td>
<label for="Yes"><input type="radio" name='Stop Sell' value="Yes" id='ssYes' onmouseover="tooltip.show('The supplier must be placed on Stop Sell prior to the request being submitted/processed.', 200);" onmouseout="tooltip.hide();">Yes</label>
<label for="No"><input type="radio" name='Stop Sell' value="No" id='ssNo' onmouseover="tooltip.show('The supplier must be placed on Stop Sell prior to the request being submitted/processed.', 200);" onmouseout="tooltip.hide();">No</label>
</td>
</tr>
<tr>
<td>
Has the Market Manager given approval for this conversion?
</td>
<td>
<label for="Yes"><input type="radio" name='Market Manager Approval' value="Yes" id='mmApproved' onmouseover="tooltip.show('Approval from the Market Manager associated with the supplier is required before any requests can be submitted/processed.', 200);" onmouseout='tooltip.hide();'>Yes</label>
<label for="No"><input type="radio" name='Market Manager Approval' value="No" id='mmDenied' onmouseover="tooltip.show('Approval from the Market Manager associated with the supplier is required before any requests can be submitted/processed.', 200);" onmouseout='tooltip.hide();\'>No</label>
</td>
</tr>
<tr>
<td>
Market Manager that supplied approval
</td>
<td>
<input type="text" name="Market Manager Name" id='mmName' onmouseover="tooltip.show('Name of Market Manager who has approved the request',200);" onmouseout="tooltip.hide();" onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);'>
</td>
</tr>
<tr>
<td>
Effective Date of Currency Change
</td>
<td>
<input type="text" size="10" name="Effective Date of Currency Change" id="dateBox" onblur="this.value=asteriskize(this);" onmouseover="tooltip.show('Please click to select the date from which this change should be effective.', 200);" onmouseout="tooltip.hide();"
</td>
</tr>
</table>
<table id="supplierTbl">
<tr>
<th class='tableheader' align='center' colspan=3>Partner Info</th>
</tr>
<tr>
<td>
Vendor ID
</td>
<td>
ID
</td>
</tr>
<tr>
<td>
<input type='text' name='AccountingVendorID' id='accountingVendorID' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Vendor ID of supplier.', 200);" onmouseout="tooltip.hide();" onkeypress="return valNum(event);">
</td>
<td>
<input type='text' name='SampleID1' id='SampeID2' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Also referred to as the EID.', 200);" onmouseout="tooltip.hide();" onkeypress="return valNum(event);">
</td>
</tr>
<tr>
<td>
Partner Name
</td>
<td>
Country
</td>
</tr>
<tr>
<td>
<input type='text' name='Supplier Name' id='supplierName' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Name of the supplier.', 200);" onmouseout="tooltip.hide();">
</td>
<td>
<input type='text' name='City Name' id='cityName' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('City in which the supplier is located.', 200);" onmouseout="tooltip.hide();">
</td>
</tr>
</table>
<table id='currencyTbl'>
<tr>
<th class='tableheader' align='center' colspan=3>Currency</th>
</tr>
<tr>
<td>
Current Currency:
</td>
<td>
<input type="text" name="Current PeopleSoft Currency" id='currentCurr' onmouseover="tooltip.show('Current Currency',200);" onmouseout="tooltip.hide();" onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);'>
</td>
</tr>
<tr>
<td>
Desired Currency:
</td>
<td>
<select name='Desired Currency' id='desiredCurr' onmouseover="tooltip.show('New Currency', 200);" onmouseout="tooltip.hide();">
</td>
</tr>
</table>
<table>
<tr>
<th class='tableheader' id='commentsheader'>Comments</th>
</tr>
<tr>
<td style='height:308px;width:500px;'>
<textarea id='commentBox'></textarea>
</td>
</tr>
</table>
<table id="MPIFid">
<tr>
<td>
<div id="scontent" class="body-content"></div>
<td>
</tr>
</table>
<table>
<tr>
<td width='920px'>
<button type='button' id='submitButtonid' class='submitbutton' onclick='sendItOff();'>Submit</button>
</td>
<td>
<button type='button' id='cancelButtonid' class='cancelbutton' onclick='confirmCancel();'>Cancel</button>
</td>
</tr>
</table>
</form>
</div>
Here's the Javascript:
<script language='javascript'>
var SList = new Object(); // JS object declaration that stores data for options
var txtsl2 = 'Select Payment Method (If EFT, select MPIF Country/Language combination): ';
/*
Information that populates in dropbox 2 from the dropbox 1.
Could be potential spot for Basecamp function call once created.
*/
SList.slist2 = {
"United_States": ['Card', 'EFT - US/English'],
"Italy": ['Card', 'EFT - IT/English','EFT - IT/Italian'],
"Greece": ['Card', 'EFT - GR/English', 'EFT - GR/Greek']
};
/*
Object that stores content after 2nd dropbox selection.
*/
SList.scontent = {
"EFT - US/English": '**Please have the partner submit a form through the following link**: LINK',
"EFT - IT/Italian": '**Please have the partner submit an MPIF form through the following link**: LINK',
"EFT - IT/English": '**Please have the partner submit an MPIF form through the following link**: LINK',
"EFT - GR/English": '**Please have the partner submit an MPIF form through the following link**: LINK',
"EFT - GR/Greek": '**Please have the partner submit an MPIF form through the following link**: LINK',
};
/* DO NOT TOUCH BELOW */
// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist === 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if (slist === 'slist2') {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
document.getElementById('slist2').innerHTML = txtsl2 + '<select name="slist2" onchange="SList.getSelect(\'scontent\', this.value); check_dd();">' + addata + '></select>';
}
} else if (slist === 'slist2') {
// empty the tag for 2n
document.getElementById('slist2').innerHTML = '';
}
};
// drops the form data down after 2nd selection
function check_dd() {
if(document.getElementById('slist2').value === "- - -") {
document.getElementById('test').style.display = 'none';
} else {
document.getElementById('test').style.display = 'block';
};
};
</script>
</html>
There are 3 things that could potentially happen with what I've found.
1) The page as it is right now will work flawlessly.
2) The page will have some CSS issues, but the javascript will still work.
3) The page will not function at all.
When the page will not function at all, the console in Chrome shows the error Error: Uncaught ReferenceError: SList is not definedListPicker._handleMouseUp # about:blank:510
As you can see, ListPicker is NOT anywhere in my code. I'm thoroughly confused.
Please help!! :)
After testing your code, I can only conclude that your problems do not stem from erroneous JavaScript, but rather poorly written markup. Some browsers are pretty good at piecing together bad HTML, but others may not be.
I would recommend you clean up and format your HTML. Make sure all of your tags are properly closed (and in some cases, opened) and that you don't nest too many quotes.
Also, the error you mention at the end of your question simply states that the SList variable was referenced before it had been defined. Putting your JavaScript at the bottom of your <body> tag might fix this.
Related
How do I output form results to a specific part of a page?
I have a web app that takes a user input and outputs the result to the lower part of the main page. There are two pairs of form tags--a main form and a secondary form. I want the output produced by the main form to show above the secondary form.
The secondary form does not output anything. It is a button that says "Show All Folders". See screenshot. I want the result where the red arrow is pointing to.
#!C:\Python\Python38-32\python.exe
import cgi
import os
import re
print("Content-Type: text/html")
print()
input = cgi.FieldStorage()
print("""
<head>
<title> Search </title>
<script type="text/javascript">
function showHide() {
var div = document.getElementById('hidden_div');
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<style type="text/css">
body{
font-size: 16px;
color: #333;
font-family: 'Roboto', sans-serif;
background: #BBDEFB;
}
h1{
font-size: 30px;
background: #2196F3;
padding: 5px;
top: 0px;
width: 99%;
height: 50px;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
border-radius: 12px;
color: #E3F2FD;
}
#mainForm form{
background: #E3F2FD;
padding: 25px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
border-radius: 5px;
}
#secondaryForm form{
background: #E3F2FD;
padding: 5px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
border-radius: 5px;
}
.result_1{
font-size: 15px;
color: #333;
padding: 10px;
background: #cccccc;
border-radius: 1px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
}
.result_2{
font-size: 13px;
color: #333;
padding: 2px;
background: #f2f2f2;
border-radius: 1px;
}
input[type=text]{
background-color: #42A5F5;
color: #E3F2FD;
border: none;
font-weight: bold;
font-size: 14px;
padding: 8px 20px 8px 12px;
margin: 8px 0;
height: px;
border-radius: 8px;
}
input[type=submit]{
background-color: #42A5F5;
padding: 8px 20px;
border: none;
font-weight: bold;
font-size: 14px;
color: #fff;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
}
div.a {
text-align: right;
}
</style>
""")
print("""<body>
<h1><center>SEARCH FILES</center></h1>
<div id="mainForm">
<form action="search_sample.py">
Enter Value to Search<br>
<input type="text" name="user_input"><br>
<br>
Select File Type<br>
<input type="radio" name="operator" value="o_file" checked> O File <br>
<input type="radio" name="operator" value="l_file"> L File <br>
<br>
<input type="submit" value="Submit"><br>
</form>
</div>
<div id="secondaryForm">
<form name="showfolders" onsubmit="showHide(); return false;">
<input type="submit" value="Show All Folders" name="show_folder" />
</form>
</div>
""")
# Begin Python script
my_dir = "C:/Users/xstah/OneDrive/Documents/sample_txt/"
# Get all folders
print('<div id="hidden_div" style="display:none">')
for root, dirs, files in os.walk(my_dir):
for file in files:
if file.endswith(".dat"):
filename2 = os.path.join(root, file)
filepath_split = os.path.normpath(filename2)
path_list = filepath_split.split(os.sep)
hostname = path_list[6]
foldername = path_list[7]
print('<div class="result_1">{}</div>'.format('<b>'+ hostname + '</b>'))
print('<div class="result_2">{}</div>'.format(foldername))
print('</div>')
# User input & selection
user_input = input["user_input"].value
operation = input["operator"].value
# End Python script
print("</body>")
Try to make div between main and secondary forms there and do innerHTML or innerText by js.
How to Scroll Left and Right inside div in Angularjs
I want a directive or any method to scroll inside div horizontally using angular or javascript, no jquery please.
http://jsfiddle.net/EB4UC/70/
the fiddle above shows what i'm trying to achieve.
$('#left').click(function () {
var leftPos = $('div.outer_container').scrollLeft();
console.log(leftPos);
$("div.outer_container").animate({
scrollLeft: leftPos - 500
}, 800);
});
$('#right').click(function () {
var leftPos = $('div.outer_container').scrollLeft();
console.log(leftPos);
$("div.outer_container").animate({
scrollLeft: leftPos + 500
}, 800);
});
the above code is jQuery of want i want in angular
Thanks
Bind the functions to the buttons and use the scrollLeft properties incrementing or decreasing the value by the amount you want to
function leftScroll() {
document.querySelector('div.outer_container').scrollLeft -= 500;
}
function rightScroll() {
document.querySelector('div.outer_container').scrollLeft += 500;
}
.outer_container { margin: 0 auto; }
#left { margin-left: 300px; }
#right { }
.button {
cursor: pointer;
width: 50px;
text-align: center;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
<div class="inner_container" style="width: 10000px;">
<table>
<tr>
<td style=" width: 577px; ">
<div style="text-align:left; margin: 0px 10px 10px 10px; width:557px; ">
<p>Add Comment to the Tesco Catalogue</p>
<form class="comment_form" action="profile"
method="post">
<textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</td>
<!-- do a for loop here to generate all other items -->
<td style="width:577px;">
<div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
<p class="comment_username">User said at such a time</p>
<p class="comment_comment">Comment ......</p>
</div>
</td>
<td style="width:577px;">
<div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
<p class="comment_username">User said at such a time</p>
<p class="comment_comment">Comment ......</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<span id="left" class="button" onclick="leftScroll()">Left</span>
<span id="right" class="button" onclick="rightScroll()">Right</span>
Any update with Google apps, because script has stopped working?
Can anyone help with a script which has stopped working:
It's a html/css form created (last year) to get the responses on a google spreadsheet alongside the the files uploaded within a folder. It was working fine until beginning of this year, but it doesn't anymore. I mean as usual, I run a function + deploy app, I get the link and the form appears, but upon submission I get nothing, blank page and the spreasheets doesn't contain anything.
Thanks a lot for your guidance.
Here are my codes:
Form.html
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">
img {
display: block;
margin-left: auto;
margin-right: auto;
width:500px;
height:170px;
;
}
form {
width:450px;
padding:30px;
margin: auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
h2 {
width:450px;
padding:30px;
margin: auto;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 10px;
background: #FF8500;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
h1 > span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
label {
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
input[type="button"],
input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
input[type="button"]:hover,
input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
</style>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<img src="http://www.greenman-advertising.com/wp-content/uploads/2013/08/header_problemSolving_03.jpg">
<form id="myForm" runat="server">
<h1>Job application<span>Apply now and get the opportunity to join us!</span></h1>
<section> <span>1</span>Personal details</section>
Full name: <input type="text" name="name" placeholder="First name & Last name"/><br/>
Date of birth: <input type="text" name="birth" placeholder="dd/mm/yyyy"/><br/>
Nationality: <select name="nationality">
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select><br/>
Marital status: <select name="marital">
<option>...</option>
<option>Married</option>
<option>Single</option>
</select><br/>
Please state the age of your children who will be registered in our school: <input type="text" name="children" placeholder="Example: 5;9;12 or 0"/><br/>
<section> <span>2</span>Experiences and qualifications</section>
Years of experience: <select name="years">
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>10+</option>
</select><br/>
Highest qualification obtained: <input type="text" name="qualification" placeholder="Example: Degree, Master, .."/><br/>
Educational qualification obtained: <input type="text" name="educational" placeholder="Example: QTS,PGCE,CELTA, .."/><br/>
English language level: <select name="profiency">
<option>...</option>
<option>Fluent English proficient</option>
<option>Advanced</option>
<option>Intermediate</option>
<option>Early intermediate</option>
<option>Beginner</option>
</select><br/>
<section> <span>3</span>Position applied for</section>
Subject: <select name="subject">
<optgroup label="Teaching">
<option>...</option>
<option>Arts</option>
<option>Biology</option>
<option>Chemistry</option>
<option>Computer Science</option>
<option>English</option>
<option>Math</option>
<option>Physics</option>
<option>Science</option>
<option>Social Studies</option>
</optgroup>
<optgroup label="Other">
<option>...</option>
<option>Principal</option>
<option>Deputy principal</option>
<option>Educational spervisor</option>
</optgroup>
</select><br/>
Grade level ( or Section): <select name="grade">
<option>...</option>
<option>Higher grades</option>
<option>Lower grades</option>
<option>IGCSE</option>
<option>AS</option>
<option>A2</option>
<option>SAT</option>
</select><br/>
<section> <span>4</span>Contact details</section>
Email: <input type="email" name="email" placeholder="example#domain.com"/><br/>
Phone number: <input type="text" name="phone" placeholder="[+]code country/phone number"/><br/>
Skype: <input type="text" name="skype" placeholder="username"/><br/>
<section> <span>5</span>Attachments</section>
CV (pdf/doc/docx only): <input type="file" name="myFile"/><br/>
Qualification (scan): <input type="file" name="myFile2"/><br/>
Other qualification (scan): <input type="file" name="myFile3"/><br/>
Passport (scan): <input type="file" name="myFile4"/><br/>
<input type="submit" value="Apply"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" /><br/>
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
Code.gs
var submissionSSKey = '1urIXPV2NdsqTJ5zXJb1_t_EdsY7Kuh3VcSBJ4cnPIEg';
var folderId = "0B0lYW3YSUvX2ZDc0WnhJdFhkQk0";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var fileBlob2 = theForm.myFile2;
var fileBlob3 = theForm.myFile3;
var fileBlob4 = theForm.myFile4;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
var doc2 = folder.createFile(fileBlob2);
var doc3 = folder.createFile(fileBlob3);
var doc4 = folder.createFile(fileBlob4);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var birth = template.birth = theForm.birth;
var nationality = template.nationality = theForm.nationality;
var marital = template.marital = theForm.marital;
var children = template.children = theForm.children;
var years = template.years = theForm.years;
var profiency = template.profiency = theForm.profiency;
var qualification = template.qualification = theForm.qualification;
var educational = template.educational = theForm.educational;
var subject = template.subject = theForm.subject;
var grade = template.grade = theForm.grade;
var email = template.email = theForm.email;
var phone = template.phone = theForm.phone;
var skype = template.skype = theForm.skype;
var fileUrl = template.fileUrl = doc.getUrl();
var fileUrl2 = template.fileUrl = doc2.getUrl();
var fileUrl3 = template.fileUrl = doc3.getUrl();
var fileUrl4 = template.fileUrl = doc4.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 18).setValues([[name,birth,nationality,marital,children,profiency,years,qualification,educational,subject,grade,email,phone,skype,fileUrl,fileUrl2,fileUrl3,fileUrl4]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Thanks.html
<div>
<h2>Thank you <?= name ?>, <br>your application has been received.</h2>
</div>
Yes, something has recently changed. The default sandbox mode is now IFRAME. Your doGet() function does not designate a sandbox mode, so it now defaults to IFRAME. This has changed the behavior of your form. You have an <input> tag that is a button of the submit type. This causes the form to issue either a GET or POST request when the form is submitted. That causes the screen to go blank, and is probably interfering with the google.script.run.myfunction() call to the server. Change the input button type from submit to button. Currently: <input type="submit" value="Apply" Change to: <input type="button" value="Apply" I modified the code for the function named toggle_visibility if(e.style.display !== 'none')//Modified this line Was: if(e.style.display === 'block') The style could be many different settings. If it's inline for example, then that would break the code. But if it's !== "none", then if it's anything but none, then it's obviously being displayed. Here is a link to a shared Apps Script file: Link to Shared Apps Script File
Following your advice, I've visited this page Migrating to IFRAME Sandbox Mode
and made the following change:
function doGet() {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
and I changed the type to "button" but nothing is happening: it keeps at "Uploading. Please wait..." for ever
Expanding Search Off Click Close JQuery
I made an expanding JQuery Search Box yesterday, which works like a charm! But, I am having trouble creating a script that makes it so when the user clicks off the search box, it closes.
This is my JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
This is my HTML:
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span onclick="expandSearch()" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
And my CSS:
.ngen-search{
padding:0px 0px 0px;
}
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open{
width:410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit{
display:inline-block;
width:55px;
height:43px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
All help is appreciated! Thanks!
Also, please note that I am quite new to JQuery and rarely use it.
You can write a click handler which listens to the click on anywhere in the page and then remove the class like
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
})
.ngen-search {
padding: 0px 0px 0px;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: white;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span id="search-trigger" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
Show/hide (fade in/out) several DIVS inside table row with several A HREF in other row and columns
Okey, so this is what I’m looking for…
I have 3 links (a href's) in 3 columns in 1 row. Below is 1 column in one row with 3 divs in it.
How do I make the divs fade in/fade out (as stated below) if the links are clicked?
From beginning all #info...’s are hidden.
If Link 1 is clicked #info-first fades in. If then Link 2 is clicked #info-first
fades away and #info-second fades in and so on for all Link's.
Also there is a hide option for all the #info-...’s so it goes back to what it was in the beginning (all hidden).
Simpel demonstration: JSFiddle
UPDATE: SOLUTION
Thank you Eduardo (he commented final solution): See JSFiddle.
HTML:
<div id="banner-content-wrap">
<div class="banner-text"><span>Cool</span> slogan goes here. <span>Cool</span> indeed.
<br/>
<div id="explain">From beginning all #info... is hidden. If Link 1 is clicked #info-first fades in. If then Link 2 is clicked #info-first
<br/>fades away and #info-second fades in and so on. Also there is a hide option for all the #info-...</div>
<div class="banner-links">
<table border="1">
<tr class="first">
<td class="first">about</td>
<td class="second">about</td>
<td class="third">about</td>
</tr>
<tr class="second">
<td class="first">LINK 1
</td>
<td class="second">LINK 2
</td>
<td class="third">LINK 3
</td>
</tr>
<tr class="third">
<td colspan="3">
<div id="info">
<div class="info-first">Link 1 fades in #info-first info
<br/>
<br/>HIDE #info-first
</div>
<div class="info-second">Link 2 fades in #info-second text
<br/>
<br/>HIDE #info-second
</div>
<div class="info-third">Link 3 fades in #info-third text
<br/>
<br/>HIDE #info-third
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
#banner-content-wrap {
position: absolute;
top: 25%;
width: 960px;
right: 50%;
margin-right: -480px;
}
#explain {
text-align: center;
font-size: 12px;
color: #000;
}
.banner-text {
text-align: center;
position: absolute;
height: 80px;
width: 950px;
overflow: hidden;
padding: 0;
overflow: visible;
font-size: 36px;
font-family:'Berlin Sans FB';
color: #fff;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
}
.banner-text span {
color: #000;
}
.banner-links table {
width: 400px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
border-collapse:collapse;
}
.banner-links tr.first td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.first td.second {
text-align: center;
}
.banner-links tr.first td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.first {
font-size: 10px;
font-family:'Verdana';
color: #000;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
opacity: 0.75;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.banner-links tr.second td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.second td.second {
text-align: center;
}
.banner-links tr.second td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.second {
line-height: 24px;
}
.banner-links tr.second a {
text-transform: uppercase;
font-size: 18px;
font-family:'Verdana';
color: #000;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
opacity: 0.75;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.banner-links tr.second a:hover {
opacity: 0.95;
}
.banner-links tr.second td.first a:hover {
color: #ff0000;
}
.banner-links tr.second td.second a:hover {
color: #34b700;
}
.banner-links tr.second td.third a:hover {
color: #004eb7;
}
.banner-links tr.third td {
background: transparent;
width: 100%;
}
.banner-links #info {
font-size: 12px;
font-family:'Verdana';
text-align: left;
background: rgba(255, 255, 255, 0.33);
}
.banner-links .info-first {
background: #ff0000;
padding: 10px 10px 10px 10px;
}
.banner-links .info-second {
background: #34b700;
padding: 10px 10px 10px 10px;
}
.banner-links .info-third {
background: #004eb7;
padding: 10px 10px 10px 10px;
}
Using fadeToggle() will do the trick
Also using css to hide the elements with info-(something)
$(".second td").click(function(){
$(".info-"+$(this).attr("class")).fadeToggle()
});
Depending on the td clicked on .second we will create the selector for the divs and then we call fadeToggle() to hide them or to show them depending on their current visibility.
div[class^='info-']{
display:none;
}
To hide the divs this select any div with a class that starts with "info-"
See this fiddle