Develop Reference

How do I style a button as a toggle that changes styling when clicked

I'm using the following code to change prices in my pricing table:
function myFunction() {
var x = document.getElementById("prijs-small");
if (x.innerHTML === "17,50") {
x.innerHTML = "13,50";
} else {
x.innerHTML = "17,50";
}
var x = document.getElementById("prijs-medium");
if (x.innerHTML === "58") {
x.innerHTML = "30,50";
} else {
x.innerHTML = "58";
}
var x = document.getElementById("prijs-large");
if (x.innerHTML === "128,50") {
x.innerHTML = "61";
} else {
x.innerHTML = "128,50";
}
}
.prijs-button {
background-color: white;
color: #012d5d;
padding: 10px 20px;
border-radius: 30px;
}
<button class="prijs-button" onclick="myFunction()">150/350</button>
<div id="prijs-small">17,50</div>
<div id="prijs-medium">58</div>
<div id="prijs-large">128,50</div>
Now I want to style a toggle that does the same, with on the one side showing 150 (people icon) and other side 350 (people icon) as shown in this example:
As I'm using a button now to make the prices change, how can I turn this into this toggle? The green half should be the active part.
Thanks so much in advance!

Will this do? I've used a checkbox and styled it to look like a pill. Hopefully it's self-explanatory but if not drop me a comment and I'll elaborate.
body {
background-color: gray;
}
#mybutton {
width: 8rem;
height: 3rem;
border-radius: 100rem;
overflow: hidden;
}
#mybutton input {
display: none;
}
#mybutton>label {
display: flex;
}
.side {
width: 50%;
padding-inline: 0.15rem;
text-align: center;
line-height: 3rem;
background-color: white;
transition: background-color, color 300ms;
cursor: pointer;
}
#mybutton input:not(:checked)~.left {
background-color: #35CB8C;
color: white;
transition: background-color, color 300ms;
}
#mybutton input:checked~.right {
background-color: #35CB8C;
color: white;
transition: background-color, color 300ms;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id='mybutton'>
<label for='mybutton-checkbox'>
<input type=checkbox id='mybutton-checkbox'>
<div class='side left'>25<i class="fa fa-user" aria-hidden="true"></i></div>
<div class='side right'>100<i class="fa fa-user" aria-hidden="true"></i></div>
</label>
</div>

You can put two buttons next to each other with some border radiuses applied to them.
Some POC version here:
div.toggle {
font-size: 0; /* this is to remove empty inline space between two buttons. if you don't like it, you can use flexbox */
}
button {
width: 100px;
height: 50px;
font-size: 14px;
}
button.left {
border-right-width: 0;
border-radius: 20px 0 0 20px;
}
button.right {
border-radius: 0 20px 20px 0;
}
<div class="toggle">
<button class="left">25</button>
<button class="right">100</button>
</div>
Adding an image or icon inside button is totally possible so you can do if if you want.

By inserting two buttons with different images you might get the result you are seeking.
Then by using in CSS border-bottom-left: (The amount of px you want)px and border-top-left: (The amount of px you want)px you can style you buttons.

When to Call JavaScript Toggle Function?

I have a drop down menu I need to make appear and disappear using pure JavaScript (no libraries/jQuery). Thus I am developing a toggle function. However despite trying several approaches, nothing seems to work. My current idea is to create a variable to hold the state of the menu (open or closed). Once the display of the menu changes from "none" to "block", the variable should change from "closed" to "open". Then an event listener would be added to the body element so when anything is clicked, the menu closes (i.e. the display property is changed back to "none").
Unfortunately the above doesn't seem work. When I put the If/else block outside of an event listener it fires when the page loads, but not when the menuToggle variable changes. If I put it or a function inside the menuPlaceholder event listener the menu won't open, probably due to the open and close code being called basically at the same time.
Clearly I am missing something, probably related to program control or function calling. Does anyone have any insights?
The code I am working with is below. Note the alert functions peppered throughout the code are for testing purposes only.
//Puts IDs for search preference selection box into variables
var menuPlaceholder = document.getElementById('searchSelection');
var menuDisplay = document.getElementById('searchOptions');
var boxLabel = document.getElementById('searchLabel');
//Puts IDs for text input box and submission into variables
var searchBoxPlaceholder = document.getElementById('searchInput');
var searchInput = document.getElementById('searchBox');
var submitButton = document.getElementById('submit');
//Adds class to each search option and puts ID of hidde field into variable
var searchPrefSubmission = document.getElementsByClassName('buttonSearch');
var hiddenInput = document.getElementById('searchChoice');
//Global variable to indicate whether searchOptions menu is opened or closed
var menuToggle = "closed";
//Closes element when one clicks outside of it.
function hideOnClickOutside(element) {
const outsideClickListener = event => {
if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
element.style.display = 'none'
removeClickListener()
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
//When the placeholder box is clicked, the option menu appears
menuPlaceholder.addEventListener('click', function (event){
menuDisplay.style.display = "block";
menuToggle = "open";
//Add click event to searchPref buttons
for (i = 0; i < searchPrefSubmission.length; i++) {
//Assigns value of the button to both the hidden input field and the placeholder box
searchPrefSubmission[i].addEventListener('click', function(event) {
hiddenInput.value=this.value;
boxLabel.innerHTML = this.value;
menuDisplay.style.display = "none";
menuPlaceholder.style.display = "inline-block";
});
}
});
//This code causes the text input box of the search form to appear when the background box is clicked
searchBoxPlaceholder.addEventListener('click', function(event){
searchInput.style.display = "inline";
submitButton.style.display = "inline";
//hideOnClickOutside(menuDisplay);
});
if (menuToggle == "open"){
document.body.addEventListener('click', function(event){
alert('Foo!');
})
}else{
alert('Boo!');
}
/*function toggleMenu () {
//menuDisplay.style.display = "none";
alert('Boo!');
menuToggle = "closed";
}*/
body {
font-family:Montserrat, sans-serif;
}
#searchOptionPlaceholder {
display: inline-block;
}
#searchSelection {
padding: 10px 20px;
margin-right: 10px;
background-color: #F0F3F5;
display: inline-block;
color: #000000;
width: 140px;
max-width: 200px;
max-height: 35px;
border: 2px solid black;
vertical-align: middle;
}
#searchSelection img {
float: right;
}
#searchLabel {
display: inline-block;
padding-top: 10px;
vertical-align: top;
}
#searchOptions {
display: none;
background-color: #F0F3F5;
position: absolute;
z-index: 2;
}
#searchOptions ul {
background-color: #F0F3F5;
padding: 5px;
}
#searchOptions li {
list-style-type: none;
border-bottom: 2px solid black;
}
#searchOptions li:hover {
background-color: #706868;
color: #ffffff;
}
.buttonSearch {
background-color: transparent;
border: none;
padding: 10px;
font-size: 14px;
}
.searchSubHeading {
font-size: 12px;
}
#searchInput {
display: inline-block;
background-color: #F0F3F5;
padding: 10px 100px;
position: relative;
top: 0px;
max-width: 350px;
border: 2px solid black;
vertical-align: middle;
}
#searchInput img {
position: relative;
left: 80px;
}
#searchBox {
display: none;
width: 80%;
background-color: #F0F3F5;
border: none;
font-size: 1.5em;
position: relative;
right: 50px;
vertical-align: middle;
}
#submit {
border: none;
background-image: url('https://library.domains.skidmore.edu/search/magnifyingGlass.png');
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 30px;
position: relative;
right: -80px;
vertical-align: middle;
}
#otherLinks {
margin-top: 10px;
}
#otherLinks a{
color: #000000;
}
#otherLinks a:hover{
color: #006a52;
}
<h1>Library Search</h1>
<form method="post" action="https://library.domains.skidmore.edu/search/searchBox.php" id="librarySearch">
<div id="searchSelection"><span id="searchLabel">Catalog</span><img src="down.png" height="30px" width="30px" /></div>
<div id="searchOptions">
<ul>
<li><button type="button" name="searchPref" value="Catalog" class="buttonSearch">Catalog<br /><br /><span class="searchSubHeading">Search books and DVDs</span></button></li>
<li><button type="button" name="searchPref" value="SearchMore" class="buttonSearch">SearchMore<br /><br /><span class="searchSubHeading">Search everything</span></button></li>
<li><button type="button" name="searchPref" value="Journals" class="buttonSearch">Journals<br /><br /><span class="searchSubHeading">Search journals</span></button></li>
</ul>
</div>
<div id="searchInput">
<input type="hidden" id="searchChoice" name="searchPref" value="catalog" />
<input type="search" id="searchBox" size="60" name="searchText" placeholder="Search our holdings"/><button type="submit" id="submit"></button></div>
<div id="otherLinks">Advanced Catalog Search | WorldCat | eBooks</div>
</form>

Some issues:
Adding event listeners within an event listener is in most cases a code smell: this will add those inner listeners each time the outer event is triggered. Those listeners remain attached, and so they accumulate. So, attach all event handlers in the top-level script, i.e. on page load, and then never again.
The if ... else at the end will execute on page load, and then never again. So the value of menuToggle is guaranteed to be "closed". You need to put that if...else switch inside the handler, so that it executes every time the event triggers, at which time the menuToggle variable will possibly have a modified value.
The body element does not stretch (by default) over the whole window. If you want to detect a click anywhere on the page, you should attach the listener on the document element itself, not on document.body.
When the click on the menu placeholder is handled, you should avoid that this event "bubbles" up the DOM tree up to the document, because there you have the other handler that wants to hide the menu again. You can do this with event.stopPropagation().
The global variable is not absolutely necessary, but if you use it, then I would call it menuVisible and give it a boolean value: false at first, and possibly true later.
For actually toggling the menu, I would create a function, which takes the desired visibility (false or true) as argument, and then performs the toggle.
Do not use undeclared variables, like the for loop variable i. Define it with let.
Here is your code with those changes implemented. Of course, there is still a lot that could be improved, but I believe that goes beyond the scope of this question:
var menuPlaceholder = document.getElementById('searchSelection');
var menuDisplay = document.getElementById('searchOptions');
var boxLabel = document.getElementById('searchLabel');
var searchBoxPlaceholder = document.getElementById('searchInput');
var searchInput = document.getElementById('searchBox');
var submitButton = document.getElementById('submit');
var searchPrefSubmission = document.getElementsByClassName('buttonSearch');
var hiddenInput = document.getElementById('searchChoice');
// Changed name and type of global variable:
var menuVisible = false;
// Removed some functions ...
menuPlaceholder.addEventListener('click', function (event){
// Use new function for actually setting the visibility
toggleMenu(!menuVisible);
// Avoid that click event bubbles up to the document level
event.stopPropagation();
});
// Add these event handlers on page load, not within another handler
// Define loop variable with let
for (let i = 0; i < searchPrefSubmission.length; i++) {
//Assigns value of the button to both the hidden input field and the placeholder box
searchPrefSubmission[i].addEventListener('click', function(event) {
hiddenInput.value = this.value;
boxLabel.innerHTML = this.value;
// Use the new function for setting the visibility
toggleMenu(false);
menuPlaceholder.style.display = "inline-block";
});
}
searchBoxPlaceholder.addEventListener('click', function(event){
searchInput.style.display = "inline";
submitButton.style.display = "inline";
});
// Bind handler on document itself, and call new function
document.addEventListener('click', function(event) {
toggleMenu(false);
});
// new function to perform the toggle
function toggleMenu(show) {
menuDisplay.style.display = show ? "block" : "none";
menuVisible = show;
}
body {
font-family:Montserrat, sans-serif;
}
#searchOptionPlaceholder {
display: inline-block;
}
#searchSelection {
padding: 10px 20px;
margin-right: 10px;
background-color: #F0F3F5;
display: inline-block;
color: #000000;
width: 140px;
max-width: 200px;
max-height: 35px;
border: 2px solid black;
vertical-align: middle;
}
#searchSelection img {
float: right;
}
#searchLabel {
display: inline-block;
padding-top: 10px;
vertical-align: top;
}
#searchOptions {
display: none;
background-color: #F0F3F5;
position: absolute;
z-index: 2;
}
#searchOptions ul {
background-color: #F0F3F5;
padding: 5px;
}
#searchOptions li {
list-style-type: none;
border-bottom: 2px solid black;
}
#searchOptions li:hover {
background-color: #706868;
color: #ffffff;
}
.buttonSearch {
background-color: transparent;
border: none;
padding: 10px;
font-size: 14px;
}
.searchSubHeading {
font-size: 12px;
}
#searchInput {
display: inline-block;
background-color: #F0F3F5;
padding: 10px 100px;
position: relative;
top: 0px;
max-width: 350px;
border: 2px solid black;
vertical-align: middle;
}
#searchInput img {
position: relative;
left: 80px;
}
#searchBox {
display: none;
width: 80%;
background-color: #F0F3F5;
border: none;
font-size: 1.5em;
position: relative;
right: 50px;
vertical-align: middle;
}
#submit {
border: none;
background-image: url('https://library.domains.skidmore.edu/search/magnifyingGlass.png');
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 30px;
position: relative;
right: -80px;
vertical-align: middle;
}
#otherLinks {
margin-top: 10px;
}
#otherLinks a{
color: #000000;
}
#otherLinks a:hover{
color: #006a52;
}
<h1>Library Search</h1>
<form method="post" action="https://library.domains.skidmore.edu/search/searchBox.php" id="librarySearch">
<div id="searchSelection">
<span id="searchLabel">Catalog</span>
<img src="down.png" height="30px" width="30px" />
</div>
<div id="searchOptions">
<ul>
<li>
<button type="button" name="searchPref" value="Catalog" class="buttonSearch">
Catalog<br /><br /><span class="searchSubHeading">Search books and DVDs</span>
</button>
</li>
<li>
<button type="button" name="searchPref" value="SearchMore" class="buttonSearch">
SearchMore<br /><br /><span class="searchSubHeading">Search everything</span>
</button>
</li>
<li>
<button type="button" name="searchPref" value="Journals" class="buttonSearch">
Journals<br /><br /><span class="searchSubHeading">Search journals</span>
</button>
</li>
</ul>
</div>
<div id="searchInput">
<input type="hidden" id="searchChoice" name="searchPref" value="catalog" />
<input type="search" id="searchBox" size="60" name="searchText" placeholder="Search our holdings"/>
<button type="submit" id="submit"></button>
</div>
<div id="otherLinks">
Advanced Catalog Search |
WorldCat |
eBooks
</div>
</form>

Xpath of Radio button is not working: Xpath is not clickable?

I am trying to get the Xpath of the code but its showing not clickable.
I tried in chrome console and somehow make the xpath clickable but dont know how to use the xpath in selenium code.
In chrome console it work if you write like this
$x("//*[#id='no-voucher-id']")[0].click()
Here is my code:
#FindBy(xpath = "//input[#id='no-voucher-id']")
private lateinit var selectedNoVoucher: FluentList<FluentWebElement>
selectedNoVoucher.click();
HTML CODE:
<div className="Voucher-container-section" >
<div className="radio-item">
<input type="radio" id="yes-voucher-id" name="voucher" value="Yes"/>
<label For="yes-voucher-id">Yes</label>
</div>
<div className="radio-item">
<input type="radio" id="no-voucher-id" name="voucher" value="No"/>
<label htmlFor="no-voucher-id">No</label>
</div>
</div>
css
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #FFFFFF;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #EE4823;
}
Error Message:
org.openqa.selenium.TimeoutException: Expected condition failed: Element [[ChromeDriver: chrome on Ubuntu] -> xpath: //input[#id='no-voucher-id']] is not clickable (tried for 15 second(s) with 500 MILLISECONDS interval)
I expect the output is the radio button should be clickable

If the element is in the view point then you can use this selector :
I would recommend you to use ID over xpath or any other locator :
for clicking on Yes radio button : yes-voucher-id
#FindBy(id="yes-voucher-id")
var selectedNoVoucher
selectedNoVoucher.click();
Just make sure that the ID should be unique.
You can replace the id for No button in similar way.

Adding Inputs to a Form Dynamically Via Javascript

I'm fixing up a form that had a series of areas with two or three duplicate inputs for things like employer name, position, etceteras. I thought it would be easier to just dynamically add them with an onclick button but I am having two major problems: (1) When the onclick event create a new line of inputs the label attributes seems to abandon their css and (2) When you click into the input of the form the label should raise up, but the inputs no longer raise their respective labels.
My questions are (1) What is required to amend the css to keep the labels relative to their inputs and (2) Why/How are the inputs working in the first level of inputs and then not the second? Also, how can I fix this?
Any help would be great!
I've recreated the problem in a minor way in the code pen below. If you click inside the inputs you'll understand what I mean by "raising."
CodePen Example : http://codepen.io/theodore_steiner/pen/WGOaAR
HTML:
<p class="subtitleDirection">Please list your employment histroy in chronological order, beginning with your current position (Limit of Three)</p>
<div class="clearFix"></div>
<div id="employmentHistory">
<div class="input-group" id="employment-history-1">
<input type="text" name="job_1" />
<label class="schoolBoard">School Board</label>
<input type="text" name="position_1" />
<label class="position">Position</label>
<input type="text" name="years_1" />
<label class="years">Years</label>
<button type="button" id="add_job()" onclick="addJob()" value="+">+</button>
</div>
</div><!--end of employmentHistory Div-->
CSS:
input
{
background: none;
border: 1px solid #21a1e1;
margin: 15px;
margin-top: 25px;
margin-left: 15px;
margin-bottom: 25px;
display: inline-block;
height: 30px;
width: 320px;
float: left;
}
.input-group label
{
position: absolute;
left: 17px;
top: 42px;
font-style: italic;
font-size: 17.5px;
color: #999;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
transition: all 0.2s ease;
}
.input-group input:focus+label,
.input-group input.has-value+label {
top: 20px;
font-size: 12px;
color: #aaa;
}
input:focus,
input:active
{
outline: none;
}
input[type="text"],
input[type="email"]
{
border: none;
border-bottom: 1px solid #b3c1cc;
}
.input-group
{
position: relative;
}
#teaching-experience-years input
{
margin-left: 70px;
}
#teaching-experience-years label
{
left: 421px;
}
#employment-history-1 input
{
width: 220px;
float: left;
}
#employment-history-1 label.position
{
left: 265px;
}
#employment-history-1 label.schoolBoard
{
left: 15px;
}
#employment-history-1 label.years
{
left: 514px;
}
JS:
var i = 1;
function addJob()
{
if( i <= 3 )
{
i++;
var div = document.createElement("div");
div.innerHTML = '<div class="input-group" id="employment-history-1"><label class="schoolBoard">School Board</label><input type="text" name="job_'+i+'"><label class="position">Position</label><input type="text" name="position_'+i+'"><label class="years">Years</label><input type="text" name="years_'+i+'"><button type="button" id="add_job()" onclick="addJob()" value="+"></button></div>';
document.getElementById("employmentHistory").appendChild(div);
}
};

jQuery UI effect "shake" makes div disappear

I have this div ( that contains the content of my website. I would like to make it shake when something doesn't authenticate properly using the jQuery effect.("shake"). However, I can't get it to shake at all. Instead, the div disappears for a period of time and then reappears. This happens regardless of me switching any of the parameters. The only effect that switching the parameter has is changing the duration of the disappearance.
I haven't been able to troubleshoot much (this is literally my first use of jQuery and the only jQuery I anticipate this project utilizing).
The reason the google apps script tag was added (I added it back) is because this project is using Google Apps Script. I'm using it to pull data from a Google Spreadsheet (which avoids paying for and maintaining a database).
The offending jQuery (is currently in the HTML file):
$(document).click(function(){
$("#container").effect( "shake", {times:4}, 1000 );
});
And here's ALL of the code:
function getTournamentInfo(){
google.script.run.withSuccessHandler(setTournamentInfo).grabTournamentInfo()
}
function setTournamentInfo(systemData){
// insert tournament header
var tournamentBanner = document.createElement("h1");
var tournamentBannerText = document.createTextNode(systemData[0]);
tournamentBanner.appendChild(tournamentBannerText);
document.getElementById("container").insertBefore(tournamentBanner,document.getElementById("maindata"));
//create a space
document.getElementById("container").insertBefore(document.createElement("br"),document.getElementById("maindata"));
//insert chamber header
var chamberBanner = document.createElement("h2");
var chamberBannerText = document.createTextNode(systemData[1]);
chamberBanner.appendChild(chamberBannerText);
document.getElementById("container").insertBefore(chamberBanner,document.getElementById("maindata"));
//insert session header
var sessionNumber = document.getElementById("sessionNameNumber");
var sessionNumberText = document.createTextNode(systemData[2]);
sessionNumber.appendChild(sessionNumberText);
}
var ids = [];
var names = [];
var school = [];
function getData(){
google.script.run.withSuccessHandler(setIdData).grabDebaters();
}
function setIdData(systemData){
for (var i=0; i<systemData[0].length-1; i++)
{
ids.push(systemData[0][i]);
names.push(systemData[1][i]);
school.push(systemData[2][i]);
console.log(names[3]);
}
makeRows();
}
function makeClassroom()
{
}
function makeRows() {
for (var i=0; i<ids.length-1; i++)
{
generateDebaters();
}
}
var nameSchoolCounter = 0; // this is used to ensure that all the names are iterated through
function generateDebaters() {
var mainTable = document.getElementById("maindata");
var debaterRow = mainTable.insertRow(-1);
debaterRow.setAttribute("onmouseover","darkenRow(this)");
debaterRow.setAttribute("onmouseout","lightenRow(this)");
var nameCell = debaterRow.insertCell(0);
nameCell.innerHTML = names[nameSchoolCounter];
nameCell.setAttribute("id","debater");
var schoolCell = debaterRow.insertCell(1);
schoolCell.innerHTML = school[nameSchoolCounter];
schoolCell.setAttribute("id","debater");
nameSchoolCounter++;
var speech1Cell = debaterRow.insertCell(2);
speech1Cell.innerHTML = '<input name="Speech 1" placeholder="Enter 1-6">'
var speech2Cell = debaterRow.insertCell(3);
speech2Cell.innerHTML = '<input name="Speech 2" placeholder="Enter 1-6">'
var speech3Cell = debaterRow.insertCell(4);
speech3Cell.innerHTML = '<input name="Speech 3" placeholder="Enter 1-6">'
var ethosCell = debaterRow.insertCell(5);
ethosCell.innerHTML = '<input name="Ethos" placeholder="Enter 1-3">'
var nomCell = debaterRow.insertCell(6);
nomCell.innerHTML = '<input type="checkbox" id="nomBox" name="nom"/>'
}
function darkenRow(row) {
row.style.backgroundColor = "rgba(0,0,0,.6)";
}
function lightenRow(row) {
row.style.backgroundColor = "rgba(0,0,0,0)";
}
function submitProceduresGraphics(){ // this does all the graphical procedures for submitting
// this prevents the divs width and height from disappearing (it's set as display: table in the stylesheet)
var container = document.getElementById("container");
var containerStyle = getComputedStyle(container);
container.style.width = containerStyle.width;
container.style.height = containerStyle.height;
while (container.firstChild) {
container.removeChild(container.firstChild);
}
return submitProcedures();
}
function submitProcedures(){
//incomplete method
return students;
}
//below is what actually runs
getData();
getTournamentInfo();
h1{
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 36px;
color: white;
margin-bottom: 0px;
}
h2{
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 20px;
color: white;
margin-top: 0px;
}
#maindata{
border-collapse: collapse;
border: 0px;
width: 70%;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
color: white;
white-space: nowrap;
}
#maindata td{
margin-left:0px;
margin-right: 0px;
padding: 4px;
border: 0px;
border-image-width: 0px;
}
#maindata td#debater{
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 14px;
}
body{
background: url(https://d3591ee267da5305673fdd35d46a7c93a6509bd1.googledrive.com/host/0B3UFP8Xs5x7WUldKaFZJTjhkbWM);
}
#container {
background-color: rgba(0,0,0,.5);
padding-left: 40px;
padding-right: 40px;
display: table;
margin: auto;
border-radius: 6px;
position: relative;
top: 100%;
transform: translateY(20%);
}
input {
background-color: none;
}
#nomBox {
margin-top: 2.5px;
margin-bottom: 2.5px;
width: 18px;
height:18px;
}
#sessionName {
float: right;
margin-top: 26.2px;
text-align: center;
font-family: 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px
}
#sessionNameNumber{
color: white;
font-family: 'Lato', sans-serif;
margin-top: 0px;
font-size:66px;
font-weight: 700;
margin-bottom: 4px;
}
/* below here is the CSS for the submit button */
.button {
border: 0 none;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
cursor: pointer;
font-family: Lato,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;;
margin-top: 40px;
padding: 7px 10px;
text-transform: none;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
width: 10%;
/* auto */
text-align: center;
/* DELETE WHEN WIDTH AUTO */
}
.button.green {
background: none repeat scroll 0 0 #46b98a;
color: #FFFFFF;
}
.button.green:hover {
background: none repeat scroll 0 0 #444444;
color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <!-- This has a font called Lato because TNR was hurting my eyes. Btw Google Fonts is awesome !-->
<title>autoTab</title>
</head>
<body>
<div id="container">
<div id=sessionName>SESSION<br><p id="sessionNameNumber"></p></div>
<!-- Right now, this is brining up an unattractive page when submitted. We should get rid of that: https://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/ !-->
<table id="maindata">
<tbody>
<tr>
<td>
Debater Name
</td>
<td>
School
</td>
<td>
<!-- Noice-->
Speech 1
</td>
<td>
Speech 2
</td>
<td>
Speech 3
</td>
<td>
Ethos
</td>
<td>
Nom?
</td>
</tr>
</tbody>
</table>
<div class='button green center' onclick="submitProceduresGraphics()">Submit Scores</div>
<p>
</body>
</html>
<!-- Store data passed to template here, so it is available to the
imported JavaScript. -->
<script>
$( document ).click(function() {
$( "#hello" ).effect( "bounce", "slow" );
});
</script>
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->

top: 100% applied to #container is causing your problems. Removing the style doesn't seem to have any effects, so I removed it.
Explanation: When jQuery UI creates the shake effect, it first wraps your element in a div.ui-effects-wrapper, which is a relatively positioned element and copies any position styling (such as top) from your element. It then places your element, stripped of its original position styling, inside of this div, and animates a shake by adjusting its left CSS property. In your case, you had top: 100% applied to your container. When jQuery placed your element inside of its effect-wrapper, the wrapper had both position: relative and top: 100%, which placed your element, the container, off the bottom edge of the screen, out of view. Play around with setting your container styling to something like top: 20px and see the effect this has.
Hope I helped!