We Keep Coding

My Transition property did not working when I click one button from another

Here is the code. where I try to create a restaurant menu page. There are five buttons. Problem is when I click one to another button the .active class transition property does not working. What I did wrong here?
// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);
// selecting all menu button
var allMenu = document.querySelector(".all");
// selecting asian menu item
var asianMenu= document.querySelector(".asian");
// selecting chinese menu item
var chnsMenu = document.querySelector(".chinese");
// selecting desi menu item
var desiMenu = document.querySelector(".desi");
// selecting desert menu item
var desertMenu = document.querySelector(".desert");
// selecting the cuisine DIV
var asianCuisine = document.querySelector(".asian-cuisine");
var chineseCuisine = document.querySelector(".chinese-cuisine");
var desiCuisine = document.querySelector(".desi-cuisine");
var desertCuisine = document.querySelector(".desert-cuisine");
// add eventlister to all the buttons
for (let i=0;i<menuDiv.length;i++){
menuDiv[i].addEventListener("click", function(e){
e.target.preventDefault;
if(e.target == asianMenu){
asianCuisine.classList.replace("hidden" ,"active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
}
if(e.target == chnsMenu){
console.log("Kazi");
chineseCuisine.classList.replace("hidden","active");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == desiMenu){
console.log("Kazi");
desiCuisine.classList.replace("hidden","active");
chineseCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == desertMenu){
console.log("Kazi");
desertCuisine.classList.replace("hidden","active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == allMenu){
console.log("Kazi");
desertCuisine.classList.replace("hidden","active");
chineseCuisine.classList.replace("hidden","active");
desiCuisine.classList.replace("hidden","active");
asianCuisine.classList.replace("hidden","active");
}
})
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* working with the title */
.title{
text-align: center;
font-size: 4rem;
font-family: 'Poppins', sans-serif;
}
.underline{
position: absolute;
width: 600px;
height: 2px;
background-color: black;
left: 50%;
transform: translate(-50%);
}
/* working with the menu buttons */
.menu-btns{
text-align: center;
margin-top: 30px;
}
.menu-btns button{
padding: 10px 20px;
margin-left: 30px;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.menu-btns button:hover{
background-color: chartreuse;
transition: 0.5s ease-out;
}
/* menu display area */
/* .display-Area{
margin-top: 60px;
margin-left: 10%;
display: grid;
grid-template-columns: auto auto;
} */
.display-Area img{
/* border: 1px solid black; */
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: 0px 0px 15px 0px black;
cursor: pointer;
}
.display-Area img:hover{
transform: scale(1.1);
transition: 0.5s ease-out;
}
/* display flex for every cuisine */
.asian-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.chinese-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desi-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desert-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
/* for the javascript manipulation class */
.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine{
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s all ease-out;
}
.hidden{
display: none;
transition: 0.5s all ease-out;
}
<div class="wrapper">
<div class="home-container">
<div class="title">Restaurent Menu</div>
<div class="underline"></div>
<div class="menu-btns">
<button class="all">All Items</button>
<button class="asian">Asian Cuisine</button>
<button class="chinese">Chinese Item</button>
<button class="desi">Desi Item</button>
<button class="desert">Desert Item</button>
</div>
<!-- item display Area -->
<div class="display-Area">
<!-- Asian Cuisine -->
<div class="asian-cuisine">
<div class="asianItem">
<div class="img"><img src="images/asian01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
</div>
</div>
</div>
<!--Chinese Item -->
<div class="chinese-cuisine">
<div class="chineseItem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desi Item -->
<div class="desi-cuisine">
<div class="desiItem">
<div class="img"><img src="images/desi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi03.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desert Item -->
<div class="desert-cuisine">
<div class="desertIitem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
</div>
</div>
</div>

There are some problems with your understanding of a class compared to an element in your javascript code.
You are trying to call javascript functions for an element on a query you made on a class. For example, in the query below, you're returning a class to the variable asianCuisine when you intended to return an element. The "." returns a class and a "#" returns an element. In html, an element's id attribute relates to the "#" and the element's class attribute relates to the "."
var asianCuisine = document.querySelector(".asian-cuisine");
var asianCuisine = document.querySelector("#asian-cuisine");
You must also remove hidden and active attributes at the proper time.
Try the code in the jsfiddle below. It should get you where you need to be for a good start on your project. Please do more research into html classes & ids and also how they related to javascript & css "#" vs. "."
Keep in mind that there are much easier ways to do this but if someone just gives some fancy code you won't learn anything.
Code that works ---> https://jsfiddle.net/larrygrobertson/y52m1ok6/54/
I have modified your code and attempted to keep as much as I could intact.
HTML:
<div class="home-container">
<div class="title">Restaurent Menu</div>
<div class="underline"></div>
<div class="menu-btns">
<button id="all" class="all">All Items</button>
<button id="asian" class="asian">Asian Cuisine</button>
<button id="chinese" class="chinese">Chinese Item</button>
<button id="desi" class="desi">Desi Item</button>
<button id="desert" class="desert">Desert Item</button>
</div>
<!-- item display Area -->
<div class="display-Area">
<!-- Asian Cuisine -->
<div id="asian-cuisine" class="asian-cuisine">
<div class="asianItem">
<div class="img"><img src="images/asian01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
</div>
</div>
</div>
<!--Chinese Item -->
<div id="chinese-cuisine" class="chinese-cuisine">
<div class="chineseItem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desi Item -->
<div id="desi-cuisine" class="desi-cuisine">
<div class="desiItem">
<div class="img"><img src="images/desi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi03.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desert Item -->
<div id="desert-cuisine" class="desert-cuisine">
<div class="desertIitem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* working with the title */
.title {
text-align: center;
font-size: 4rem;
font-family: 'Poppins', sans-serif;
}
.underline {
position: absolute;
width: 600px;
height: 2px;
background-color: black;
left: 50%;
transform: translate(-50%);
}
/* working with the menu buttons */
.menu-btns {
text-align: center;
margin-top: 30px;
}
.menu-btns button {
padding: 10px 20px;
margin-left: 30px;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.menu-btns button:hover {
background-color: chartreuse;
transition: 0.5s ease-out;
}
/* menu display area */
/* .display-Area{
margin-top: 60px;
margin-left: 10%;
display: grid;
grid-template-columns: auto auto;
} */
.display-Area img {
/* border: 1px solid black; */
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: 0px 0px 15px 0px black;
cursor: pointer;
}
.display-Area img:hover {
transform: scale(1.1);
transition: 0.5s ease-out;
}
/* display flex for every cuisine */
.asian-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.chinese-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desi-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desert-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
/* for the javascript manipulation class */
.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine {
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s all ease-out;
}
.hidden {
display: none;
transition: 0.5s all ease-out;
}
JAVASCRIPT:
// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);
// selecting all menu button
var allMenu = document.querySelector("#all");
// selecting asian menu item
var asianMenu = document.querySelector("#asian");
// selecting chinese menu item
var chnsMenu = document.querySelector("#chinese");
// selecting desi menu item
var desiMenu = document.querySelector("#desi");
// selecting desert menu item
var desertMenu = document.querySelector("#desert");
// selecting the cuisine DIV
var asianCuisine = document.querySelector("#asian-cuisine");
var chineseCuisine = document.querySelector("#chinese-cuisine");
var desiCuisine = document.querySelector("#desi-cuisine");
var desertCuisine = document.querySelector("#desert-cuisine");
// add eventlister to all the buttons
for (let i = 0; i < menuDiv.length; i++) {
menuDiv[i].addEventListener("click", function(e) {
//e.target.preventDefault;
if (e.target == asianMenu) {
console.log(asianCuisine);
removeAllActive(asianCuisine);
removeAllHidden(asianCuisine);
asianCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
}
if (e.target == chnsMenu) {
console.log("Kazi");
removeAllActive(chineseCuisine);
removeAllHidden(chineseCuisine);
chineseCuisine.classList.add("active");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == desiMenu) {
console.log("Kazi");
removeAllActive(desiCuisine);
removeAllHidden(desiCuisine);
desiCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == desertMenu) {
console.log("Kazi");
removeAllActive(desertCuisine);
removeAllHidden(desertCuisine);
desertCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == allMenu) {
console.log("Kazi");
desertCuisine.classList.replace("hidden", "active");
chineseCuisine.classList.replace("hidden", "active");
desiCuisine.classList.replace("hidden", "active");
asianCuisine.classList.replace("hidden", "active");
}
})
}
function removeAllActive(e) {
// Get the first sibling to this button
var sibling = e.parentNode.firstChild;
// Loop through each sibling and remove active
while (sibling) {
if (sibling.nodeType === 1 && sibling !== 'elem') {
// Remove active class
sibling.classList.remove("active");
}
sibling = sibling.nextSibling
}
}
function removeAllHidden(e) {
// Get the first sibling to this button
var sibling = e.parentNode.firstChild;
// Loop through each sibling and remove active
while (sibling) {
if (sibling.nodeType === 1 && sibling !== 'elem') {
// Remove active class
sibling.classList.remove("hidden");
}
sibling = sibling.nextSibling
}
}

Problem with Intersection Observer API and Bootstrap

I have a problem with the intersection observer API. I'm trying to trigger an animation when the intersectionRatio is at least 40%, so I'm using the code below:
if(entry.intersectionRatio > 0.40){
DO SOMETHING
}
However I keep getting intersection ratios of "0.0xxxx" or even less at "0.00xxxx". For example right now I'm getting a intersection ratio printed to the console of 0.007672634441405535. I could try to use this values to trigger my animations instead but the value are very unpredictables and also the element never get fully into view since the element never gets a intersectionRatio of 1, even when I can see the element completely, so I want to know where the error is and learn to fix it.I'm using bootstrap and I have deleted the scripts that the framework uses and that have no solved the problem.
Here is the website, the section that I'm talking about is the cards below the "Meet the team" title. Also my script will print to the console the intersection ratio of the cards element when you scroll to that section.
Thank you for you help.
let cards = document.querySelectorAll(".card");
let container = document.querySelector("#cards");
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("The intersectionRatio is: " + entry.intersectionRatio);
if (entry.intersectionRatio > 0.40) {
cards.forEach(card => {
card.classList.add("animate");
});
}
});
});
cards.forEach(card => {
observer.observe(card);
});
html,
body {
font-family: "Poppins", sans-serif;
color: #222;
}
.site-wrapper {
width: 100%;
padding: 0;
margin: 0;
}
/*Navbar*/
#navbar .navbar-brand>img {
height: 3rem;
}
/*End Navbar*/
/*Welcome*/
.welcome hr {
border-top: 2px solid #b4b4b4;
width: 95%;
}
.welcome {
width: 65%;
padding: 3rem;
}
/*End Welcome*/
/*Showcase Icons*/
#showcase .row {
padding: 3rem;
}
#showcase .icon {
padding: 2rem;
}
#showcase .icon {
display: flex;
justify-content: center;
}
#showcase .icon>svg {
height: 6rem;
width: 6rem;
}
#showcase .icon0 {
color: #e54d26;
}
#showcase .icon1 {
color: #563d7c;
}
#showcase .icon2 {
color: #2163af;
}
/*End Showcase*/
/*Section 1*/
#section1 {
padding: 4rem
}
#section1 img {
height: 100%;
width: 100%;
}
#section1 .btn {
margin-bottom: 2rem;
}
/*End Section 1*/
/*Paralax*/
figure {
height: 30rem;
width: 100%;
}
figure .fixed-wrap {
height: 100%;
width: 100%;
}
#fixed {
height: 100%;
width: 100%;
background-image: url(http://lorempixel.com/output/animals-q-c-640-480-4.jpg);
background-attachment: fixed;
background-size: cover;
}
/*End Paralax*/
/*Emoji*/
#emoji-container {
padding: 3rem;
overflow: hidden;
}
#emoji-container .btn {
width: 100%;
}
#emoji img {
width: 200px;
}
#emoji {
overflow: hidden;
}
/*End Emoji*/
/*Section 2*/
/*TODO*/
#section2 {
padding: 2rem;
}
#section2 hr {
border-top: 2px solid #d5d5d5;
width: 75%;
padding: .8rem;
}
#section2 h1 {
padding: 1.5rem;
}
/*End Section 2*/
/*Cards*/
#cards {
padding: 3rem;
}
/*End Cards*/
/*Section 3*/
#section3 {
padding: 3rem;
}
#section3 .row {
padding: 1rem;
}
/*End Section 3*/
/*Social-media*/
#social-media {
padding-bottom: 4rem;
margin-bottom: 3rem;
text-align: center;
}
#social-media h2 {
padding: 2rem;
}
#social-media a {
text-decoration: none;
padding: 3rem;
}
#social-media .icon {
height: 4.5rem;
width: 4.5rem;
display: inline-block;
}
#social-media .icon0 {
color: #3b5998;
}
#social-media .icon1 {
color: #00aced;
}
#social-media .icon2 {
color: #dd4b39;
}
#social-media .icon3 {
color: #517fa4;
}
#social-media .icon4 {
color: #bb0000;
}
#social-media .icon0:hover,
#social-media .icon1:hover,
#social-media .icon2:hover,
#social-media .icon3:hover,
#social-media .icon4:hover {
color: #d5d5d5;
}
/*End Social-media*/
/*Footer*/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
padding-bottom: 1rem;
}
footer a {
color: #d5d5d5;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}
/*End Footer*/
<!DOCTYPE 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>Document</title>
<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">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<link rel="stylesheet" type="text/css" href="Showcase.css">
<link rel="stylesheet" type="text/css" href="Jumbotron.css">
<link rel="stylesheet" type="text/css" href="animation.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<!--Navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light" id="navbar">
Placeholder
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
</ul>
</div>
</nav>
<!--End Navbar-->
<!--Slider-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://lorempixel.com/output/nightlife-q-c-640-480-7.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End Slider-->
<!--Jumbotron-->
<div class="jumbotron">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">A web design agency that allows individuals and organizations to make their brand accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col sm-12 col-md-3 col-lg-3 col-xl-2">
<button class="btn btn-secondary">
Learn more
</button>
</div>
</div>
</div>
<!--End Jumbotron-->
<!--Welcome-->
<div class="container-fluid welcome">
<div class="row text-center">
<div class="col-12">
<h1>Built with ease</h1>
</div>
<hr class="my-4">
<div class="col-12">
<p class="lead">Welcome to my Portafolio website. It is free. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eos itaque velit odit repudiandae!</p>
</div>
</div>
</div>
<!--End Welcome-->
<!--Showcase Icons-->
<div class="container-fluid showcase" id="showcase">
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon0">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" class="svg-inline--fa fa-html5 fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path>
</svg>
</div>
<h2>HTML5</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="bootstrap" class="svg-inline--fa fa-bootstrap fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M292.3 311.93c0 42.41-39.72 41.43-43.92 41.43h-80.89v-81.69h80.89c42.56 0 43.92 31.9 43.92 40.26zm-50.15-73.13c.67 0 38.44 1 38.44-36.31 0-15.52-3.51-35.87-38.44-35.87h-74.66v72.18h74.66zM448 106.67v298.66A74.89 74.89 0 0 1 373.33 480H74.67A74.89 74.89 0 0 1 0 405.33V106.67A74.89 74.89 0 0 1 74.67 32h298.66A74.89 74.89 0 0 1 448 106.67zM338.05 317.86c0-21.57-6.65-58.29-49.05-67.35v-.73c22.91-9.78 37.34-28.25 37.34-55.64 0-7 2-64.78-77.6-64.78h-127v261.33c128.23 0 139.87 1.68 163.6-5.71 14.21-4.42 52.71-17.98 52.71-67.12z"></path>
</svg>
</div>
<h2>BOOTSTRAP</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon2">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="css3" class="svg-inline--fa fa-css3 fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path>
</svg>
</div>
<h2>CSS3</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
</div>
<hr class="my-4">
</div>
<!--End Showcase-->
<!--Section 1-->
<div class="container-fluid section1" id="section1">
<div class="row">
<div class="col-lg-6">
<h2>If you built it...</h2>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat excepturi quibusdam quisquam rerum dolorem nam saepe fuga iusto error nemo? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quia officia delectus aliquid magni assumenda dolorem eligendi, cumque reiciendis, ad incidunt ut fuga expedita commodi dolorum minima. Accusantium maxime, magni necessitatibus
itaque esse modi corrupti, facilis commodi vero ratione illo est neque impedit. Illum, repellat. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolorum placeat quas vel veniam at consequatur libero pariatur? Commodi suscipit accusamus sequi animi excepturi atque esse debitis, ipsam autem in cumque maxime, nesciunt, minus
iusto libero rerum optio eveniet quia eum ullam soluta labore fugiat consequuntur. Neque, tenetur. Excepturi perspiciatis placeat dolorum accusantium molestiae autem eaque ut, sint veniam, iusto qui tempore repellat, optio voluptatem alias
libero eligendi facilis laudantium quam. Error omnis officiis nulla eius at fuga dolorem! Similique facere nesciunt numquam ad distinctio. </p>
<br>
<button class="btn btn-primary">
Learn more
</button>
</div>
<div class="col-lg-6">
<img src="http://lorempixel.com/output/food-q-c-640-480-8.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<hr class="my-4">
<!--End Section 1-->
<!--Paralax-->
<figure id="uno">
<div class="fixed-wrap">
<div id="fixed">
</div>
</div>
</figure>
<!--End Parallax-->
<!--Emoji-->
<div class="container-fluid emoji-container" id="emoji-container">
<button class="btn btn-primary fun" data-toggle="collapse" data-target="#emoji">
Click for fun.
</button>
<div class="collapse" id="emoji">
<div class="container-fluid">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/people-q-c-640-480-4.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg" alt="" class="gif">
</div>
</div>
</div>
</div>
</div>
<!--End Emoji-->
<!--Section 2-->
<div class="container-fluid section2" id="section2">
<div class="row text-center">
<div class="col-12">
<h1 class="display-4">Meet the Team</h1>
</div>
<hr>
</div>
</div>
<!--End Section 2-->
<!--Cards-->
<div class="container-fluid cards" id="cards">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe1</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/technics-q-c-640-480-3.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe2</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-7.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe3</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
</div>
</div>
<!--End Cards-->
<!--Section 3-->
<div class="container-fluid section3" id="section3">
<div class="row">
<div class="col-md-12 col-lg-6">
<h2>Our Philosofy</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, eum saepe? Quisquam, dolores. Consectetur soluta ad voluptatum magnam eveniet ipsa! </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maxime similique culpa doloremque debitis unde accusamus, dolores explicabo laboriosam ratione quos, recusandae doloribus. Voluptates non iusto modi quae quam! </p>
</div>
<div class="col-lg-6">
<img src="img/05.jpg" alt="" class="img-fluid">
</div>
</div>
<hr class="my-4">
</div>
<!--End Section 3-->
<!--Social Media-->
<div class="container-fluid social-media" id="social-media">
<div class="row">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12">
<a href="#">
<div class="icon icon0">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon2">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-plus-g" class="svg-inline--fa fa-google-plus-g fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon3">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon4">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<!--End Social Media-->
<!--Footer-->
<footer>
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/logo.svg" alt="">
<hr class="light">
<p>555-555-555</p>
<p>email#myemail.com</p>
<p>505 Street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday:9am-5pm</p>
<p>Saturday:10am-4pm</p>
<p>Sunday:colsed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Service Area</h5>
<hr class="light">
<p>City, State, 0000</p>
<p>City, State, 0000</p>
<p>City, State, 0000</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© Juan Pedro Erbetta</h5>
</div>
</div>
</div>
</footer>
<!--End Footer-->
</div>
<!-- /.site-wrapper -->
<script src="animation.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

You are missing the OPTIONS for the IntersectionObserver, without that you will be just using the defaults.
See: https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API
So, for your example, try the following:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("The intersectionRatio is: " + entry.intersectionRatio);
if (entry.intersectionRatio > 0.40) {
cards.forEach(card => {
card.classList.add("animate");
});
}
});
}, {
root: null,
rootMargin: '0px',
threshold: 1.0
});
Hope that helps.

Margin Shifting: <ul> jitters when hover function initiated.

This is just a theory based question. I am fairly new to programming and was wondering why this happens within HTML.
I'm making an HTML based resume where when I have a mouse pointer hover over my ul it will activate a function such as this.
$("li#about").hover(function(){
$("#content1").toggle();
});
The Issue While hovering over my selector when my #content was no longer hidden, my margins between my header and ul box would cause jittering within the page.
I went from:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
to:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
</header>
My questions:
What was the reason for the sporadic jittering and how did wrapping my ul within the header tag prevent this from occurring?
Is my solution proper etiquette? If not, what would you recommend?
If you have any good recommendations for coding etiquette please post links in comments.
sing-song Being new, I know my code must look like poo. Regardless I added a fiddle for you.
Thanks for the read! I apologize in advance for the ugly code. I posted a JSFiddle as well, figured it would help any other newbies to conceptualize what i'm asking. This fiddle is without correction Just change the closing header tag to where I specified above to see the results.
My Fiddle: https://jsfiddle.net/dgibbins1/cwn6ws02/4/
header{
background: #5a4c1c;
border-radius:10px;
opacity:0.85;
padding:1px 0;
}
h1{
margin: 0 0;
color: white;
padding-left:10px;
}
h3{
color:#dad6c7;
padding-left: 31px;
}
body{
background:#dad6c7;
}
ul{
list-style-type:none;
padding: 0px 15px;
margin: 50px 0;
}
span{
color:white;
}
li{
font-family:Helvetica;
}
div.column{
border-style:solid;
border-color:rgba(56,43,3,1);
}
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto;
}
.clear-fix{
}
.column li{
padding:4px 0 4px 0;
margin-top:30px;
margin-bottom:30px;
font-family:'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr{
clear:both;
font-size:0;
}
.column{
float:left;
background-size: 220px 220px;
background:#5a4c1c;
padding: 5px 2px;
margin: 10px 10px 0 0;
opacity:0.5;
width: 15%;
border-radius:20px;
}
.column li:hover{
background: black;
border-radius:20px;
}
.content{
color:#5a4c1c;
font-weight: bold;
font-family: helvetica;
width:85%;
}
.footer{
text-align: center;
background:#5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius:10px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<title> Resume: Ryan Anderson</title>
</head>
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content" >
<p>Education <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References <br />
Paul Garven (co-worker): (780)-828-1111<br />
Paul CWC (owner of CWWC): (416)- 721-1111<br />
Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact <br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
<script>
$("li#about").hover(function(){
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();
});
</script>
</body>

You have an error in your CSS.
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto; <--
}
padding doesn't take the value auto.
Switch it to padding-top:3px; padding-bottom:3px; and the jittering will stop.
Link: Working proof

you have some issues with your markup
some of your nesting is applied incorrectly.
in fact i am not even sure i found all the errors
some of your css is incorrect as well
$("li#about").hover(function() {
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();})
header {
background: #5a4c1c;
border-radius: 10px;
opacity: 0.85;
padding: 1px 0;
}
.minheight {
min-height: 200px;
}
h1 {
margin: 0 0;
color: white;
padding-left: 10px;
}
h3 {
color: #dad6c7;
padding-left: 31px;
}
body {
background: #dad6c7;
}
ul {
list-style-type: none;
padding: 0px 15px;
margin: 50px 0;
}
span {
color: white;
}
li {
font-family: Helvetica;
}
div.column {
border-style: solid;
border-color: rgba(56, 43, 3, 1);
}
#content1,
#content2,
#content3,
#content4 {
opacity: 1;
display: none;
padding: 3px auto;
}
.clear-fix {
}
.column li {
padding: 4px 0 4px 0;
margin-top: 30px;
margin-bottom: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr {
clear: both;
font-size: 0;
}
.column {
float: left;
background-size: 220px 220px;
background: #5a4c1c;
padding: 5px 2px;
margin: 10px 10px 10px 0;
opacity: 0.5;
width: 20%;
min-width:134px;
border-radius: 20px;
}
.column li:hover{
background: black;
border-radius: 20px;
}
.content {
color: #5a4c1c;
font-weight: bold;
font-family: helvetica;
width: 85%;
}
.footer {
text-align: center;
background: #5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius: 10px;
clear:both;
}
<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span>
</li>
<li id='education'> <span>Education</span>
</li>
<li id='info'> <span>Experience</span>
</li>
<li id='ref'> <span>References</span>
</li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content">
<p>Education
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References
<br />Paul Garven (co-worker): (780)-828-1111
<br />Paul CWC (owner of CWWC): (416)- 721-1111
<br />Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact
<br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
</body>

Responsive Carousel issue

Can someone explain why my Responsive Carousel isn't working?
Here's my demo: https://jsfiddle.net/9b9mt0ts/
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>Responsive Quote Carousel BS3</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.reactiongifs.com/r/overbite.gif" style="width: 100px;height:100px;">
<!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
</div>
<div class="col-sm-9">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>

Here the console error.
Mixed Content:
The page at 'https://fiddle.jshell.net/9b9mt0ts/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution: Access with "http" instead "https"
Codepen doesn't show an error.

Please add the Carousel js file in header.
http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js
Also check http protocol. If your site is not in https, then use all external link as http

jquery fade toggle div over another div when click?

This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?
My code:
<script>
$(document).ready(function(){
$(".thumbnail").hide();
$(".work").click(function(){
$(".thumbnail").fadeToggle('slow');
});
});
$(document).ready(function(){
$(".person").hide();
$(".about").click(function(){
$(".person").fadeToggle('slow');
});
});
</script>

Try this.
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").hide();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
$(".thumbnail").hide();
$(".person").fadeToggle('slow');
});
});
Updated based on Matthew's comment
Demo here

This is a common problem:
multiple items to display but one of them showing at a time
simple solution is:
hide all elements
show what you want to see
in this way, you cover all possible solutions, even display nothing, where you skip second phase
in your case:
function hideAll(){
$(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}
$(document).ready(function(){
$(".work").click(function(){
hideAll();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
hideAll();
$(".person").fadeToggle('slow');
});
hideAll();
});

This is something very easy to complete, its best to use the same click event names with the divs you want to open so it can be modular.
There are some slight amendments to your HTML as well as a big change in the JS but it will work with as many sections as you like now without having to continuously add new click() functions.
$(document).ready(function() {
$('section').hide();
$(".btn").click(function() {
$('section').fadeOut('1000');
$('section#'+$(this).attr('id')).delay('1000').fadeIn();
});
});
/* CSS Document
html {
background: url(green.jpg) no-repeat center center fixed;
background-size: cover;
}
*/
body {
font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */
.btn {
cursor: pointer;
margin: 10px;
text-decoration: none;
padding: 10px;
font-size: 14px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
}
.btn:hover {
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.contact {
color: #000;
}
.contact:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.about {
color: #000;
}
.about:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.work {
color: #000;
}
.work:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
}
.buttons {
padding-top: 30px;
text-align: center;
position: absolute;
top: 50px;
left: 100px;
}
.title,
.subtitle {
font-family: 'Wire one';
font-weight: normal;
font-size: 5em;
margin-bottom: 15px;
text-align: center;
}
.subtitle {
line-height: .9em;
font-size: 5.5em;
margin-top: 0;
margin-bottom: 40px;
}
.tagline {
font-size: 1.4em;
line-height: 1.3em;
font-weight: normal;
text-align: center;
}
.thumbnail {
background-color: rgba(255, 255, 255, .2);
border: 0 none;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.thumbnail .caption {
color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="btn" id="about">About</a>
<a class="btn" id="work">My Work</a>
<a class="btn" id="contact">Contact</a>
</div>
<!-- Main (Home) section -->
<section class="section" id="about">
<div class="container">
<div class="person" style="display: block;">
<div class="row">
<div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">
<!-- Site Title, your name, HELLO msg, etc. -->
<h1 class="title">Welcome!</h1>
<h2 class="subtitle">My name is Daniel Adamek</h2>
<!-- Short introductory (optional) -->
<h3 class="tagline">
I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
Currently, I am looking for any kind of job in IT field.<br>
Please, check out my work and feel free to contact me :)
</h3>
<!-- Nice place to describe your site in a sentence or two -->
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
</section>
<!-- Third (Works) section -->
<section class="section" id="work">
<div class="container">
<div class="thumbnail" style="display: block;">
<h2 class="text-center title">More Themes</h2>
<p class="lead text-center">
Huge thank you to all people who publish
<br>their photos at Unsplash, thank you guys!
</p>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
</div>
</div>
</section>
If you do want to keep your HTML the exact same, try this out
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").fadeOut('500');
$(".thumbnail").delay('500').fadeIn('slow');
});
$(".about").click(function(){
$(".thumbnail").fadeOut('500');
$(".person").delay('500').fadeIn('slow');
});
});

function hideAll()
{
$(".hideable").hide();
}
$(document).ready(function(){
hideAll(); // great idea. First hide all then show the correct one.
$(".button").click(function(){
hideAll();
if ($(this).hasClass("work"))
{
$(".thumbnail").fadeToggle('slow');
}
else if ($(this).hasClass("about"))
{
$(".person").fadeToggle('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>
<button class="work button">Work</button>
<button class="about button">About</button>
This example should you give you a start. It attaches a click event to the buttons using the .button class selector. Then it checks if the button has another class and performs the appropiate action.

Your question is not reliant upon jQuery - it is reliant upon CSS and styling those two texts on top of each other. Then you can fade in/out.
What I would suggest trying is wrapping both text inside one div and working with position properties.
ie
HTML
<div class="wrapper">
<div class="thubmnail">Some Thumbnail</div>
<div class="person">Some Person</div>
</div>
CSS
.wrapper {
position: relative;
}
.wrapper div {
position: absolute; //This will position both divs one on top of the other
}