We Keep Coding

The first slide in GlideJS is flashing

When changing slides in the slider with some periodicity, the first slide flashes when changing from the first to the last slide.
The bug only appears in Chrome. I noticed that if you minimize the browser window and then maximize, then the bug appears more often ( but this is not certain :) ).
The solution from https://github.com/glidejs/glide/issues/300 doesn't help!
I put together a small demo: https://codepen.io/depressingutopian/pen/jOwvpGQ?editors=1111
const initCarousel = () => {
const slides = document.querySelectorAll('.glide__slide');
if (slides.length) {
const sliderConfiguration = {
gap: 0,
type: 'carousel',
autoplay: '1000',
animationDuration: '500',
hoverpause: false,
keyboard: true,
animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
swipeThreshold: 0,
dragThreshold: false
};
const slider = new Glide('.map-banner', sliderConfiguration);
slider.mount();
}
}
initCarousel();
.section-default {
height: 100%;
width: 100%;
background-color: #f5f5f5;
padding: 0;
margin: 0;
font-family: 'FiraSans';
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
min-width: 320px;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: none;
}
.layout {
height: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.layout__content {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mb-p, .mb-sm {
margin-bottom: 1.5rem;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
margin-bottom: 0px;
}
.color-common {
color: #424242;
}
body, html {
font-family: 'FiraSans';
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
-webkit-text-size-adjust: none;
}
html {
font-size: 16px;
}
ul {
list-style-type: none;
font-size: inherit;
color: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.map-banner {
margin: 1.5rem auto 0;
width: 79rem;
cursor: default;
}
.glide--swipeable {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.glide {
position: relative;
box-sizing: border-box;
}
.map-banner .glide__slide_narrow {
padding: 0 1.5rem;
}
.map-banner .glide__arrow {
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
.map-banner .glide__arrow_prev {
left: -5px;
transform: translateY(-50%) rotate(90deg);
}
.map-banner .glide__arrow_next {
right: -5px;
transform: translateY(-50%) rotate(270deg);
}
.map-banner .glide__arrow-img {
width: 2rem;
height: 2rem;
}
.map-banner .map-banner__transfer {
img {
height: 12rem;
}
}
.slider {
img {
width: 100%;
}
}
.map-banner__main {
display: flex;
width: 100%;
height: 24rem;
background-repeat: no-repeat;
background-size: cover;
}
.glide__track {
margin-left: 12px;
margin-right: 12px;
}
.map-banner__main_0 {
background-image: url('https://i.imgur.com/gleemJV.png');
}
.map-banner__main_1 {
background-image: url('https://i.imgur.com/oF41CCc.png');
}
.map-banner__main_2 {
background-image: url('https://i.imgur.com/oEVQL4F.png');
}
// Flickering bug fix (Attempt)
.glide__slide--active {
z-index: 1;
}
<link rel="stylesheet" href="https://unpkg.com/#glidejs/glide#3.3.0/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/#glidejs/glide" type="text/javascript"></script>
<div class="section-default platform_unknown">
<div class="layout layout_full_height color-common">
<div class="layout__content">
<section class="mb-sm mb-mob-none">
<div class="glide map-banner">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide slider">
<img class ="map-banner__main" src="https://i.imgur.com/gleemJV.png"/>
</li>
<li class="glide__slide slider">
<img class ="map-banner__main" src="https://i.imgur.com/oF41CCc.png"/>
</li>
<li class="glide__slide slider">
<img class ="map-banner__main" src="https://i.imgur.com/oEVQL4F.png"/>
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
I would be grateful to everyone who can help fix this bug.

The solution is to add z-index:1 in the active slide.
.glide__slide--active{z-index: 1;}

How to show text on an image? (code is in question)

I am trying to learn coding in my freetime and have run into an issue. I am trying to have 'contact info' to be a on hover on profile picture so that it shows a way to contact me via phone, email, and shows my name. I'm hoping someone can help with this please.
Cut most of the HTML code in the process to allow post
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='Profile.jpg' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>

You've missed ; after top: 30%; in CSS #contactInfo class
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%; /* missed ; */
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h50-n-l50-sg-rj' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>

Make selected text bold/unbold with jQuery

I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});

After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
#extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
#extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
</i>
</i>
</i>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.

execCommand is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");

How to make a background color white on drop down

Hi guys i am using this codepen as an example on mysite. My question is, on the fifth panel is possible to make the drop down box when u click on it a different color?
Html:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Source+Code+Pro' rel='stylesheet' type='text/css'>
<div class="patch-container">
<div class="patch-item patch-button" data-patch-panel="1">One</div>
<div class="patch-panel" data-patch-panel="1">One</div>
<div class="patch-item patch-button" data-patch-panel="2">Two</div>
<div class="patch-panel" data-patch-panel="2">Two</div>
<div class="patch-item patch-button" data-patch-panel="3">Three</div>
<div class="patch-panel" data-patch-panel="3">Three</div>
<div class="patch-item patch-button wide" id="js-four" data-patch-panel="4">Four</div>
<div class="patch-panel" data-patch-panel="4">Four</div>
<div class="patch-item patch-button wide" id="js-five" data-patch-panel="5">Five</div>
<div class="patch-panel" data-patch-panel="5">Five</div>
</div>
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
-webkit-appearance: none;
}
body {
height: 100%;
background-color: #22313F;
font-family: 'Open Sans';
-webkit-font-smoothing: subpixel-antialiased;
}
/********************************
Plugin Hero Example
********************************/
.patch-button {
color: #FFF;
cursor: pointer;
font-size: 1em;
font-size: 1.5em;
letter-spacing: 0;
line-height: 150px;
}
.patch-button:hover {
border: solid 3px #FFF;
line-height: 144px;
}
.patch-container {
background-color: #2C3E50;
border-radius: 5px;
color: #FFF;
margin: 4%;
overflow: auto;
padding: 2%;
position: relative;
text-align: center;
zoom: 1;
max-width: 1000px;
}
.patch-item {
background-color: #FFF;
border-radius: 4px;
float: left;
height: 150px;
margin: 0 0 2% 0;
width: 100%;
}
.patch-panel {
background-color: #FFF;
border-radius: 4px;
color: #FFF;
display: none;
float: left;
font-size: 1.5em;
height: 250px;
line-height: 250px;
margin: 0 0 2% 0;
width: 100%;
}
[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
background: #F5AB35;
}
[data-patch-panel='2'],
[data-patch-panel='6'],
[data-patch-panel='9'] {
background: #00B16A;
}
[data-patch-panel='3'],
[data-patch-panel='7'],
[data-patch-panel='10'] {
background: #E74C3C;
}
[data-patch-panel='4'],
[data-patch-panel='8'],
[data-patch-panel='12'] {
background: #3498DB;
}
/********************************
Media Queries
********************************/
#media only screen and (min-width: 550px) {
h2 {
font-size: 3.3rem;
}
.patch-item {
margin: 1%;
width: 48%;
}
.patch-panel {
margin: 1%;
width: 98%;
}
.components {
margin: 1.5%;
width: 46%;
}
}
#media only screen and (min-width: 992px) {
.patch-container {
margin: 4% auto;
}
.patch-item {
margin: 0.6667%;
margin: calc(4% / 6);
width: 32%;
}
.patch-panel {
margin: 0.6667%;
margin: calc(4% / 6);
width: 98.6666%;
width: calc(100% - (4% / 6) * 2);
}
.resize {
margin: 50px auto -2%;
}
.wide {
margin: 0.6667%;
margin: calc(4% / 6);
width: 48.6666%;
width: calc(50% - (4% / 6) * 2);
}
.thin {
width: 23.6666%;
width: calc(25% - (4% / 6) * 2);
}
}
So just to explain again, everything works fine. But what i want to happen is on the panel 5. The box it self is fine, but when you click on it, i would like it not to be orange but a different color on the new box which appears. So for the new box to appear, i would like it white with a black border, but i am not sure how
[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
background: #F5AB35;
}
Tried playing with this part, but this affects both boxes.
Thanks for the help

You want to give the panel another class, id or attribute to identify it apart from the panel above it. Something like this:
<div class="patch-panel panel-five" data-patch-panel="5">Five</div>
and then add
.panel-five {
background-color: #FFFFFF;
}
to your CSS

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