How to set heights of columns equal? - javascript

I am using Gentelella bootstrap template and I have a problem with the height of one of my panels.
The problem is that the left x_panel has smaller height than the right one. The different between these panels is that the left one contains svg element, while the right one contains canvas with chart.js. How can I set the heights equal?
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart<small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<svg class="company"></svg>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart <small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
</div>
</div>
UPDATE:


Using your code
.row {
display: flex;
justify-content: space-around;
width: 100%;
}
.row>div {
background-color: lightblue;
border: thin solid black;
}
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart<small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<svg class="company"></svg>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart <small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
</div>
</div>


Try this
fiddle link with your code
You also use
.child {
width:50%;
border: 1px solid;
}
.box {
display: flex;
width: 100%;
}
.child {
flex: 1 0 50%;
/*width:50%;*/ /* You can use width instead of flex */
border: 1px solid;
}
<div class="box">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea temporibus officia vel, placeat quisquam ipsum a perspiciatis ex sit nobis adipisci ab ipsam vitae esse fugit accusamus eum iure provident.
</div>
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore nihil
</div>
</div>
With Bootstrap and your code.
.box {
display: flex;
width: 100%;
}
.child {
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="box">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="child">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart<small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<svg class="company"></svg>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="child">
<div class="x_panel">
<div class="x_title">
<h2>Title of the chart <small>Sub-title</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
</div>
</div>

Related

Trying to make the bootstrap navbar sticky with jQuery

I was trying to make my navbar sticky with jqueries the style of the className ".sticky" is in the css/styles.css folder
i am unable to achieve the sticky nav function... I don't know what I am doing wrong in my main.jss file
//html file ------->
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header class="masthead head" style="background-image: url('./images/back.jpg ');">
<!-- <div class="container-fluid p-0"> -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="#"><img src="images/brand.png" alt="brand"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-regular fa-align-right"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- <div class="mx-auto"></div> -->
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- <div class="container">
<button type="button" class="btn btn-outline-dark btn-lg ticket">
<i class="fa-solid fa-ticket"></i>
<span>Tickets</span></button>
</div> -->
<div class="container ticket"><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div class="container text-center">
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div class="row">
<!-- CAPTION TEXT -->
<div class="col-md-6 col-sm-12">
<span class="top">Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div class="col-md-6 col-sm-12 h-25">
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section class="experience">
<div class="container align-center">
<h2>The Experience</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/relax.jpg" alt="couples enjoying a drink">
</div>
</div>
<h2>The Culture</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bubble">
<div class="col-md-6 col-sm-12">
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/masqu.jpg" alt="masqueraders paroding the streets">
</div>
</div>
<h2>The Arts</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/art.jpg" alt="arts">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/creativity.jpg" alt="arts">
</div>
</div>
<h2>The River</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div class="container">
<h2>Media Partners</h2>
<img class="sponsor_logo" src="images/ghone.png" alt="Gh one Tv">
<img class="sponsor_logo" src="images/4syte.png" alt="4syte tv">
<img class="sponsor_logo" src="images/gbafrica.png" alt="Gb Africa">
<img class="sponsor_logo" src="images/kobby.png" alt="kobby kyei">
<img class="sponsor_logo" src="images/sheldon.png" alt="Kwadwo sheldon">
<img class="sponsor_logo" src="images/ronnie.png" alt="Ronnie is everywhere">
<img class="sponsor_logo" src="images/sammykay.jpg" alt="sammy kay">
<img class="sponsor_logo" src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div class="container">
<h3>Locate Us</h3>
<div class="gmap_canvas">
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp%20tsatse%20resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
<div class="container text-center">
<!-- ABOUT CONTENT -->
<div class="about-content text-right">
<h2>About RiverFest</h2>
<p class="pt-4">RiverFest22” is an annual festival curated to celebrate and propagate the
socioeconomic and cultural affairs of Ghana. It aims at creating a networking and
entertaining environment for all our revelers. Our target is the energetic individual
who wants to experience nature whiles having fun.This maiden edition will be organized
in Ada Foah at the Camp Tsatse Resort. The Resort is located on the amazing banks of the
Volta River.</p>
<p class="pt-4">#RiverFest22, which is also themed “The Ada Calypso”, is a 3-day fun-packed
event, which is scheduled to take place from Friday, 16 to Sunday, 18 December 2022. The
festival is designed to have an action-packed programme of activities with exciting
exhibitions of talents and products from vendors.</p>
<p class="pt-4">
The event promises patrons with an amazing experience of art and creativity from the
local creative and art industry and a taste of calypso in the Ghanaian environment.
There will be a street carnival with samba dancers and masquerades from the town to the
event venue. There will also be a special canoe boat race on the river to help promote
the need to protect the water bodies as well as create an ecological awareness of the
place.
</p>
<p class="pt-4">
The festival is set for both residential and non-residential participation. Residential
patrons arrive on Friday and leave on Sunday. All non-residential revelers will be
welcome on Saturday for the full day event.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER SECTION WITH CONTACTS AND COPYRIGHT -->
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<!-- FIRST COLUMN -->
<div class="col-md-5 col-md-5">
<h2 class="text-light">Presented By</h2>
<img class="footer_image" src="images/riverfest.png" alt="RiverFest logo">
<p class="pt-4 text-muted">
All rights reserved © Copyright 2022 Developed by <span>WolfeTech Devs Inc.</span> | Powered by
<span>Lono Concepts</span>
</p>
</div>
<!-- SECOND COLUMN -->
<div class="col-md-5">
<h4 class="text-light">Tickets Available On sale</h4>
<a class="ticket-image" href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div class="col-md-2">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let's go social</p>
<div class="column">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fa-brands fa-tiktok"></i>
<i class="social-icon fa-brands fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<!-- JQUERY PLUGIN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Personal JAVASCRIPT -->
<script src="js/main.js"></script>
</body>
//CSS FILE --------------->
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
section {
overflow-x: hidden;
}
:root {
--Slackey: 'Slackey', cursive;
--Rock-Salt: 'Rock Salt', cursive;
--light-black: #2e2c2caf;
--bggradient: linear-gradient(to bottom, #FEB101, #FE7435);
--light-gray: rgba(255, 255, 255, 0.877);
}
header {
opacity: rgba(0, 0, 0, 0.2);
}
/* NAVBAR STYLES */
header .navbar a {
font-family: var(--Slackey);
font-size: 0.9em;
color: black;
}
.masthead {
background-size: cover;
min-height: 100vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
header .nav-item:last-child {
padding-right: 5.5em;
}
header .nav-item {
padding: 1.5em;
}
header .navbar-brand {
padding-left: 3rem;
}
header .navbar .navbar-brand img {
width: 40%;
}
.ticket img{
width: 30%;
}
.ticket i {
padding-right: 0.1rem;
}
header .nav-link:hover {
color: whitesmoke;
}
header .nav-link {
transition: all 0.3s ease-in-out;
}
.ticket span {
font-family: var(--Slackey);
}
header .row .col-md-5 {
padding: 4.2vmin 1vmin;
}
header .row .col-md-6 {
padding: 22vmin 1vmin;
padding-bottom: 35vmin;
font-family: var(--Rock-Salt);
}
header .row .col-md-5 img {
width: 90%;
}
header .container .col-md-6 span {
padding: 1vmin;
letter-spacing: 4px;
font-size: 3.5vmin;
}
header .container .col-md-6 h1 {
font-size: 8vmin;
font-weight: bold;
padding: 0.1em 0em;
}
/*/*//*/*//* MAINPAGE SECTIONS *//*/*//*/*/
/* EXPERIENCE SECTION */
.experience{
background: linear-gradient(to bottom
white, #FE7435
);
}
.experience .container {
padding: 3% 0%;
}
.experience .col-md-6 img {
opacity: 0.8;
width: 100%;
border-radius: 0.2em;
border: 1px solid #000000;
}
.experience .container h2 {
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 3.5em 0em .5em;
}
/* MEDIA PARTNERS */
#sponsor h2 {
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
.sponsor_logo {
width: 9%;
margin: 30px 20px 50px;
}
#sponsor .container {
padding: 7% 0%;
}
/* ABOUT SECTION */
.about{
padding: 8vmin 0;
}
.about .container .about-content{
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.about .container .about-content h2{
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 1.5em 0em 1.2em;
text-align: center;
}
.about.about-content p{
font-size: 0.9em;
color: rgba(0, 0, 0, 0.5);
}
/* MAP */
.gmap_canvas {
overflow: hidden;
background: none !important;
}
#map .container h3{
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
/* FOOTER */
footer{
background: rgba(0, 0, 0, 0.815);
overflow-x: hidden;
padding: 14vmin 18vmin;
}
footer h2, h4{
font-family: var(--Slackey);
padding: 20px;
font-weight: bold;
font-size: 1.5rem;
}
footer .column i{
color: #dd2476
}
footer .column i+i{
padding: 0 0.5em;
}
footer p>span a{
text-decoration: none;
}
footer p>span a{
color: #FE7435;
}
/* STICKY CLASS */
.sticky{
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.815);
z-index: 9999;
transition: all 1.5s ease;
}
//MAIN.JS FILE --------------------------->
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});

Maybe you can try with position: sticky;

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.

divs height and width are not fixed in carousel slider

Visit this link for code snippet https://codepen.io/arunkayathi/pen/dRPYzz
html
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<body>
css
#projects {
background-color: #f65d52;
/* background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
js
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
Hello all,
I am having a problem with arranging divs in a carousel slider. As you can see from the above link the position of project title in each slid is changing.So can somebody help me in fixing the width and height of each divs, so that text and images will not overflow and in every slide all divs starts at same position instead of going up or down.

Your images need a fixed height otherwise things will get pushed down or up.
if you can't set a fixed height on the images then I suggest just a fixed position of the project title and description div. Maybe make it absolute of its parent.

Just simply use a fixed height for images:
.project-image img {
width: 100%;
max-width: 480px;
height: 480px;
margin: 0 auto;
}

Try this, set fixed height to your images.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
#projects {
background-color: #f65d52;
/*background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
height: 340px;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>

Add responsiveClass for set all slide responsive.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true,
responsiveClass:true
});
});

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
}

Categories