Develop Reference

JQuery & CSS on-screen keyboard not functioning on a remake of HTML

EDIT - Here's what I have: https://codepen.io/anon/pen/wZQjQy
Here's the original: https://codepen.io/anon/pen/YMRLBN
(had to put it on codepen, somehow adding a snippet here doesn't link the css)
I basically copy-pasted a customized on-screen keyboard which worked flawlessly (mostly) but after putting it in a different HTML, it's not working anymore.
keyboard I copied
This is the keyboard, all I really did is replace the characters with Cyrillic and remove the caps, tab, shift and all the "on" spans, since all I really need are the buttons and letters, all capitalized. Now, this worked nicely on my previous build for a page, but the page was inherently flawed by my endless barrage of copy-pasted material and became unfixable at some point, so I started over.
Using some more copy-paste but with Bootstrap now, I built something at least a quarter percent better than my previous mess. But when I imported the on-screen keyboard from the last HTML file, it's now not showing any characters, basically just not working. I really don't know what's going on.
the CSS (I included this because maybe the text is actually being written but just not being shown due to a messy CSS?)
$(function() {
var $write = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').click(function() {
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
$write.html($write.html() + character);
});
});
html {
width: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.maincontainer {
background-image: url(b.png);
background-repeat: repeat-y;
background-position: right;
}
/*head*/
.nav-text {
vertical-align: middle;
color: white;
}
.row {
padding: 15px;
display: flex;
justify-content: center;
}
.back-button {
height: 100%;
}
#backer {
float: left;
width: auto;
}
.red {
background-color: darkred;
}
.header {
text-align: center;
color: white;
font-size: 25px;
float: left;
width: 90%;
}
.uk-icon {
color: white;
}
/*main*/
/* Style the tab */
.tab {
width: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab button {
width: 50%;
background-color: inherit;
float: left;
border: none;
background-color: darkred;
color: white;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
#tabone {
border-top-left-radius: 5px;
border-right: 1px solid white;
}
#tabtwo {
border-top-right-radius: 5px;
border-left: 1px solid white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(80, 3, 3);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(180, 15, 15);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
#London {
text-align: center;
}
#searchbutton {
background-color: darkred;
color: white;
border: 0;
border-radius: 5px;
margin-bottom: 15px;
padding-right: 20px;
}
#write {
width: 90%;
height: 300px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Soyombo_red.svg/300px-Soyombo_red.svg.png) no-repeat scroll 50px 40px;
background-size: 80PX;
padding-left: 50px;
border-radius: 5%;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
font-size: 10vh;
}
#London>.container-fluid>h3 {
margin-top: 5%;
font-size: 4vh;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#keyboard li {
font-size: 30px;
display: inline-block;
margin: 0 5px 5px 0;
width: 5%;
padding: 0;
height: 70px;
line-height: 70px;
text-align: center;
background: #fff;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 7PX;
;
}
#keyboard .delete {
width: 120px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#container.ul {
margin: auto;
float: center;
}
#container-x {
width: 50%;
margin: auto;
}
input[type=submit] {
background: url(http://www.clker.com/cliparts/Y/3/d/w/R/r/search-icon-white-hi.png) no-repeat;
background-size: 25%;
background-position-y: 50%;
background-position-x: 10%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Payment
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/css/index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- My CSS & JS-->
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="maincontainer">
<div class="container-fluid red">
<div class="row">
<div class="col-">
<div class="back-button">
<a id="backer" class="uk-button uk-button-default" href="#"><span uk-icon="icon:arrow-left;"></span><span class="nav-text">Эхлэх</span></a>
</div>
</div>
<div class="col-xl">
<div class="header">
Тээврийн хэрэгслийн торгууль төлөх
</div>
</div>
<div class="col-">
<div class="header">
</div>
</div>
</div>
</div>
<div class="uk-container">
<img style="width: auto;" src="images/logo.png">
<div class="box">
<div class="tab">
<button uk-icon="bus" class="tablinks" id="tabone" onclick="openTab(event, 'London')"><img style="width: 8.7%; margin-right: 10px;" src="images/car.png">ТЭЭВРИЙН ХЭРЭГСЭЛ</button>
<button class="tablinks" id="tabtwo" onclick="openTab(event, 'Paris')"><img style="width: 9.3%; margin-right: 10px" src="images/passport.png">ЖОЛООНЫ ҮНЭМЛЭХ</button>
</div>
<div id="London" class="tabcontent">
<div class="container-fluid">
<h3>АВТОМАШИНЫ УЛСЫН ДУГААР</h3>
<div id="input_container">
<input type="text" id="write" maxlength="7" placeholder="UBA 0000">
</div>
</div>
<div>
<input type="submit" value="Хайх" id="searchbutton" class="uk-button uk-button-default" href="#"></input>
</div>
<div style="width:auto;margin: auto;" id="container">
<ul style="display:table; width:100%;" id="keyboard">
<li class="symbol"><span class="off">1</span></li>
<li class="symbol"><span class="off">2</span></li>
<li class="symbol"><span class="off">3</span></li>
<li class="symbol"><span class="off">4</span></li>
<li class="symbol"><span class="off">5</span></li>
<li class="symbol"><span class="off">6</span></li>
<li class="symbol"><span class="off">7</span></li>
<li class="symbol"><span class="off">8</span></li>
<li class="symbol"><span class="off">9</span></li>
<li class="symbol"><span class="off">0</span></li>
<li class="delete"><span class="delete"><img style="width:50%"
src="https://cdn3.iconfinder.com/data/icons/sympletts-part-1/128/backspace-256.png"></span></li>
<br>
<li class="letter">Ф</li>
<li class="letter">Ц</li>
<li class="letter">У</li>
<li class="letter">Ж</li>
<li class="letter">Э</li>
<li class="letter">Н</li>
<li class="letter">Г</li>
<li class="letter">Ш</li>
<li class="letter">Ү</li>
<li class="letter">З</li>
<li class="letter">К</li>
<li class="letter">Ъ</li><br>
<li class="letter">Й</li>
<li class="letter">Ы</li>
<li class="letter">Б</li>
<li class="letter">Ө</li>
<li class="letter">А</li>
<li class="letter">Х</li>
<li class="letter">Р</li>
<li class="letter">О</li>
<li class="letter">Л</li>
<li class="letter">Д</li>
<li class="letter">П</li><br>
<li class="letter">Я</li>
<li class="letter">Ч</li>
<li class="letter">Е</li>
<li class="letter">Ё</li>
<li class="letter">С</li>
<li class="letter">М</li>
<li class="letter">И</li>
<li class="letter">Т</li>
<li class="letter">Ь</li>
<li class="letter">В</li>
<li class="letter">Ю</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</div>
</div>
</div>
</body>
</html>
When I click on a li element from the keyboard, it's supposed to call that JS, making magic happen. It ain't doing nothing.
My best guess is the "tabs" not being active on form load, since the only real difference is I used bootstrap tabs on the last one but on this one I copied the W3 schools one.

Change your input area with ID "write" into a textarea.
Replace this line:
<input type="text" required="" id="write" maxlength="7" placeholder="UBA 0000">
with this:
<textarea id="write" rows="6" cols="60" placeholder="UBA 0000"></textarea>
Code Pen shows the changed code.

Script works in html, but not externally [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am pretty new to this game, and I am trying to make a website, using new tricks as i go along.
I am coding a set of buttons to instead of going to another page, pop-up (Modal i think its called?)
it works well when i have all the script in HTML but will not work for me when I put the code externally.
ONLY WORKING ON THE ABOUT BUTTON CURRENTLY
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
*
{
margin: 0;
padding: 0;
}
header
{
background-image: url("../images/webBack.jpg");
background-color: powderblue;
height: 100vh;
background-size: cover;
background-position: center;
}
a{
color: black;
}
a:hover{
color:white;
transition-duration: 0.3s;
}
.row{
position: center;
max-width: 95%;
margin: auto;
}
.logo img{
width: 150px;
height: auto;
float: left;
}
.main-nav{
float:right;
list-style:none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.button1 {
background-color: cornflowerblue;
opacity: 0.2;
font-size: 16px;
text-align: center;
padding: 14px 28px;
border: 2px solid black;
transition-duration: 0.2s;
cursor: pointer;
}
.button1:hover{
background-color: cornflowerblue;
color: white;
opacity: 1;
font-size: 18px;
}
.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: aliceblue;
margin-top: 150px;
margin-left: 25%;
padding: 20px;
border: 2px solid whitesmoke;
width: 50%;
height: 50%;
overflow: auto;
}
.close{
color: gray;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body{
font-family: monospace;
}
.Hero{
position: absolute;
margin: 500px;
margin-left: 25%;
margin-top: 0;
pointer-events:none;
}
h1{
color:white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
margin-top: 275px;
}
p{
color: black;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<script src="scripts/main.js"></script>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">&times</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
</body>
</html>
in the snippet it works...
I am using IntelliJ
maybe something in the HTML?
I can't figure it out.

You are referencing your script before the elements exist. Just reference the script after they exist. Try putting your script tag above your end body tag. I tested with your code and this does the job.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">&times</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>
Alternatively, you can tell your JS to execute after the page is ready if you want to leave the script tag where it is. Although this code below may not be completely cross browser compatible, you can also do it with Jquery instead of pure javascript which should defintely be cross browser compatible.
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you decide to include Jquery in your HTML then you can do this.
$( document ).ready(function() {
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you want to try the jquery solution just put this in between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Why are my links at different heights?

I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.

jQuery: How can I hide a category from the Show All option?

I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!

Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.

Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly

Link back out from child HTML loaded in div to parent HTML

I have an id'd part of a child HTML file loaded into the parent HTML's div. I have a button at the top to empty out the child content and return the div to the parent content that was there previously. This is for an image gallery, with a main navigation (parent) and then the detailed view with smaller navigation (child). Here is the parent HTML, index.html (with CSS and JS embedded):
<html>
<head>
<title>Java Factory</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
#container {
width: 1020px;
height: 634px;
}
ul#flavors {
list-style: none;
width: 1020px;
height: 634px;
position: relative;
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li {
position: absolute;
}
.wakey {
width: 309px;
height: 309px;
top: 0px;
left: 30px;
}
.smooth {
width: 309px;
height: 309px;
top: 0px;
left: 355px;
}
ul#flavors li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors li a {
text-indent: -9000px;
}
ul#flavors li a:hover {
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li.wakey a:hover {
background-position: -30px -640px;
}
ul#flavors li.smooth a:hover {
background-position: -355px -640px;
}
#top {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="web">
<div id="top">
</div>
<nav id="container">
<ul id="flavors" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="smooth">Smooth Caffeinator</li>
</ul>
</nav>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
And here is the child HTML:
<html>
<head>
<title>div container switch test</title>
<style type="text/css">
#coffee_return {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wakey">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container1 {
width: 1020px;
height: 624px;
background: url(images/coffee/wakey.jpg) no-repeat 0 0;
}
ul#flavors1 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors1 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors1 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors1 li a {
text-indent: -9000px;
}
ul#flavors1 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors1 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors1 li.smooth a:hover {
background-position: -157px 11px;
}
#coffee_return {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container1">
<ul id="flavors1" class="coffeenav">
<li class="smooth">Smooth Caffeinator</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div id="smooth">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container2 {
width: 1020px;
height: 624px;
background: url(images/coffee/smooth.jpg) no-repeat 0 0;
}
ul#flavors2 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors2 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors2 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors2 li a {
text-indent: -9000px;
}
ul#flavors2 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors2 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors2 li.smooth a:hover {
background-position: -157px 11px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container2">
<ul id="flavors2" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</body>
</html>
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
And the demo for this is: http://mmdsgn.com/divsample/5/ -- You'll see the return button appears at the top when you click either of the first two boxes (only ones that work right now) and I need that graphic button to call up the original div id content in the parent HTML.

Change the path on "href" to "../" instead of "x"
<img src="images/coffee/return_btn.jpg" border="0">
or remove it. Using # is not really recommended since your script looks for the content of href. So leaving it empty would cause the page to refresh? i'm not quite sure but it works.
<img src="images/coffee/return_btn.jpg" border="0">
Edit:
Now that i think about it. The first one would not work on your page since you are in the same folder. ;-)

You'll want to change your original script a bit:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'),
function() {
$('#coffee_return').on('click', function () {
$('#web').load('./ #web');
return false;
});
});
return false;
});
});
</script>
This basically says: After loading a section of coffee.html, look for a coffee_return button and add onclick behavior to re-load the original page into your #web section.
Also, change that href on your coffee_return button to # or JavaScript:void(0); since it's trying to load a document called "x" currently:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>

You cannot use same id on multiple elements, as you said
"
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
". This would give erroneous results. Rather, assign them a class and bind event with their class.