I am trying to make a planner that allows you to select a wallpaper by season. Currently I'm working on fall and if you click on fall, you can see all of the alerts are different (each url from my array is shown). But, when those alerts go away, I see only one wallpaper. I want all of the wallpapers to show up when fall is clicked on not just one (so user can see all options). I want them to be in a grid view (similar to a photo gallery on iPhones but have the images a little spread out). I'm confused on what I'm doing wrong because the alerts show all url's so I'm not sure if they images are over top of each other. I tried adding margin but that didn't work either.
Here is my code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>
<body>
<header>PLANNER</header>
<div id="menu">
<button id="fall" onclick="seasonFall()">FALL</button>
<button id="spring" onclick="seasonSpring()">SPRING</button>
<button id="summer" onclick="seasonSummer()">SUMMER</button>
<button id="winter" onclick="seasonWinter()">WINTER</button>
<button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>
</div>
<script>
var fall = [
"https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
function seasonFall() {
for (var i = 0; i < fall.length; i++) {
var test = document.createElement('div');
test.id = "test";
test.innerHTML = document.body.style.backgroundImage = "url('" + fall[i] + "')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "300px 300px";
document.body.style.margin = "30px";
alert(test.innerHTML);
}
}
function defaultButton() {
document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
}
</script>
<style>
/* PLANNER HEADER AT TOP */
header {
font-family: 'Marvel', sans-serif;
text-align: center;
font-size: 100px;
margin: 0px;
}
/* WALLPAPER MENU */
#menu {
font-family: 'Marvel', sans-serif;
text-align: center;
background-color: rgba(255, 255, 255, 0.6);
font-size: 100px;
float: left;
height: 100%;
margin: 0px;
grid-area: menu;
}
/* SEASON BUTTONS */
button {
font-size: 16px;
text-align: center;
font-family: 'Marvel', sans-serif;
font-weight: bold;
height: 25px;
display: block;
margin: 20px;
width: 160px;
}
</style>
</body>
</html>
I found similar questions but they used other languages:
Load images in grid view from Url (Java)
get image url from array (Php)
The problem is that you are overwriting the background image of the document body in every iteration in the method seasonFall.
Please, try something like this:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>
<body>
<header>PLANNER</header>
<div id="menu">
<button id="fall" onclick="seasonFall()">FALL</button>
<button id="spring" onclick="seasonSpring()">SPRING</button>
<button id="summer" onclick="seasonSummer()">SUMMER</button>
<button id="winter" onclick="seasonWinter()">WINTER</button>
<button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>
</div>
<div id="wrapper">
</div>
<script>
var fall = [
"https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
function seasonFall() {
for (var i = 0; i < fall.length; i++) {
// Please, excuse the code, is just for give you the idea
// Ideally you must use CSS to set as much of these properties as
// you can once you have a clear idea of how to organize your grid
var test = document.createElement('div');
test.id = "test" + i;
test.style.backgroundImage = "url('" + fall[i] + "')";
test.style.backgroundPosition = "center center";
test.style.backgroundRepeat = "no-repeat";
test.style.backgroundSize = "300px 300px";
test.style.margin = "30px";
test.style.width = "300px";
test.style.height = "300px";
wrapper.appendChild(test);
}
}
function defaultButton() {
document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
}
</script>
<style>
/* PLANNER HEADER AT TOP */
header {
font-family: 'Marvel', sans-serif;
text-align: center;
font-size: 100px;
margin: 0px;
}
/* WALLPAPER MENU */
#menu {
font-family: 'Marvel', sans-serif;
text-align: center;
background-color: rgba(255, 255, 255, 0.6);
font-size: 100px;
float: left;
height: 100%;
margin: 0px;
grid-area: menu;
}
/* SEASON BUTTONS */
button {
font-size: 16px;
text-align: center;
font-family: 'Marvel', sans-serif;
font-weight: bold;
height: 25px;
display: block;
margin: 20px;
width: 160px;
}
#wrapper {
margin-left: 200px;
}
</style>
</body>
</html>
The idea is create a series of div elements and set the background properties of them.
You can organize these divs in a grid with the number of columns and rows that you consider appropriate, for instance, just including further loops in the seasonFall method and adjusting the margin and position of them.
Related
I am creating an Etch-A-Sketch project as part of The Odin Project's foundations course. I have created a 16x16 grid, and the amount of cells in the grid will change depending on the user's input to a prompt.
My problem is that the amount of cells in the columns will change, but not the amount of cells in the rows. This results in the etch-a-sketch pad being made up of rectangles rather than evenly placed squares.
For example: If the user enters "32", there will be 32 cells in each column. But still only 16 columns. I need the grid to be 32x32 instead of 32x16.
const container = document.querySelector("#container");
const buttonSize = document.querySelector("#gridsize");
const buttonRainbow = document.querySelector("#gridsize");
let cell = document.querySelectorAll('.cell');
let cellAmount = 16;
window.onload = createGrid(cellAmount);
cell.onmouseover = mouseOver();
// creates a 16x16 grid
function createGrid(e){
for (let i = 0; i < e*e; i++){
const div = document.createElement("div");
div.classList.add("cell");
container.appendChild(div);
}
}
// changes cell colors to black on mouseover
function mouseOver(){
let cell = document.querySelectorAll('.cell');
cell.forEach((cell) => {
cell.addEventListener('mouseover', function(){
cell.style.background = "black";
})
})
}
// resizes the grid and resets sketch
buttonSize.addEventListener('click', () => {
for (i = 0; i < cell.length; i++){
cell[i].style.removeProperty("black")
}
let userAmount = prompt("Select your pixel size (Default: 16)");
if (userAmount == ""){
userAmount == 16;
}
while (parseInt(userAmount) < 4 || parseInt(userAmount) > 100){
userAmount = prompt("Sorry, please enter a number between 4 and 100.");
}
cellAmount = parseInt(userAmount);
while (container.hasChildNodes()){
container.removeChild(container.firstChild);
}
createGrid(cellAmount);
mouseOver();
});
#container {
margin-top: 25px;
display: inline-grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: auto;
border: 7.5px solid black;
border-radius: 10px;
height: 575px;
width: 575px;
box-sizing: border-box;
}
.cell {
border: 1px solid black;
box-sizing: border-box;
}
#title {
display: flex;
background-color: crimson;
justify-content: center;
width: 270px;
height: 72px;
margin-left: 815px;
margin-top: 50px;
border-style: solid aqua;
border-radius: 35px;
font-size: small;
}
#buttons {
display: flex;
justify-content: center;
gap: 75px;
margin-top: 40px;
}
#gridsize {
background: black;
color: white;
border: none;
width: 100px;
height: 30px;
font-size: large;
border-radius: 20px;
font-weight: bold;
}
#rainbow {
background: black;
color: white;
border: none;
width: 100px;
font-size: large;
font-weight: bold;
border-radius: 20px;
}
#tipmessage {
text-align: center;
margin-top: 40px;
}
html {
background-color: snow;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Etch-A-Sketch.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="title">
<h1>Etch-A-Sketch. 🖍</h1>
</div>
<div id="buttons">
<button id="gridsize">Size</button>
<button id="rainbow">Rainbow</button>
</div>
<div id="container"></div>
<div id="tipmessage">
<h3><em>'We don't make mistakes, just happy little accidents' - Bob Ross</em></h3>
</div>
</body>
<script src="script.js" defer></script>
</html>
I have tried changing the CSS grid properties for #container however this has not solved the problem. I have inspected my JS but can't seem to figure out if the problem is coming from the JS, or the CSS.
For example, I tried changing my CSS Grid's columns and rows to "auto" but this completely ruined the grid.
The problem is coming from the CSS. This part:
#container{
...
grid-template-columns: repeat(16, 1fr);
...
}
Because the grid-template-columns amount is hard-coded into the style-sheet it will not change with the new grid size received from the user. If the amount of columns is set to, say 33 and then you edit grid-template-columns via browser tools to match 33 then the divs created will appear as squares.
As it is written there must be 16 columns in the grid and no more or less.
So when you call the function that creates the grid you have to edit the grid-template-columns attribute of #container so that the grid-template-columns of the container is updated along with the amount of cells in the grid.
function createGrid(e){
container.style.gridTemplateColumns = `repeat(${e},1fr)` // This will make the divs square
for (let i = 0; i < e*e; i++){
const div = document.createElement("div");
div.classList.add("cell");
container.appendChild(div);
}
}
I'm trying to center a div on my screen by making its position absolute, setting its top value to 50%, and then subtracting the top margin by half of the div's height. I am using offsetHeight, but it seems that the height returned by the offsetHeight property is less than the actual height of the div element. (See screenshot below)
Is there a fix for this? Is there an alternative that I can do instead of this?
Thanks in advance.
The height returned by offsetHeight is 69 px instead of the actual height, which is 328.375px.
// Custom title
let customTitle = document.getElementById("title");
chrome.storage.sync.get("title", (result) => {
customTitle.textContent = result.title;
});
// Centering container
let container = document.getElementById("container");
container.style.marginTop = -container.offsetHeight / 2 + "px";
window.onresize = container.style.marginTop = -container.offsetHeight / 2 + "px";
pre {
color: white;
display: block;
font-family: 'Mulish', sans-serif;
font-weight: 800;
font-size: 96px;
margin-block-start: 0.2em;
margin-block-end: 0.2em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.container {
position: absolute;
top: 50%;
left: 10%;
}
button {
width: 150px;
height: 50px;
border: none;
border: solid 2.7px white;
border-radius: 8px;
background: rgba(168, 166, 166, 0);
font-family: 'Mulish', sans-serif;
font-weight: 600;
font-size: 18px;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="blocked.css">
</head>
<body>
<div id="container" class="container">
<pre id="title"></pre>
<button id="unblockButton">
Unblock
</button>
</div>
<script src="blocked.js"></script>
</body>
</html>
It can be done using styling like this, you don't need to use javascript at all.
.container {
position: absolute;
top: 50%;
transform: translateY(-50%); /* This moves container upword by its half height */
left: 10%;
}
I have some code working to make 2 div tags visible only when another div is clicked (an attempt to make a custom title bar)The 2 divs are invisible initially.
const {remote} = require('electron');
var win = remote.getCurrentWindow();
win.setSize(810,610);
function max(){
var win = remote.getCurrentWindow();
if(win.isMaximized()){
win.unmaximize();
document.getElementById('file').style.right = "744px";
document.getElementById('about_us').style.right = "664px";
}else{
win.maximize();
document.getElementById('file').style.right = "1314px";
document.getElementById('about_us').style.right = "1234px";
}
}
hidden = true;
function get(el){
return document.getElementById(el);
}
function open_file_menu(){
var fileMenu = [get('file_menu'),get('file_menu2')];
if (hidden == false){
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'hidden';
hidden = true;
}
}
else{
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'visible';
hidden = false;
}
}
}
body,html{
width: 47.5pc;
height: 100pc;
overflow: hidden;
-webkit-app-region:drag;
z-index: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
z-index: 1;
}
#container{
width: 100pc;
height: 100pc;
display: block;
position: absolute;
right: 40px;
top: 0;
}
#container nav{
display: grid;
width: 100pc;
height: 2.2pc;
background-color: #333333;
z-index: 1;
}
span{
position: absolute;
top:0;
transform: translateX(100px);
color:#dacbcb;
font-size: 1.5em;
font-weight:bold;
background-color: #222222;
padding-left: 25px;
padding-right: 25px;
padding-top: 7px;
padding-bottom: 6px;
transition: ease-in-out 1ms;
-webkit-app-region:no-drag;
}
#buttons{
position: absolute;
right: 120px;
}
#maximize{
transform: translateX(-124px);
}
#maximize span:hover,#minimize:hover span,.menu1:hover,.menu2:hover{
background-color: #333333;
}
#file{
position: absolute;
right:743px;
}
#about_us{
position: absolute;
right:663px;
#run{
transform: translateY(100px);
}
.menu1{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
.menu2{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
#file_menu{
visibility: hidden;
background-color: #222222;
transform: translateY(34px);
font-size: 1.1em;
}
#file_menu2{
visibility: hidden;
background-color: #222222;
transform: translateY(63px);
font-size: 1.1em;
padding-left: 25px;
padding-right: 17px;
padding-top: 7px;
padding-bottom: 6px;
}
.fm{
z-index: 2;
}
#file_menu:hover,#file_menu2:hover{
background-color: #333333;
}
<!DOCTYPE html>
<html>
<head>
<script src="init.js"></script>
<script src="text_editor.js"></script>
<meta charset="UTF-8">
<title>Extorc App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div onclick="uff()">
<span id = "file_menu" class = "fm">new</span>
</div>
<div>
<span id = "file_menu2" class = "fm">open</span>
</div>
<div id="container">
<nav>
<div id="buttons">
<div id="file" onclick="open_file_menu()">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
</div>
</nav>
</div>
</body>
</html>
The code works ... the menu opens up with 2 divs displaying but the divs are un clickable or probably totally passive (i have set a :hover background color in my css)Though , this problem ends if i open the 2 divs and then maximize the window..then they become interactable and then after minimizing also they work which means the divs are un-interactable initially but then after one maximize , they work...any fix for that....should i not use visibility here?
Edit Not only by fullscreen but also if i resize the window , the buttons start working , and starting the window as fullscreen : true, doesnt make it work
You cannot put all the body as draggable: -webkit-app-region:drag; on body,html
You will have to define a specific area where it defined as draggable.
My recommendation define a specific area / SVG that means drag and don't put clickables on it.
E.g take a look at known electron products (VSCODE, Slack) you have specific regions from which you can drag from.
Hope I have helped.
I have a bar graph created in JavaScript to display values using colors. I am having trouble resetting the bar graph. Basically what needs to happen is when the "reset" button is clicked, all bars clear values and reset to "0". Then the button needs to give the option to "Generate" and the previous values are shown again. Also, this is my first time using constant velocity to ease the bars up and down as the button is clicked to give it a little flair. Not sure what I am missing to have the data clear and be set to zero on the bottom line of the graph while using constant velocity to make it ease down and when button is clicked to restore the values to previous state. Any help is appreciated. Here is the code so far:
HTML
/*
* Some base values.
*/
var millisecondsPerFrame = 30;
/*
* Helper function for managing button event handlers.
*/
var setupButton = function(button, label, onclickHandler) {
button.value = label;
button.onclick = onclickHandler;
button.disabled = false;
};
var startConstantVelocityAnimation = function() {
// Grab the desired velocity.
var velocity = parseFloat(document.getElementById("chart").value);
// Grab the object to animate, and initialize if necessary.
var colors = document.getElementById("colors");
chart.style.bottom = chart.style.bottom || "0px";
// Start animating.
var intervalID = setInterval(function() {
var newBottom = parseInt(box.style.bottom) + velocity;
if ((newBottom < 0) || (newBottom > maxBottom)) {
velocity = -velocity;
} else {
chart.style.bottom = newBottom + "px";
}
}, millisecondsPerFrame);
// Toggle the start button to stop animation.
setupButton(document.getElementById("Reset"), "Reset", function() {
clearInterval(intervalID);
// Toggle the start button to stop animation.
setupButton(document.getElementById("Reset"),
"Generate", startConstantVelocityAnimation);
});
};
window.onload = function() {
// Set up the initial event handlers.
document.getElementById("Reset").onclick = startConstantVelocityAnimation;
};
**
* Graph JS Code ** *
function createBarChart(data) {
// Start with the container.
var chart = document.createElement("div");
// The container must have position: relative.
chart.style.position = "relative";
// The chart's height is the value of its largest
// data item plus a little margin.
var height = 0;
for (var i = 0; i < data.length; i += 1) {
height = Math.max(height, data[i].value);
}
chart.style.height = (height + 10) + "px";
// Give the chart a bottom border.
chart.style.borderBottomStyle = "solid";
chart.style.borderBottomWidth = "1px";
// Iterate through the data.
var barPosition = 0;
// We have a preset bar width for the purposes of this
// example. A full-blown chart module would make this
// customizable.
var barWidth = 48.30;
for (i = 0; i < data.length; i += 1) {
// Basic column setup.
var dataItem = data[i];
var bar = document.createElement("div");
bar.style.position = "absolute";
bar.style.left = barPosition + "px";
bar.style.width = barWidth + "px";
bar.style.backgroundColor = dataItem.color;
bar.style.height = dataItem.value + "px";
bar.style.borderStyle = "ridge";
bar.style.borderColor = dataItem.color;
// Visual flair with CSS Level 3 (for maximum compatibility
// we set multiple possible properties to the same value).
// Hardcoded values here just for illustration; a
// full module would allow major customizability.
bar.style.MozBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
bar.style.WebkitBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
bar.style.boxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
bar.style.MozBorderRadiusTopleft = "8px";
bar.style.WebkitBorderTopLeftRadius = "8px";
bar.style.borderTopLeftRadius = "8px";
bar.style.MozBorderRadiusTopright = "8px";
bar.style.WebkitBorderTopRightRadius = "8px";
bar.style.borderTopRightRadius = "8px";
bar.style.backgroundImage =
"-moz-linear-gradient(" + dataItem.color + ", black)";
bar.style.backgroundImage =
"-webkit-gradient(linear, 0% 0%, 0% 100%," +
"color-stop(0, " + dataItem.color + "), color-stop(1, black))";
bar.style.backgroundImage =
"linear-gradient(" + dataItem.color + ", black)";
// Recall that positioning properties are treated *relative*
// to the corresponding sides of the containing element.
bar.style.bottom = "-1px";
chart.appendChild(bar);
// Move to the next bar. We provide an entire bar's
// width as space between columns.
barPosition += (barWidth * 2);
}
return chart;
};
window.onload = function() {
var colors = [{
color: "red",
value: 40
},
{
color: "blue",
value: 10
},
{
color: "green",
value: 100
},
{
color: "black",
value: 65
},
{
color: "yellow",
value: 75
},
{
color: "purple",
value: 120
},
{
color: "grey",
value: 121
},
{
color: "orange",
value: 175
},
{
color: "olive",
value: 220
},
{
color: "maroon",
value: 275
},
{
color: "brown",
value: 300
},
{
color: "teal",
value: 15
}
];
var chart = createBarChart(colors);
document.querySelector("#wrapper").appendChild(chart); // keeps chart inside wrapper div
};
#wrapper {
margin-left: auto;
margin-right: auto;
width: 85%;
border: groove;
border-color: white;
padding: 2px;
}
#loginwrap {
margin-left: auto;
margin-right: auto;
padding: 3px;
text-align: center;
}
body {
font-family: Georgia;
padding: 10px;
background: #f1f1f1;
font-weight: bold;
}
/* top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* three columns next to each other */
.column1 {
float: left;
width: 30%;
padding: 15px;
height: 300px;
text-align: center;
background-color: #aaa;
}
.column2 {
float: left;
width: 30%;
padding: 15px;
height: 300px;
text-align: center;
background-color: #bbb;
}
.column3 {
float: left;
width: 30%;
padding: 15px;
height: 300px;
text-align: center;
background-color: #aaa;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Card-like background for each section */
.card {
background-color: white;
padding: 30px;
margin-top: 20px;
overflow: auto;
}
/* Align about section image to right */
.aboutimg {
float: right;
}
/* Footer */
.footer {
padding: 20px;
background: #ddd;
margin-top: 20px;
}
.copyright {
margin-right: auto;
margin-left: auto;
width: 85%;
text-align: center;
font-size: 10px;
padding: 5px;
}
/*Chart Color Legend*/
.legend .legend-scale ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.legend .legend-scale ul li {
display: block;
float: left;
width: 50px;
margin-bottom: 6px;
text-align: center;
font-size: 80%;
list-style: none;
}
.legend ul.legend-labels li span {
display: block;
float: left;
height: 15px;
width: 50px;
}
.legend a {
color: #777;
}
.subs {
font-size: 10px;
font-style: italic;
padding: 5px;
text-align: center;
}
.reset-button {
text-align: right;
padding-top: 2px;
padding-right: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System" />
<meta name="author" content="S Morris">
<link rel="stylesheet" type="text/css" href="tissue.css">
<script src="js/animation.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Sales Subscription Dashboard</h2>
<div class="topnav">
Home
Tracker Login
</div>
<div>
<div class="legend">
<div class="legend-scale">
<div class="reset-button">
<input type="button" value="Reset Graph" id="Reset">
</div>
<ul class="legend-labels">
<li><span></span>40</li>
<li><span></span>10</li>
<li><span></span>100</li>
<li><span></span>65</li>
<li><span></span>75</li>
<li><span></span>120</li>
<li><span></span>121</li>
<li><span></span>175</li>
<li><span></span>220</li>
<li><span></span>275</li>
<li><span></span>300</li>
<li><span></span>15</li>
</ul>
</div>
</div>
<div class="legend">
<div class="legend-scale">
<ul class="legend-labels">
<li><span style='background:red;'></span>Jan</li>
<li><span style='background:blue;'></span>Feb</li>
<li><span style='background:green;'></span>March</li>
<li><span style='background:black;'></span>Apr</li>
<li><span style='background:yellow;'></span>May</li>
<li><span style='background:purple;'></span>June</li>
<li><span style='background:grey;'></span>July</li>
<li><span style='background:orange;'></span>Aug</li>
<li><span style='background:olive;'></span>Sept</li>
<li><span style='background:maroon;'></span>Oct</li>
<li><span style='background:brown;'></span>Nov</li>
<li><span style='background:teal;'></span>Dec</li>
</ul>
</div>
</div>
<br><br><br><br>
<hr>
<div class="subs">***Subscribers in Thousands***</div>
<script src="js/subscriptions_graph.js"></script>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
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!