Delete Multiple Slick Carousel Arrows on Columns

Delete Multiple Slick Carousel Arrows on Columns - javascript

Is it possible to target specific Slick Carousel arrows? I'm building a table with 3 columns running as a carousel and would like to delete the remaining prev/next arrows.
Here is an example:
When you run the code snippet below, please expand it to 'full page' for best results.
Thanks so much in advance!
Here is what I currently have setup:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</p>
</div>
<div class="col-md-2 text-center py-2 heading">
</div>
</div>
<div class="row">
<div class="col-md-3">Test</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-md-9 bg-fhdark">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-9 bb">
<section class="regular slider">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
</section>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
});
});
</script>
</body>
</html>

When your slider runs, the arrows are represented with the classes .slick-next and .slick-prev
From there, your solution should just be an easy CSS solution. You can add a class or id to differentiate the main slider from the others.
I think an elegant solution would be to put a class called .no-arrows on your sliders that don't need arrows, and then use a CSS selector to hide its arrows:
.no-arrows .slick-next,
.no-arrows .slick-prev {
display: none;
}
Here's a demo:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.no-arrows .slick-next,
.no-arrows .slick-prev {
display: none!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</p>
</div>
<div class="col-md-2 text-center py-2 heading">
</div>
</div>
<div class="row">
<div class="col-md-3">Test</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-md-9 bg-fhdark">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-9 bb">
<section class="regular slider no-arrows">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-9">
<section class="regular slider no-arrows">
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
</section>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
});
});
</script>
</body>
</html>

I add slider-main class to the first slider, that I use to select sliders that needed to disable arrows, and using slider method $(slider).slick('slickSetOption', 'option', value, refresh); did update arrows value...
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<p>Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</p>
</div>
<div class="col-md-2 text-center py-2 heading">
</div>
</div>
<div class="row">
<div class="col-md-3">Test</div>
<div class="col-md-9">
<section class="regular slider slider-main">
<div class="col-sm-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-sm-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-sm-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-md-9 bg-fhdark">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-9 bb">
<section class="regular slider">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</section>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
<div class="col-md-4">2</div>
</section>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
});
$('.slider:not(.slider-main)').slick('slickSetOption', 'arrows', false, true);
});
</script>
</body>
</html>

Related

Why jQuery .scroll() method is not working with .addClass() method

I am trying to add a class named .nav-color if window is scrolled greater than or equal to 50px with jQuery (jQuery version 3.6.0).
For that I have crated a .nav-color class and trying to add it to #navigation with jQuery .addClass() method but somehow it is not working.
My jQuery Code:
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scroll() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});
Why is that happening? Why the code is not working?
Here is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-texts {
height: 90vh;
align-items: center;
margin-top: 60px;
height: 90vh;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
#s-5:hover {
border-bottom: 1px solid #f24516;
}
.nav-color {
background-color: #ffffff;
color: black;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand ms-lg-5" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav me-lg-5" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= Section 02 ========================= -->
<div class="sec-2 text-light text-center py-5" style="background-color: #f4623a;">
<p class="display-6">We've got what you need!</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #fff; background-color:#fff;
opacity: 1;">
<p class="w-md-50 m-auto">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">GET STRATED!</button>
</div>
<!-- ========================= Section 03 ========================= -->
<div class="sec-3 py-5 my-5">
<div class="container text-center">
<h2>At your Service</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<div class="row text-center mt-5">
<div class="col-md">
<img src="./images/diamond.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Sturdy Themes</p>
<p>Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="col-md">
<img src="./images/uptodate.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Up to Date</p>
<p>All dependencies are kept current to keep things fresh.</p>
</div>
<div class="col-md">
<img src="./images/globe.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Ready to Publish</p>
<p>You can use this design as is, or you can make changes!</p>
</div>
<div class="col-md">
<img src="./images/heart.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Made with Love</p>
<p>Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
<!-- ========================= Section 04 ========================= -->
<div class="container-fluid">
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/1.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/2.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/3.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/4.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/5.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/6.jpg" alt=""></div>
</div>
<div class="row py-5" style="background-color: #343a40;">
<div class="col text-center py-5">
<h2 class="text-light">Free Download at Start Bootstrap!</h2>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">DOWNLOAD NOW!</button>
</div>
</div>
</div>
<!-- ========================= Section 05 ========================= -->
<div class="container text-center py-5 my-5">
<h2>Let's Get In Touch!</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<p class="w-50 m-auto">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
<div class="row w-50 m-auto mt-5">
<div class="col-md">
<img src="./images/phone.png" alt="">
<p>+1 (555) 123-4567</p>
</div>
<div class="col-md">
<img src="./images/email.png" alt="">
contact#yourwebsite.com
</div>
</div>
</div>
<!-- ========================= footer ========================= -->
<div class="container-fluid text-center py-5" style="background-color: #f8f9fa;">
<p class="mb-0">Copyright © 2021 - Dabananda Mitra</p>
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scroll() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});
</script>
</body>
</html>

You can use scrollTop in the following way (and detect scroll for window, not body):
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
} else {
$("#navigation").removeClass("nav-color");
}
});
});
Applied to your snippet:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
} else {
$("#navigation").removeClass("nav-color");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-texts {
height: 90vh;
align-items: center;
margin-top: 60px;
height: 90vh;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
#s-5:hover {
border-bottom: 1px solid #f24516;
}
.nav-color {
background-color: #ffffff;
color: black;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand ms-lg-5" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav me-lg-5" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= Section 02 ========================= -->
<div class="sec-2 text-light text-center py-5" style="background-color: #f4623a;">
<p class="display-6">We've got what you need!</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #fff; background-color:#fff;
opacity: 1;">
<p class="w-md-50 m-auto">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">GET STRATED!</button>
</div>
<!-- ========================= Section 03 ========================= -->
<div class="sec-3 py-5 my-5">
<div class="container text-center">
<h2>At your Service</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<div class="row text-center mt-5">
<div class="col-md">
<img src="./images/diamond.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Sturdy Themes</p>
<p>Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="col-md">
<img src="./images/uptodate.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Up to Date</p>
<p>All dependencies are kept current to keep things fresh.</p>
</div>
<div class="col-md">
<img src="./images/globe.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Ready to Publish</p>
<p>You can use this design as is, or you can make changes!</p>
</div>
<div class="col-md">
<img src="./images/heart.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Made with Love</p>
<p>Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
<!-- ========================= Section 04 ========================= -->
<div class="container-fluid">
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/1.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/2.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/3.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/4.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/5.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/6.jpg" alt=""></div>
</div>
<div class="row py-5" style="background-color: #343a40;">
<div class="col text-center py-5">
<h2 class="text-light">Free Download at Start Bootstrap!</h2>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">DOWNLOAD NOW!</button>
</div>
</div>
</div>
<!-- ========================= Section 05 ========================= -->
<div class="container text-center py-5 my-5">
<h2>Let's Get In Touch!</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<p class="w-50 m-auto">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
<div class="row w-50 m-auto mt-5">
<div class="col-md">
<img src="./images/phone.png" alt="">
<p>+1 (555) 123-4567</p>
</div>
<div class="col-md">
<img src="./images/email.png" alt="">
contact#yourwebsite.com
</div>
</div>
</div>
<!-- ========================= footer ========================= -->
<div class="container-fluid text-center py-5" style="background-color: #f8f9fa;">
<p class="mb-0">Copyright © 2021 - Dabananda Mitra</p>
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

You accidently used the scroll()-trigger instead of the scrollTop()-function
Correct it to
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});

Html + Css page not responsive

I am new to html I created a html page and looks good but don't know why the page is not responsive on mobile
here is my html and css code please someone help me
.link-menu {
color: black;
}
.topbar-profile-photo {
width: 1.5em;
height: 1.5em;
position: relative;
}
.story-profile-photo {
width: 56px;
height: 56px;
position: relative;
border-width: 2px !important;
}
.post-profile-photo {
width: 46px;
height: 46px;
position: relative;
border-width: 2px !important;
}
.sidenav-profile-photo {
width: 56px;
height: 56px;
position: relative;
}
.comment-box {
border-top: 1px solid lightgray;
}
.input-post {
outline: none;
}
.btn-ig {
background-color: transparent;
border: 0;
color: #89216b;
font-weight: 600;
right: 0;
bottom: 0;
top: 0;
outline: none !important;
}
.btn-ig:hover,
.btn-ig:focus {
background-color: transparent !important;
color: #89216 !important;
}
.profile-info {
font-size: 14px;
}
.profile-info-username {
display: block;
font-weight: 700;
}
.sugest-profile-photo {
width: 46px;
height: 46px;
position: relative;
}
.sugest-username {
font-size: 14px
}
.btn-group button {
background-color: white; /* Green background */
border: solid #d1cfcf; /* Grey border */
border-width: 1px; /* Border width */
color: #89216b; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
<!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">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/d3d6f2df1f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container justify-content-center">
<div class="d-flex flex-row justify-content-between align-items-center col-9">
<a class="navbar-brand" href="#">
<img src="assets/images/ig-logo.png" alt="" loading="lazy">
</a>
<div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</div>
</nav>
</div>
<div class="mt-4">
<div class="container d-flex justify-content-center">
<div class="col-9">
<div class="row">
<div class="col-8">
<!-- START OF STORIES -->
<div class="card">
<div class="card-body d-flex justify-content-start">
<ul class="list-unstyled mb-0">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
</li>
</ul>
</div>
</div>
<!-- END OF STORIES -->
<!-- START OF POSTS -->
<div class="d-flex flex-column mt-4 mb-4">
<div class="card">
<div class="card-header p-3">
<div class="d-flex flex-row align-items-center">
<div
class="rounded-circle overflow-hidden d-flex justify-content-center align-items-center border border-danger post-profile-photo mr-3">
<img src="assets/images/profiles/profile-1.jpg" alt="..."
style="transform: scale(1.5); width: 100%; position: absolute; left: 0;">
</div>
<figure>
<span class="font-weight-bold">Outfitters</span>
<figcaption>08/03/2021</figcaption>
</figure>
</div>
</div>
<div class="card-body p-0">
<p class="d-block mb-1" style="margin: 10px;">Lil drone shot I got a while back but never posted.</p>
<div class="embed-responsive embed-responsive-1by1">
<img class="embed-responsive-item" src="assets/images/posts/post-1.jpg" />
</div>
<div class="btn-group" style="width:100%">
<button style="width:33.3%">Like</button>
<button style="width:33.3%">Comment</button>
<button style="width:33.3%">Share</button>
</div>
<div class="pl-3 pr-3 pb-2">
<strong class="d-block">365 likes</strong>
<strong class="d-block">Outfitters</strong>
<button class="btn p-0">
<span class="text-muted">View all 100 comments</span>
</button>
<div>
<div>
<strong class="d-block">Usama</strong>
<span>❤️💓💓💓💓💓</span>
</div>
<div>
<strong class="d-block">Saqib</strong>
<span>Hi</span>
</div>
</div>
<small class="text-muted">4 HOURS AGO</small>
</div>
<div class="position-relative comment-box">
<form>
<input class="w-100 border-0 p-3 input-post" placeholder="Add a comment...">
<button class="btn btn-primary position-absolute btn-ig">Post</button>
</form>
</div>
</div>
</div>
</div>
<!-- END OF POSTS -->
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
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.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</footer>
</html>

Seems that problem in using col-9 and col-8 those you apply for divs inside div.container
col-9 and col-8 classes have max-width and flex properties those limit the width.
Just remove them, and it should help with mobile view, but you have to tweak your CSS styles a little bit more, depends what you want to achieve to desktop and tablet screens.

Text box to display updated text and save on button click

I am trying to set-up this daily scheduler. I am working on the 9am slot. What I want to happen is for the person to click on the box to the right of the time, make a text input, and click the save button to save the text and display it in that time slot.
Am I able to achieve this with just HTML or will I need to implement JS to make this work?
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea{
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description{
white-space: pre-wrap;
}
.time-block{
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
.gray {
background-color: gray;
}
.red {
background-color: red;
}
.green{
background-color: green;
}
<!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" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="libs/moment.min.js"></script>
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container">
<!-- Timeblocks go here -->
<!-- 9am -->
<div class="row">
<div class='col-2 hour'> 9am
</div>
<div class="col-8 description red border-bottom">
<input class="border-0 form-control textarea bg-transparent" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" class="btn btn-primary mb-2">Save</button>
</div>
</div>
<!-- 10am -->
<div class="row">
<div class='col-2 hour'> 10am
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 11am -->
<div class="row">
<div class='col-2 hour'> 11am
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 12am -->
<div class="row">
<div class='col-2 hour'> 12pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 1pm -->
<div class="row">
<div class='col-2 hour'> 1pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 2pm -->
<div class="row">
<div class='col-2 hour'> 2pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 3pm -->
<div class="row">
<div class='col-2 hour'> 3pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 4pm -->
<div class="row">
<div class='col-2 hour'> 4pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 5pm -->
<div class="row">
<div class='col-2 hour'> 5pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
</body>
</html>

Demo: jsFiddle DEMO
HTML
All the HTML you need
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>
JavaScript
We'll use Window.localStorage to save the data so that the user can exit or refresh the page.
Create a 24h to AM/PM converter:
const ampm = h => (h%12||12)+(h<12?'AM':'PM');
Use Window.localStorage to read (and store) your LS Object in the Browser memory.
const LS = JSON.parse(localStorage.scheduler||'{}'); // String is now an Object
Create and store the HTML template as JS String
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
and append that string into the DOM using Element.insertAdjacentHTML given a start from and end to hour:
for (let h=from; h<=to; h++) {
EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}
Now the fun part.
Save on textarea blur!
The textarea can be blurred by clicking outside of the textarea - on the "SAVE" element or anywhere else. So it'll work in every case. (Show the transparent "SAVE" text by using CSS :focus and the adjacend sibling combinator +)
const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
Live example:
Since StackOverflow sandboxes the live-snippet iframe and the localStorage will not work - head to this jsFiddle DEMO
And here's the SO-Snippet for completeness sake:
const from = 9; // use 24h format here
const to = 17; // use 24h format here
// Use window.localStorage to retrieve and store your data object as string
const LS = JSON.parse(localStorage.scheduler||'{}'); // now an Object
const EL_scheduler = document.querySelector('.Scheduler');
const ampm = h => (h%12||12)+(h<12?'AM':'PM');
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
// Populate Scheduler
for (let h=from; h<=to; h++) {
EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}
// Logic to save the data:
// On textarea blur Event - save the data by reading the data-h value
const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}
body {font: 16px/1.4 sans-serif; color:#555;}
h1, h3 {text-align:center; font-weight:300;}
.Scheduler {
width: calc(100% - 40px);
max-width: 500px;
margin: 1em auto;
}
.Schedule {
border-top: 1px dashed #aaa;
display: flex;
padding: 2px 0;
}
.Schedule > *{
padding: 0.5em 0.8em;
}
.Schedule-time {
width: 70px;
text-align: right;
}
.Schedule-desc {
flex: 1;
font: inherit;
min-height: 70px;
resize: vertical;
background: #eee;
border: none;
border-right: 1px solid #555;
}
.Schedule-desc:focus {
outline: none;
background: #cbe8ef;
}
.Schedule-desc:focus+.Schedule-save{
color: #fff; /* Show the SAVE text on textarea :focus */
}
.Schedule-save {
color: transparent;
background: #06AED5;
border-radius: 0 1em 1em 0;
display: flex;
align-items: center;
user-select: none;
}
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>

How to have a click event function start with the last child element and then work it's way up?

I creating the game connect 4 and I'm trying to get the colors to stack on top of each other after one color is already selected. (Sorry I'm not the best at explaining things and I'm a novice at coding)
Here is the Javascript/JQuery
$('.row:last-child').click(function () {
$(this).css('background-color', 'pink')
counter++
if (counter % 2 === 0) {
$(this).css('background-color', 'pink')
if ($('.row:last-child').css('background-color', 'pink') || $('.row:last-child').css('background-color', 'black')) {
$('.row:nth-child')
}
} else {
$(this).css('background-color', 'black')
}
})
Here is a link to my HTML
https://github.com/ChizzyEze/Project-1-Connect-4/blob/master/index.html

var counter = 0;
$('.column').click(function() {
counter++
if (counter % 2 === 0) {
$(this).children().not('.pink, .black').last().addClass('pink');
} else {
$(this).children().not('.pink, .black').last().addClass('black');
}
});
body {
background: silver;
}
h1 {
font-size: 4rem;
text-align: center;
font-family: 'Chewy', cursive;
}
.game {
border: 7px solid black;
height: 90%;
width: 90%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 0 auto;
padding: 25px;
}
.row {
width: 80px;
height: 80px;
border: 5px solid black;
margin: 10px auto;
border-radius: 50%;
flex: 1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.column {
flex-direction: column;
justify-content: center;
margin: 0 auto;
flex: 1;
}
.pink {
background-color: pink;
}
.black {
background-color: black;
}
<!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">
<link href="https://fonts.googleapis.com/css?family=Chewy" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<script defer src="app.js"></script>
<title>Chizzy's Connect 4</title>
</head>
<body>
<h1>Connect 4</h1>
<div class="game">
<div class=" column" id="col0">
<div class="row" id="col0row5"><div></div></div>
<div class="row" id="col0row4"><div></div></div>
<div class="row" id="col0row3"><div></div></div>
<div class="row" id="col0row2"><div></div></div>
<div class="row" id="col0row1"><div></div></div>
<div class="row" id="col0row0"><div></div></div>
</div>
<div class=" column" id="col1">
<div class="row" id="col1row5"><div></div></div>
<div class="row" id="col1row4"><div></div></div>
<div class="row" id="col1row3"><div></div></div>
<div class="row" id="col1row2"><div></div></div>
<div class="row" id="col1row1"><div></div></div>
<div class="row" id="col1row0"><div></div></div>
</div>
<div class=" column" id="col2">
<div class="row" id="col2row5"><div></div></div>
<div class="row" id="col2row4"><div></div></div>
<div class="row" id="col2row3"><div></div></div>
<div class="row" id="col2row2"><div></div></div>
<div class="row" id="col2row1"><div></div></div>
<div class="row" id="col2row0"><div></div></div>
</div>
<div class=" column" id="col3">
<div class="row" id="col3row5"><div></div></div>
<div class="row" id="col3row4"><div></div></div>
<div class="row" id="col3row3"><div></div></div>
<div class="row" id="col3row2"><div></div></div>
<div class="row" id="col3row1"><div></div></div>
<div class="row" id="col3row0"><div></div></div>
</div>
<div class=" column" id="col4">
<div class="row" id="col4row5"><div></div></div>
<div class="row" id="col4row4"><div></div></div>
<div class="row" id="col4row3"><div></div></div>
<div class="row" id="col4row2"><div></div></div>
<div class="row" id="col4row1"><div></div></div>
<div class="row" id="col4row0"><div></div></div>
</div>
<div class=" column" id="col5">
<div class="row" id="col5row5"><div></div></div>
<div class="row" id="col5row4"><div></div></div>
<div class="row" id="col5row3"><div></div></div>
<div class="row" id="col5row2"><div></div></div>
<div class="row" id="col5row1"><div></div></div>
<div class="row" id="col5row0"><div></div></div>
</div>
<div class=" column" id="col6">
<div class="row" id="col6row5"><div></div></div>
<div class="row" id="col6row4"><div></div></div>
<div class="row" id="col6row3"><div></div></div>
<div class="row" id="col6row2"><div></div></div>
<div class="row" id="col6row1"><div></div></div>
<div class="row" id="col6row0"><div></div></div>
</div>
</div>
<div id="space"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</body>
</html>

how to make bootstrap popover like google app launch button?

How to make a range item inside bootstrap popover? I want to make it the exact same as the google app launch button as the following image:
I played around CSS and Try to get it as close as possible, but it seems I am doing it in a wrong way. https://jsfiddle.net/ueskyj1u/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
#import "compass/css3";
.popover-content {
overflow-y: scroll;
height: 200px;
}
.popover-footer {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color: #F7F7F7;
border-bottom: 1px solid #EBEBEB;
border-radius: 5px 5px 0 0;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
/* padding: 13px;*/
width: 74px;
;
height: 83px;
margin-top: 2px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
/*---------------------*/
#General {
background: #383a35;
}
#sale {
background: #ffde6b;
}
#Servicing {
background: #762963;
}
#Purchasing {
background: #22d65b;
}
#Billing {
background: #67a0e1;
}
#Accounts {
background: #a22ee3;
}
#GST {
background: #39c5ac;
}
#StockControl {
background: #ef5836;
}
#System {
background: #69cbf5;
}
</style>
<body>
<div>
<!-- <div class="flex-container">
<div id="General" class="flex-item"> 1
<div class="glyphicon glyphicon-envelope"> </div>
</div>
<div id="sale" class="flex-item">
<div class=" glyphicon glyphicon-ok"> </div> 2</div>
<div id="Servicing" class="flex-item">
<div class="glyphicon glyphicon-globe "> </div> 3</div>
<div id="Purchasing" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 4</div>
<div id="Billing" class="flex-item">
<div class=" glyphicon glyphicon-usd"> </div> 5</div>
<div id="Accounts" class="flex-item">
<div class=" glyphicon glyphicon-user"> </div> 6</div>
<div id="GST" class="flex-item">
<div class=" glyphicon glyphicon-stats"> </div> 7</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 8</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-cog"> </div> 8</div>
</div>
-->
</div>
click me to see popover
<script type="text/javascript">
$("[rel=details]").popover({
trigger: 'click',
placement: 'bottom',
html: 'true',
content: '<div class="flex-container"><div id="General" class="flex-item"> 1<div class="glyphicon glyphicon-envelope"></div></div><div id="sale" class="flex-item"><div class=" glyphicon glyphicon-ok"> </div> 2</div><div id="Servicing" class="flex-item"><div class="glyphicon glyphicon-globe "> </div> 3</div><div id="Purchasing" class="flex-item"><div class="glyphicon glyphicon-envelope"></div>4</div><div id="Billing" class="flex-item"><div class=" glyphicon glyphicon-usd"> </div> 5</div><div id="Accounts" class="flex-item"><div class=" glyphicon glyphicon-user"> </div>6</div><div id="GST" class="flex-item"><div class=" glyphicon glyphicon-stats"> </div>7</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-envelope"></div> 8</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-cog"> </div> 8</div></div>',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
</script>
</body>
</html>

Do changes in popup template
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<div class="footer">
<center>
<a href="" >more</a>
</center>
</div>
</div>
add class
.footer{
width: 101%;
margin-left: -0.5%;
background-color:rgba(128, 128, 128, 0.48);
margin-bottom:-1%;
border-bottom-right-radius: 16%;
border-bottom-left-radius: 16%;
}
https://jsfiddle.net/ueskyj1u/1/

Develop Reference

JavaScript is the programming language of the Web.

Delete Multiple Slick Carousel Arrows on Columns - javascript

Related

Why jQuery .scroll() method is not working with .addClass() method

Html + Css page not responsive

Text box to display updated text and save on button click

How to have a click event function start with the last child element and then work it's way up?

how to make bootstrap popover like google app launch button?

Categories

Resources