I have the following code
var inter = [];
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")) {
evt.currentTarget.classList.remove("is-active");
} else {
evt.currentTarget.classList.add("is-active");
var elements = document.getElementsByClassName('is-active');
inter = [];
for (var i = 0; i < elements.length; i++) {
inter.push(elements[i].innerHTML)
}
alert(inter);
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));
.tagger1010 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
.tagger1010 span.is-active {
background-color: #008fde;
color: #ffffff;
}
.tagger1010 span:hover {
background-color: #008fde;
color: #ffffff;
}
<div class="tagger1010">
<span>Google</span>
<span>Microsoft</span>
<span>Facebook</span>
<span>LinkedIn</span>
</div>
<div class="as-console-wrapper"></div>
<div class="as-console"></div>
<div class="as-console-wrapper">
<div class="as-console">
</div>
</div>
This code does what I want it to do for now, but I would like to create an element that has an id that stores the value of the "inter" array in the following code. I have never before seen an instance where a single variable has an id that can be referenced elsewhere. So I was wondering if I can put the value of the "inter" array in a div element, or if I can just assign an id to the inter array itself?
Try using the DOM id feature:
document.getElementById("demo").id = "newid";
Reference:
https://www.w3schools.com/jsref/prop_html_id.asp
You cannot assign the id of an HTML node to a JS array, but you can put the contents of an array in to a div and assign an id to that div. You can create the div on the fly in the JS code, or put it directly into your HTML and just fill in the array values and assign the id. Following an example of how to create a div in JavaScript, set an id on it and put the array values into it one by one:
var arr = ["some", "array", "values"];
div = document.createElement("div"); // create a new div
div.id = "someid"; // set the id of the div
for (var item of arr) {
div.innerHTML += "<p>" + item + "</p>"; // put each array item into a separate paragraph in the div
}
document.body.appendChild(div); // append the div with the paragraphs to the document body
#someid {
background-color: yellow;
}
<body>
<p>The array values are displayed below.</p>
</body>
Giving you another option of just using radio button list to render the selectable list. To get the selection, you just read the form field value.
[name="rb-site"] {
display: none;
}
[name="rb-site"] label {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
[name="rb-site"]:checked + label {
background-color: #008fde;
color: #ffffff;
}
[name="rb-site"] + label:hover {
background-color: #008fde;
color: #ffffff;
}
<div class="tagger1010">
<input type="radio" value="google" id="rb-google" name="rb-site">
<label for="rb-google">Google</label>
<input type="radio" value="microsoft" id="rb-microsoft" name="rb-site">
<label for="rb-microsoft">Microsoft</label>
<input type="radio" value="Facebook" id="rb-facebook" name="rb-site">
<label for="rb-facebook">Facebook</label>
<input type="radio" value="LinkedIn" id="rb-linkedin" name="rb-site">
<label for="rb-linkedin">LinkedIn</label>
</div>
So when you want to get the selected radio button and read the variable.
document.querySelctor('name="rb-site"]:checked').value
It is more HTML, but less JavaScript.
Related
I've got a few divs, and it's a dashboard kinda website so I need to update it everyday.
I can manually edit the HTML and all but that's you know...inefficient.
Each div has a ul element in it, and everyday I need to add a few li elements.
I've tried a JavaScript function that appends li elements and I'll add it in the code snippet too. But still, it's kinda temporary because if I delete that line of code in my js file the added li element will also disappear. So I'm looking for a way to append li elements to an unordered list permanently, and it would be nice to have a way to delete them too when they get really old.
function append(ul, data) {
try {
ul.appendChild(document.createElement("li")).innerHTML = data;
} catch (e) {
console.error(e);
console.log("error boi");
}
}
append(document.getElementById("ul-1"), "door")
div {
background-color: cyan;
height: 300px;
width: 500px;
}
<div id="1">
div 1
<br />
<ul id="ul-1">
<li>reeeeeeeee</li>
<li>ramen ramen ramen ramen</li>
<li>..........................</li>
<!-- have to append few li items every day-->
</ul>
</div>
<br>
<div id="2">
div 2
<br />
<ul id="ul-2">
<li>ok</li>
<li>ravioli ravioli ravioli ravioli</li>
<li>..........................</li>
</ul>
</div>
Note ↓:
This piece of code just shows an example of how you can add or remove items easily from and to the lists!
As #Chris G and #L.K. Kabilan mentioned, to store data you either need a Database or in the Local Storage. However, by storing data in the Local Storage you're taking a risk of losing the data because it's stored only in the browser.
// Get the elements
var input = document.getElementById('input');
var btn = document.getElementById('btn');
var select = document.getElementById('select');
var selected = select.options[select.selectedIndex].value;
// Delete the item of the clicked 'X' icon
function delLi(){
var del = document.querySelectorAll('li span');
for (var i = 0; i < del.length; i++){
del[i].addEventListener('click', (e) => {
e.target.parentElement.remove();
});
}
}
// Get the selected option
select.addEventListener('change', () => {
selected = select.options[select.selectedIndex].value;
});
// Wrap the input value in an item and append it to the selected list
btn.addEventListener('click', (e) => {
var val = input.value;
if(val == '' || val.length <= 0){
e.preventDefault();
} else {
var li = `<li><span>×</span><p>${val}</p></li>`;
document.getElementById(selected).innerHTML += li;
delLi();
}
});
delLi();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
background-color: aqua;
width: 500px;
margin: 50px auto;
border-radius: 5px;
padding: 10px;
}
ul {
list-style-type: none;
line-height: 1.5;
}
ul::before {
content: attr(aria-label);
font-weight: bold;
font-size: 20px;
}
li {
display: flex;
align-items: center;
}
li span {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
cursor: pointer;
}
form {
margin: 0 auto;
width: 500px;
background-color: rgb(233, 208, 17);
padding: 10px;
}
#input {
height: 30px;
width: 100%;
border-radius: 5px;
border: none;
padding: 0 10px;
display: block;
margin-bottom: 10px;
}
#btn {
width: 100px;
height: 34px;
background-color: green;
color: white;
border: none;
border-radius: 5px;
display: inline-block;
cursor: pointer;
}
<main>
<div class="wrapper" id="wrapper-1">
<ul id="ul-1" aria-label="List 1">
<li><span>×</span><p>Item 1</p></li>
<li><span>×</span><p>Item 2</p></li>
<li><span>×</span><p>Item 3</p></li>
<li><span>×</span><p>Item 4</p></li>
</ul>
</div>
<div class="wrapper" id="wrapper-2">
<ul id="ul-2" aria-label="List 2">
<li><span>×</span><p>Item 1</p></li>
<li><span>×</span><p>Item 2</p></li>
</ul>
</div>
<form action="">
<input id="input" type="text">
<select name="" id="select">
<option value="ul-1">List 1</option>
<option value="ul-2">List 2</option>
</select>
<input id="btn" type="button" value="Submit">
</form>
</main>
I guess u can use a JSON file to store and retrieve data, or u can go for PHP to get & retrieve data, yet u will be needing a Database, if I'm not wrong, using JSON would be more efficient.(If I'm wrong correct me)
check this link below https://www.w3schools.com/whatis/whatis_json.asp#:~:text=JSON%20stands%20for%20JavaScript%20Object,describing%22%20and%20easy%20to%20understand
Hope this answer helped u.
When selecting "A&L" in the select, the radio group is hidden and its value is set to "n".
I try to trigger the change event so that the "Hello"-div disappears too, but it doesn't work correctly - on debugging I noticed that the change event is executed twice - the first time correctly and then again with the value "j".
What's my mistake?
Here's the full code: https://jsfiddle.net/95Lxroqy/
After I looked through some other questions it seemed to me that .val(['n']).change(); (line 24) should have worked -
but it seems like I'm still missing something.
// find elements
var banner = $("#banner-message");
var button = $("#place");
var langs = $("#langs");
var trans = $("#trans");
var radioGroup = $("input[type=radio][name=translate]");
var div = $("#dynamic");
radioGroup.change(function() {
if (this.value === 'n') {
div.hide();
}
else if (this.value === 'j') {
div.show();
}
});
// handle click and add class
button.change(function(event){
var al = button.val() === "al";
if(al){
langs.show();
trans.hide();
radioGroup.val(['n']).change();
}else{
trans.show();
langs.hide();
}
}).change();
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<select id="place">
<option value="in">Internal</option>
<option value="al">A&L</option>
</select>
<select id="langs">
<option value="volvo">German</option>
<option value="saab">English</option>
</select>
<fieldset id="trans">
<input type="radio" id="n" name="translate" value="n">
<label for="n"> Nein</label>
<input type="radio" id="j" name="translate" value="j">
<label for="j"> Ja</label>
</fieldset>
<div id="dynamic">
Hello
</div>
</div>
val() get/set the value of the element. Your code matches all the options exist in the collection variable, it does not match the specific element you are looking for. You can target the parent element from which you can find the the specific element by using attribute selector.
Try
radioGroup.parent().find('[value=n]').change();
Update: The more feasible solution is using the filter()
radioGroup.filter('[value=n]').change();
On my page, if I change the attributes of an element such as
<div class="showInitially"></div>
by setting
$(".showInitially").hide()
then any elements added dynamically afterwards like
container.append("<div class='showInitially'>text</div>");
do not inherit the changes.
I know I can re-apply all the changes after I add another element but somehow this seems inefficient and hacky, especially if there are a number of changes to styles made. So, is there another way to add elements to the page that will automatically have the inherited style and attribute changes applied to them?
I've tried
container.trigger("create");
but this does nothing. An example is shown in the snippet below:
var container=$("#container");
var buttons = $("button")
var allDivs = $("#container .showInitially")
buttons.on("click", function(){
buttons.addClass("alt");
allDivs.addClass("alt");
allDivs.hide();
addButton();
})
function addButton(){
container.append("<div><button>Change another color</button></div> <div class='showInitially'>text</div>");
}
body {
background: #cccccc;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
div{
color:black;
}
.alt{
background: red;
}
.showInitially{
color:orange;
display:inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
<button>Change color</button> <div class="showInitially">text</div>
</div>
Modify the CSS rule dynamically.
Blatantly ripped off from How do you read CSS rule values with JavaScript? and modify a css rule object with javascript and then cobbled together.
Part of the issue with your code was that your on click only attached the click handler to buttons that already existed. Any new button would not get a click handler, so I moved the handler to the document and added a selector.
var container=$("#container");
var buttons = $("button")
var allDivs = $("#container .showInitially")
$(document).on("click", "button", function(){
buttons.addClass("alt");
allDivs.addClass("alt");
modStyle('.showInitially', 'display', 'none');
//allDivs.hide();
addButton();
})
function addButton(){
container.append("<div><button>Change another color</button></div> <div class='showInitially'>text</div>");
}
function modStyle(className, foo, bar) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
(classes[x].cssText) ? classes[x].style[foo] = bar : classes[x].style[foo] = bar;
}
}
}
body {
background: #cccccc;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
div{
color:black;
}
.alt{
background: red;
}
.showInitially{
color:orange;
display:inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
<button>Change color</button> <div class="showInitially">text</div>
</div>
I've got myself all in a mess. When each of the "..." within the span is clicked, I would like the myDropdown div containing "Report" to be shown next to the span.
Then I would like for when the corresponding Report is clicked to return the id of the "elementid" class in this case either 1 or 2 but I wasn't sure what to put in the reportFunction
<html>
<style>
.dropbtn {
background-color: white;
color: black;
padding: 2px;
font-size: 30px;
border: none;
cursor: pointer;
font-weight: bold;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
font-size:10px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px solid lightgrey;
z-index: 1;
float: left;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1;cursor:pointer;}
.show {display:block;}
</style>
<span class="dropdown">
<button onclick="myFunction()" class="dropbtn">...</button>
<div id="myDropdown" class="dropdown-content">
<a class="elementid" id="1">Report</a>
</div>
</span>
<p>
<span class="dropdown">
<button onclick="myFunction()" class="dropbtn">...</button>
<div id="myDropdown" class="dropdown-content">
<a class="elementid" id="2">Report</a>
</div>
</span>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
var id = document.getElementsByID("id");
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function reportFunction() {
}
</script>
</html>
Something like this should get you the id you want. It goes up to the containing span with parent() and then gets the element with class elementId within.
function reportFunction() {
var id = $(this).parent().find('.elementid');
... //whatever you need to do
}
Your code has other problems though. You have two div elements with the same id myDropdown. Your current code with getElementById will always get the first one. You need to either specify a class and no id on them, and get the right one in the same way as above, or to use one div that you remove and attach to the correct span as needed.
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!