We Keep Coding

JavaScript Not Manipulating Images

I'm new to Javascript and I have an assignment where I essentially just copied code from the instructions but when I go to run the whole website the JS doesn't do anything.
The objective is to add a click event handler to each of the thumbnail images so that when the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element.
This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image's title attribute. The click event handler will be attached to the <div id="thumbnails"> element and not to the individual <img> elements.
This is what the JS should do:
When you click on one of the thumbnail images, the corresponding larger image is displayed as the main figure.
When you mouse over the main figure, the title should display against a slightly opaque white background and then fades once the mouse pointer is moved off
window.addEventListener("load", function() {
/*Noah Ratcliff*/
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var clickedImageSource = e.target.src;
var newSrc = clickedImageSource.replace("small", "medium");
var featuredImage = document.querySelector("#featured img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
}
});
var featured = document.getElementById("featured");
thumbs.addEventListener("mouseover", function(e) {
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0.80;
caption.innerHTML = document.querySelector("#featured img").title;
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0;
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version">
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>

There are several things that are not right in the code: put the event listener on the thumbs instead of figure, abusing id's for css, using the style javascript instead of adding and removing classes (which makes it harder and is a bad practice in general), using querySelector when there is no need (witch also makes your code harder to read and querySelector is slower than getElementById).
Here is an example which should do what I understand you want. I'm not sure tough if I got the opacity thing right. There you will have to work.
window.addEventListener("load", function() {
/*Noah Ratcliff*/
const thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
const clickedImageSource = e.target.src;
const newSrc = clickedImageSource.replace("small", "medium");
const featuredImage = document.getElementById("featured-img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
featuredImage.alt = e.target.alt
}
});
const featured = document.getElementById("featured");
featured.addEventListener("mouseover", function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.add("captition-hovered");
});
featured.addEventListener("mouseout",function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.remove("captition-hovered");
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
.featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
.captition-hovered {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
padding: 22px 2px 2px 2px;
text-align: center;
position: absolute;
z-index:1;
top: 50%;
opacity: 1;
background: rgba(255,250,240, 0.51);
}
.thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
.thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
.featured {
position: relative;
}
.featured-img:hover {
transition:opacity 1.5s;
opacity: 0.5;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure class="featured" id="featured">
<img class="featured-img" id="featured-img" src="https://www.w3schools.com/css/img_lights.jpg" title="Battle" alt="big version">
<figcaption id="fig-captition">Battle</figcaption>
</figure>
<div class="thumbnails" id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
I also replaced var keyword since now is really indicated to use const and let for your variables.
inline style css link
Also notice how I just added and removed a class instead of manipulating the style one by one. Is way easier to maintain and read. Not to mention that inline styling is overwriting any other type of css. So if you want to change it later the only way is inline styling which can be annoying in certain circumstances.
query selector vs getDocumentById

Adding multiple images randomly with click

I'm trying to build a small game on my website to experiment with JavaScript that adds hotdogs to a bowl in random positions (building a pyramid shaped pile then covering the page).
But I'm not sure how to implement it. 10 hotdogs should go in the bowl, then 50 more should spill onto the 'game board,' then after that they would randomly cover the webpage. Right now I'm just wondering how to add the image elements onclick in random orientations using only HTML, CSS, and JavaScript if possible. Code shown below:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="./resources/images/png/dog.png" alt="">
<img id = 'dogBowl' src="./resources/images/png/dogBowl.png" alt="">
<img class = 'hotdog' src="./resources/images/png/hot-dog.png" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by photo3idea_studio from www.flaticon.com</p>
<p class = 'attribute'>Dog bowl icon made by Good Ware from www.flaticon.com</p>
<p class = 'attribute'>Hotdog icon made by Freepik from www.flaticon.com</p>
</div>
<script src="game.js"></script>
</body>
</html>
CSS:
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
display: none;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
#media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
JavaScript:
let food = 0;
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
}
gameSpace.onclick = upDog;

Welcome, #drewemerine!
Right now I'm just wondering how to add the image elements onclick in random orientations using only HTML, CSS, and JavaScript if possible.
Instead of having an initial hotdog image in the HTML, I created a JavaScript function called makeHotDog() to create a hotdog image on the fly. It utilizes another function which just spits out random coordinates for the image. I hope this helps you out!
let food = 0;
let gameSpace = document.getElementById("gameSpace");
function getRandomPosition(element) {
let x = gameSpace.offsetHeight-element.clientHeight;
let y = gameSpace.offsetWidth-element.clientWidth;
let randomX = Math.floor(Math.random()*x);
let randomY = Math.floor(Math.random()*y);
return [randomX,randomY];
}
function makeHotDog() {
let img = document.createElement('img');
let xy = getRandomPosition(img);
img.setAttribute("src", "https://images.unsplash.com/photo-1515875976234-9d59c3ef288d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
img.setAttribute("class", "hotdog");
gameSpace.appendChild(img);
img.style.top = xy[0] + 'px';
img.style.left = xy[1] + 'px';
}
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
makeHotDog();
}
gameSpace.onclick = upDog;
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
position: relative;
overflow: hidden;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
width: 80px;
position: absolute;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
#media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=660&q=80" alt="">
<img id = 'dogBowl' src="https://images.unsplash.com/photo-1510035618584-c442b241abe7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=80" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by photo3idea_studio from www.flaticon.com</p>
<p class = 'attribute'>Dog bowl icon made by Good Ware from www.flaticon.com</p>
<p class = 'attribute'>Hotdog icon made by Freepik from www.flaticon.com</p>
</div>
<script src="game.js"></script>
</body>
</html>

How to get jQuery to recognize mouse over image once per hover

I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!

In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>

Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}

try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel

Adjust a JS Expand/Collapse function that has a bit of a bump in its fluidity

I've been implementing this awesome JS/Jquery expand/collapse function into a page, but it's got a little kink to it that I'd like to fix.
Specifically, the problem is that when you first click on the link Websites ▾, the menu expands nicely, but just before it's done it has a little jump to it, which I'd like to remove. The jump doesn't occur in the JS Fiddle, nor does it occurr when clicking to expand/collapse after the intial click, so I suspect my CSS might be the issue, but I'm just not sure.
Any help is greatly appreciated. Thanks for your time.
The JS was borrowed from this JS Fiddle
And here's a test page I've published
Additionaly, here's all the code (stripped of some excess content to simplify)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/webfonts.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/expandcollapse.js"></script>
</head>
<div class="container">
<div class="header">
<span>
<p> Websites ▾</p>
</span>
</div>
<div class="content">
<p>Human Rights Symbols</p>
<p>
Cornerstone Parks
</p>
<p>
Eileen Fisher (Video Page)
</p>
<p>
Suzy B Fine Jewelry*
</p>
<p class="para2">Niki International</p>
<p class="para2">Eliza's Eyes</p>
<p class="para2">Fabrikant-Tara</p>
<p class="para2">Branded Jewelry</p>
</div>
</div>
<h2>*To view password-protected links,
please request access by phone or email.
</h2>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.container {
/* Expand Collapse Styling */
width:100%;
}
.container div {
width:100%;
}
.container .header {
cursor: pointer;
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: gray;
}
.container .content {
display: none;
}
#LightSlateGrayBar {
/* Color: LightSlateGray, #778899, hsl(210, 22%, 60%) */
width: 100%;
height: 30px;
background-color: rgba(119, 136, 153, 0.95);
}
.TopBar {
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}
.BottomBar {
position: fixed;
bottom: 0;
left: 0;
box-shadow: -3px -3px 3px 0px rgba(0,0,0,0.25);
}
#box {
min-width: 600px;
max-width: 600px;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
text-align: center;
}
p {
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: gray;
}
.para2 {
color: LightGray;
}
.paraBlue {
font-size: 18px;
color: #25438d;
margin-top: 26px;
}
h1 {
font-family: 'rokkittregular', arial, helvetica, sans-serif;
font-size: 42px;
color: #25438d;
margin-bottom: -20px;
}
.hyphen {
font-size: 34px;
letter-spacing: -2px;
}
h2 {
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: .5px;
line-height: 12px;
color: gray;
}
a:link {
transition: all 1s linear 0;
transition-timing-function: ease-in;
text-decoration:none;
color: gray;
}
a:visited {
text-decoration:none;
color: #8F8F8F;
}
a:hover {
text-decoration:underline;
color: black;
}
a:active {
text-decoration:none;
color: lightGray;
}
.heading {
cursor: pointer;
position: relative;
}
JS
// JavaScript Document
$(function() {
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.html(function () {
//change text based on condition
return $content.is(":visible") ? "Websites ▴" : "Websites ▾";
});
});
});
});

Initially the content inside your div#header is
<div class="header">
<span>
<p> Websites ▾</p>
</span>
</div>
From the first toggle onwards it'll change to
Websites ▾ // only the arrows character codes changes on further clicks, structure is same
without <span> and <p> elements, causing a difference in size, which in turn causes the jump. Returning the proper html content as the initial state like
return $content.is(":visible") ? "<span><p> Websites ▴</p></span>" : "<span><p> Websites ▾ </p></span>";
or changing the content initially to
<div class="header">
Websites ▾
</div>
Should fix the problem..