Animation effect for the images - javascript

Is there any way possible to apply animation effect to images in my about section,here is the code:
<div id="about" class="row section bgimg3">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
Here is my link to code pen: https://codepen.io/saisree/pen/WjVjMW
What i want to do is there are three images in my about section,i don't want to display all the three images at a time,i want to appear one by one when i click on about section in header!I want to use animation for this!


I recommend this library https://github.com/michalsnik/aos . Is very simple the implementation and you can get delay for any class.
Example: https://michalsnik.github.io/aos/


there are different ways to implement it, since you are using jQuery, you can try fade in effects, like the example https://codepen.io/RACCH/pen/bRbpwM
adding this event to your about tab, and hiding the circled images
$(".img-circle").hide();
var iteration=1;
$(".1").click(function() {
$('html,body').animate({
scrollTop: $("#about").offset().top},
'slow');
$(".img-circle").hide();
$('#'+iteration+'-img-circle').fadeIn(2000);
if(iteration==3) iteration=1;
else iteration++;
});


Add the following jQuery:
$(".1").click(function() {
$(".col-sm-4.pull-right img:nth-child(1)").hide();
$(".col-sm-4.pull-right img:nth-child(2)").hide();
$(".col-sm-4.pull-right img:nth-child(3)").hide();
$(".col-sm-4.pull-right img:nth-child(1)").fadeIn(2000);
$(".col-sm-4.pull-right img:nth-child(2)").fadeIn(4000);
$(".col-sm-4.pull-right img:nth-child(3)").fadeIn(6000);
});


Add below code.
$('.img-circle').mouseenter(function(){
$(this).animate({
'border-radius': '40%'},
'slow',
function(){
$(this).animate({
'border-radius': '50%'},
'fast');
});
})
This working code will help you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$().ready(function () {
$(".0").click(function () {
$('html,body').animate({
scrollTop: $("#home").offset().top
},
'slow');
});
$(".1").click(function () {
$('html,body').animate({
scrollTop: $("#about").offset().top
},
'slow');
});
$('.img-circle').mouseenter(function () {
$(this).animate({
'border-radius': '40%'
},
'slow',
function () {
$(this).animate({
'border-radius': '50%'
},
'fast');
});
})
$(".2").click(function () {
$('html,body').animate({
scrollTop: $("#family").offset().top
},
'slow');
});
$(".3").click(function () {
$('html,body').animate({
scrollTop: $("#blog").offset().top
},
'slow');
});
$(".4").click(function () {
$('html,body').animate({
scrollTop: $("#testimonial").offset().top
},
'slow');
});
$(".5").click(function () {
$('html,body').animate({
scrollTop: $("#spec").offset().top
},
'slow');
});
$(".6").click(function () {
$('html,body').animate({
scrollTop: $("#contact").offset().top
},
'slow');
});
$(".overlay + img").each(function () {
var w = $(this).css("width");
$(this).prev(".overlay").css("width", w);
});
});
</script>
<style>
#blog a {
color: Bisque;
text-decoration: underline;
}
.bgimg {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A");
background-position: center;
background-size: cover;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3 {
text-color: black;
}
#family h2 {
color: black;
text-decoration: none;
}
#Nav h3 {
color: black;
text-decoration: none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(255, 255, 255, 0.48);
/* background-color: white; */
overflow: hidden;
height: 0;
transition: .5s ease;
}
.ovparent:hover .overlay {
height: 100%;
}
.ovparent {
position: relative;
}
#over {
text-align: center;
}
.bgimg1 {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJRGtOjps8wjohBoCFu3oDrwu4O6RakP9KgUbbBHPdoFb_MuUs");
background-position: center;
background-size: cover;
}
.bgimg2 {
background-image: url("data:image/jpeg;base64,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");
background-position: center;
background-size: cover;
}
.well.first {
background-color: Bisque;
}
.well.second {
background-color: LightGoldenRodYellow;
}
.well.third {
background-color: Thistle;
}
.well.fourth {
background-color: Pink;
}
</style>
</head>
<body>
<div id="Nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://codepen.io/saisree/full/WjVjMW/">Anand Reddy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" ">
<li class="active"><a class="0" href="#home">Home</a></li>
<li><a class="1" href="#about">About</a></li>
<li><a class="2" href="#family" >Meet the family</a></li>
<li>Blog</li>
<li >Testimonials</li>
<li >Specialization</li>
<li ><a class="6" href="#contact">contact</a></li>
</ul>
</div>
<div class="jumbotron myjumbotron ">
<section class="bgimg" id="home">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1 style="color:white;" class="text-center">ANAND REDDY</h1>
<h3 style="color:white;" class="text-center">A WONDERFUL SERENITY HAS TAKEN POSSESSION OF MY ENTIRE SOUL, LIKE THESE
SWEET MORNINGS OF SPRING WHICH I ENJOY WITH MY WHOLE HEART
</h3>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<hr style="border: 1px solid black" />
<div id="about" class="row section">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="family" class="gray-bg">
<section class="container section team-3col ">
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
</section>
</div>
<hr style="border: 1px solid black" />
<div id="blog" class="section bgimg1">
<p> </p>
<h1 style="color:Bisque;" class="text-center">Welcome to my Blog</h1>
<h2 style="color:Bisque;" class="text-center">"Man must explore, and this is exploration at its greatest"</br>
Problems look mighty small from 150 miles up
</h2>
<p> </p>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2 >
Know about my backgound
<h2>
</div>
<div class="col-md-5 col-md-offset-1"> <h2> Know about my specialization</h2></div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1"><h2> Contact My Firm</h2></div>
<div class="col-md-5 col-md-offset-1">
<h2 class="text-center"> Visit my portfolio</h2></div>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="testimonial" class="section">
<div class="section-header">
<h2 style="color:white"; class="text-center">Testimonials</h2>
<h4 style="color:white"; class="text-center">
We have worked with hundreds of clients. Check what our awesome happy clients saying about us.
</h4>
</div>
<p> </p>
<div class="row">
<div class="well first col-md-3 ">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span>
</div>
<div class="well second col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well third col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well fourth col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
</div> </div>
<hr style="border: 1px solid black" />
<div id="spec" class="section bgimg2">
<p> </p>
<h2 style="color:black" class="text-center">So, what will I actually be doing?</h2>
<h3 style="color:SlateGrey" class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Attending court hearings (and doing the preparation beforehand)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Drawing up contracts and other legal documents </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Negotiating (not all cases will end up in court)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Explaining the law and giving general legal advice </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Settling disputes and supervising any agreements </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Researching and gathering evidence</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Analysing legal documents</h2>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Supervising legal assistants.</h3>
<p> </p>
</div>
<hr style="border: 1px solid black" />
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading" style="color:black">Let's Get In Touch!</h2>
<hr class="primary">
<h3 style="color:black">Ready to discuss your next case with me? That's great! Give me a call or send an email and I will get back to you as soon as possible!</h3>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<h3><span class="glyphicon glyphicon-earphone">986-60-32199</span></h3>
</div>
<div class="col-lg-4 text-center">
<h3><span class="glyphicon glyphicon-envelope">anandreddyv.25#gmail.com</span></h3>
</div>
</div>
</div>
</section>
<hr style="border: 1px solid black " />
</div>
</div>
</div>
<footer class="text-center ">
<p>Copyrights © <span class="text-primary">anand reddy vennapusa.</span> All Right Reserved.</p>
<p>Developed By : saisree vennapusa</p>
</footer>
</body>
</html>

Related

Looking for partial word matches from an input field, I'm finding also results from HTML code. Why?

I created an input field to search for words or their partial matches. In this example, I'm using the word cool.
The issue is that after 1st found match, I'm seeing matches from the HTML code and can't figure it out why. If I'm trying to find matches for the 3rd time, everything gets stuck.
Can someone help me understand why it's happening this?
Is there a way to write this part of code differently?
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
document.addEventListener("DOMContentLoaded", function() {
let btn = document.querySelector('#findWord');
btn.addEventListener('click', function(){
let occurrences = [];
$('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
// create a regexp from our term
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split(""); // ["c", "o", "o", "l"]
// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet]; // ["c", "o", "l"]
const pattern = `(${uniqueCharacters.join("|")})`; // c|o|l
const r = new RegExp(pattern, "ig"); // /(c|o|l)/ig
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
});
let lengthOccurrences = occurrences.length;
console.log('Number of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector('#current').textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? ' of ' + lengthOccurrences : ' matches found in document';
// set number of matches found
let count = document.querySelector('#count');
count.textContent = insertNbrOcc;
// console.log(count);
// set number of currently viewed match
let nbrViewMatch = document.querySelector('#current');
nbrViewMatch.textContent = currViewMatch;
// console.log(insertTxtViewMatch);
if(currViewMatch != 0){
// open the section holding the currently viewed match using the indexes we stored earlier
$('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
$('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
}
});
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* input[type=text]:focus {
outline: 3px solid rgb(87, 163, 214);
} */
input#findWord {
background-color: rgb(248, 211, 3);
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- HTML CODE -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <form id="searchForm" name="searchForm"> -->
<label for="searchedWord">Search</label>
<div>
<input type="text" id="searchedWord" placeholder="search.." aria-labelledby="searchedWord"/>
<button type="submit" id="findWord" value="Find">Find</button>
</div>
<!-- </form> -->
</div>
<div class="col-sm-6">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<span id="message"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button"
aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">Foreword</div>
<div class="col"><span></span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Foreword</div>
<div class="col timeline-type__title">Foreword</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand this
item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>Foreword
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Foreword cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button"
aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">Title A</div>
<div class="col"><span>SUMMARY</span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type"><a class="accordion" data-toggle="collapse" href="#summary" role="button"
aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">A</div>
<div class="col timeline-type__title">Summary</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li><a href="/en/secgen/courtsecretariat/Decisions/sommaire_en.pdf?d=wd815d51ad20c480292bc796688fd10d2&csf=1&e=XIu0Q9"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>A
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Summary not cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium"><a class="btn timeline-compendium__header collapsed" data-toggle="collapse"
href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">Title B</div>
<div class="col"><span>The Institution, the Court, operational procedures, the Members</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false"
aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 0</div>
<div class="col timeline-type__title">Treaties on European Union</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter">B 0</div>
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">
Treaties on European Union
</div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b01.pdf?d=wa9cc5281eeb347718865a52bf6c67efb&csf=1&e=zyPEtD"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Status of the Court / Revision of Article 4 of the EEC Treaty"
data-delay="400" aria-hidden="true"></em>B 0.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Status of the Court / Revision of Article 4 of the EEC Treaty cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b02.pdf?d=w93c3d23dbdc04bcda16c5be9151c183a&csf=1&e=yaoQwr"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Obligations deriving from the Treaty on European Union" data-delay="400"
aria-hidden="true"></em>B 0.2
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Obligations deriving from the Treaty on European Union
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b03.pdf?d=w56410e2b1b9f4ee2af9278081fc1d2c6&csf=1&e=BXz2wy"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip" title="The Court's name"
data-delay="400" aria-hidden="true"></em>B 0.3
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
The Court's name
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB1" role="button" aria-expanded="false"
aria-controls="chapterB1" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 1</div>
<div class="col timeline-type__title">The Court's operational procedures
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB1">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 1.0</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">The
Court's structure
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false"
aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 2</div>
<div class="col timeline-type__title">Members of the Court
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 2.1</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">Code
of conduct for the members and former members of the Court
</div>
</a>
</li>
<li><a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Code of conduct for the Members and former Members of the Court"
data-delay="400" aria-hidden="true"></em>B 2.1.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Code of conduct for the Members and former Members of the Court - Cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

(This was too long for a comment, maybe already helps you solve the issue)
You call $(this).html().match(r); to find matching words. Of course this will match occurences in the HTML. If you search for example "class" or "section". The HTML itself is matched there.
You should loop through HTML elements which are text nodes and call your .match(r) on each of them. Otherwise it will find tags, attributes and values in the attributes as well.
Taken from this answer: How do I select text nodes with jQuery:
$(elem).contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });
In the code which replaces matches, you write $(this).html($(this).html().replace( ... - you can change this to $(this).html($(this).text().replace( ... if you only go through the text nodes and be safe there is no HTML there.

Content is not sized correctly for the viewport

I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #3 -->
<div id="mySidenav3" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>-->
<div class="bg-light">
<div class="container">
<div class="row align-items-center no-gutter">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<a class="btn btn-ligth" style="background-color: #fab95b;" href="products.html">Browse all Products</a>
<!--<a class="btn btn-light" style="background-color: #fab95b;">Are you a Store Owner?</a>-->
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/gym-page.jpg" alt class="img-fluid">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-logo2.png" alt="fatBurner" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav()">Fatburner</a>
</div>
<div class="column">
<img src="images/preworkout-logo.png" alt="preWorkout" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav2()">Preworkout</a>
</div>
<div class="column">
<img src="images/protein-logo2.png" alt="protein" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav3()">Protein</a>
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/supplement-frontpage.jpg" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
" Hand-picked ingredients and expertly crafted products,
designed for the modern athletes and trainers."
</p>
</div>
<br>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-frontpage.png" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
Benefits Of Protein Supplementation<br>
1.Fast digesting and more easily absorbed than other protein sources<br>
2.Increased muscle mass, especially when taken post-workout<br>
3.Improved appetite control, and greater feelings of fullness when dieting<br>
</p>
</div>
<div class="footer">
<div class="container">
<div class="row align-items-center no-gutters border-top py-2">
<div class="col-md-6 col-12">
<span> 2021 NextGen. All Rights Reserved</span>
</div>
<div class="col-12 col-md-6">
<nav class="nav justify-content-center justify-content-md-end">
<a class="nav-link active pl-0" href="#!">Privacy</a>
<a class="nav-link" href="#!">Terms</a>
<a class="nav-link" href="#!">Feedback</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>

You could try docking the devtools at the bottom, or in a different window, as in this answer. Sadly, this is still an issue in 2021.

How to make the second row of the second column be the same height as first column

I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.

My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help

Trying to style with columns and 4 divs per column but not styling properly

Im trying to get these articles to be displayed vertically (one on top of the other) and then 4 divs per column of the main section. I can't them to eb the same size or for all of them to display the articles stacked on top of each other. Some keep going side by side. I can't figure out what to do.
<div class="indexNPrt2Mid" >
<div class ="row flex-wrap">
<div class = "col-lg-6 flex-first">
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(19)">Daily Fantasy Basketball<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/basketball.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider1">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of basketballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(17)">Daily Fantasy Baseball<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/baseball.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider2">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of baseballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/base-ball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(16)">Daily Fantasy Football<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider3">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of footballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/football.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Hockey<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of hockeyArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
</div>
<div class = "col-lg-6 flex-last">
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Soccer<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of soccerArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Golf<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of golfArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy MMA<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of mmaArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Racing<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of nascarArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="indexNPrt2Rght">
<div class="ylwTpBx clearfix">
<h3 routerLink="/news">Social Feeds <span><img src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/rght_icn3.png" alt="" class="img-responsive"></p>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#nTwtr" aria-controls="nTwtr" role="tab"
data-toggle="tab"><img
src="../../../../assets/images/twitter_icn.png" alt=""></a></li>
<li role="presentation"><a href="#nFb" aria-controls="nFb" role="tab" data-toggle="tab"><img
src="../../../../assets/images/facebook_icn.png" alt=""></a></li>
<li role="presentation"><a href="#nInsta" aria-controls="nInsta" role="tab" data-toggle="tab"><img
src="../../../../assets/images/insta_icn.png" alt=""></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="height:1700px;overlflow:scroll;">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of twitterFeeds">
<img
[attr.src]="tweet?.user?.profile_banner_url ? tweet?.user?.profile_banner_url : '../../../../assets/images/twitter-befault.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.user.name}}</span><i><img
src="../../../../assets/images/twitter_icn.png"></i></a>
<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_at |date:'dd MMM, yyyy h:m a'}}</i>
</div>
</div>
<p>{{tweet?.text?.slice(0,150)}}...</p>
<a href="javascript:void(0)" class="nRdMor">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nFb">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of facebookFeeds">
<img
[attr.src]="tweet?.attachments?.data[0]?.media?.image?.src ? tweet?.attachments?.data[0]?.media?.image?.src :'../../../../assets/images/f-default.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.message}}</span><i><img
src="../../../../assets/images/facebook_icn.png"></i></a>
<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_at |date:'dd MMM, yyyy h:m a'}}</i>
</div>
</div>
<p>{{tweet?.text?.slice(0,150)}}...</p>
<a href="{{tweet?.attachments?.data[0]?.url}}" target="_blank" class="nRdMor">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nInsta">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of instagramFeeds">
<img
[attr.src]="tweet?.images?.thumbnail?.url ? tweet?.images?.thumbnail?.url :'../../../../assets/images/f-default.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.user.full_name}}</span><i><img
src="../../../../assets/images/insta_icn.png"></i></a>
<!--<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_time |date:'dd MMM, yyyy h:m a'}}</i>
</div>-->
</div>
<p>{{tweet?.caption?.slice(0,150)}}...</p>
<a href="{{tweet?.link}}" class="nRdMor" target="_blank">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my code. The exterior div (indexNPrt2Mid) is meant to be displayed in the center of the page with two columns that have the other 8 divs included in them, with even heights, widths and three articles displayed in a stacked configuration. I dont know where my issue is coming from .
here is the CSS:
.news-notes {
/* text-align: justify; */
}
.body {
width: 100%;
}
.indexNPrt2MidSlider{
height: 25%;
}
.indexNPrt2Mid {
columns: 2;
}
.social-feed-img {
height: auto;
width: 100%;
}
.news-item {
border-top: 1px solid #eee;
}
.news-item:first-child {
border-top: none;
}
.pointer {
cursor: pointer;
}
.TopText {
margin-top: -5em;
font-size: 2em;
color: white;
}
.TopText div {
font-size: 3em;
}
.TopText h1 {
font-size: 2em;
color: white;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
.backToTopButton.visible {
opacity: 1;
visibility: visible;
}
.backToTopButton .backToTopArrow {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
display: block;
}
.backToTopButton i {
position: absolute;
top: 1.25rem;
right: 1.0625rem;
padding: .5rem;
border: solid #fff;
border-width: 0 .15rem .15rem 0;
}
i {
display: inline-block;
width: auto;
height: auto;
margin: 0;
padding: 0;
float: inherit;
text-align: inherit;
}
*, :after, :before {
box-sizing: content-box;
}
.tab-content::-webkit-scrollbar{
overflow-scrolling: auto;
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}

So here is how I could do the layout. if you resize you see it will stack on top of eachother
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid red; width:100%; height: 50vh;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid green; width:100%; height: 50vh;">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid blue; width:100%; height: 50vh;">
</div>
<div class="col-sm-12 col-md-12 col-lg-12" style="border: 1px solid orange; width:100%; height: 50vh;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
</div>
</div>
</div>
</body>
</html>

As it is necessary to simplify the code

I have code for mega dropdown menu on click. It works fine but code is Substandard, wrong. Is it possible to simplify it as anything? Here i writed the same action code for others
Look at the code:
$('.main-nav .first').click(function () {
$('.drop-down-container').toggleClass('visible');
});
$('.main-nav .sec').click(function () {
$('.drop-down-container-sec').toggleClass('visible')
});
$('.main-nav .rd').click(function () {
$('.drop-down-container-rd').toggleClass('visible');
});
$('.main-nav .fth').click(function () {
$('.drop-down-container-fth').toggleClass('visible');
});
$('.main-nav .fvth').click(function () {
$('.drop-down-container-fvth').toggleClass('visible');
});
HTML:
<li class="nav-item sec ">JAMOA VA O`QITUVCHILARGA<i class="fa fa-angle-down"></i>
<div class="drop-down-container-sec d-n" style="margin-left: -13em;">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 left " style="height: 510px;">
<h4 style="color: white">Tezkor menyu</h4>
<ul class="list-menu">
<li>Dars ishlanmalari</li>
<li>Ilg`or texnologiyalar</li>
<li>Tajriba sinovlari</li>
<li>Kasaba uyushmamiz</li>
<li>Moddiy-texnika bazamiz</li>
<li>Davlat dasturlari ijrosi</li>
<li>Me`yoriy hujjatlar</li>
<li>Maktab konsepsiyasi</li>
<li>Ustozlarimiz</li>
<li>Maktab rahbariyati</li>
<li>Kadrlar salohiyati</li>
<li>Hisobot o`rnida</li>
<li>Doimiy komissiyalar</li>
<li>Homiylarimiz</li>
<li>Hamkorlik</li>
<li>Ijodkor o`qituvchilar</li>
<li>Yilning eng yaxshi fan o`qituvchisi</li>
<li>Attestasiya materiallari</li>
<li>O`quv rejalari</li>
</ul>
<p class="all">
Umumiy yig'inda
</p>
</div>
<div class="col-md-8 col-sm-8 col-xs-12 right">
<li class="nav-item rd ">MAKTAB VA TA`LIM<i class="fa fa-angle-down"></i>
<div class="drop-down-container-rd d-n" style="margin-left: -28em">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12 left">
<h4 style="color: white">Elektron kutubxona</h4>
<ul class="list-menu">
<li>Bitiruvchilar vinetkalari</li>
<li>Maktab Nizomi</li>
<li>Maktabimiz pasporti</li>
<li>Ichki tartib-qoidalar</li>
<li>Ona-vatan madhi</li>
<li>Alifbe bayramlari</li>
<li>To`garaklarimiz</li>
<li>"Bilimlar bellashuvi" akademiya klublari</li>
<li>Fotoalbom</li>
<li>Videolavhalar</li>
<li>Tibbiy xizmat</li>
<li>Ogohlik va xavfsizlik</li>
</ul>
<p class="all">
Barcha darsliklar
</p>
</div>
<div class="col-md-8 col-sm-8 col-xs-12 right">
<div class="row">
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5><a href="#">
Imtihonlar jadvali
</a></h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<h5><a href="#">
Imtihonlar jadvali
</a></h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
</div>
</div>
</div>
</div>
</li>
So dropdown menu is huge
Guys if it possible to Simplify and fix this code please help me! I just hate that kind of code.

Well, your HTML code does not contain any element with the class main-nav. But you can short your code down to something like the following.
$('.main-nav .first, .main-nav .sec, .main-nav .rd, .main-nav .fth, .main-nav .fvth').click(function() {
var s = $(this).attr("class") == "first" ? "" : "-" + $(this).attr("class")
console.log('.drop-down-container' + s)
$('.drop-down-container' + s).toggleClass('visible');
});
$('.main-nav .first, .main-nav .sec, .main-nav .rd, .main-nav .fth, .main-nav .fvth').click(function() {
var s = $(this).attr("class") == "first" ? "" : "-" + $(this).attr("class")
console.log('.drop-down-container' + s)
$('.drop-down-container' + s).toggleClass('visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<div class="first">first
</div>
<div class="sec">sec
</div>
<div class="rd">rd
</div>
<div class="fth">fth
</div>
<div class="fvth">fvth
</div>
</div>

Let me simplify your code. Instead of handling each and every block separately with individual class names, change them to have common class names. Now you can easily do the toggling with any number of elements.
$('.nav-item .dropdown-toggle').click(function(){
$(this).closest('.nav-item').find('.drop-down-container').toggle('slow');
$('.navigation-tabs .dropdown-toggle').not(this).closest('.nav-item').find('.drop-down-container').hide('slow');
});
.drop-down-container {display: none;}
.navigation-tabs {padding: 0;}
.nav-item {display: block; border: 1px solid #ccc; padding: 5px; margin: 5px;}
.nav-item a {display: block; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="navigation-tabs">
<li class="nav-item">
<a class="dropdown-toggle" href="#">
JAMOA VA O`QITUVCHILARGA<i class="fa fa-angle-down"></i>
</a>
<div class="drop-down-container">First container</div>
</li>
<li class="nav-item">
<a class="dropdown-toggle" href="#">
MAKTAB VA TA`LIM<i class="fa fa-angle-down"></i>
</a>
<div class="drop-down-container">Second container</div>
</li>
</ul>

You can use a code like the following.
const array = ['first', 'sec', 'rd', 'fth', 'fvth'];
array.forEach(x => {
$(`.main-nav .${x}`).click(() => $(`.drop-down-container${x === 'first' ? '' : '-'+x}`).toggleClass('visible') );
});
it will iterate the array and add the click function for .main-val .YourClass that will toggle the class for .drop-down-container-YourClass

Categories

Resources