Image transition is not applying

Image transition is not applying - javascript

After hovering over a list item, I'm trying to show that list items corresponding image. I have this working, but the problem is that the css transition is not.Do I need to add a css selector? Can I add the transition through javascript?
Not sure how to fix this so any suggestions would be helpful, thanks.
Using bootstrap v5.3.0 alpha-1 as well.
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>

Just add and remove fadein animation and you can achieve this:
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
previous_image.classList.remove('fade-in-image');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
current_image.classList.add('fade-in-image');
}
});
});
.fade-in-image {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>

First add your previous opacity: 0 and then when you want to scroll then set opacity: 1; if you will not set previous opacity. Your transition will not work.

Related

Bootstrap 5 carousel with multiple sliders

i'm trying to make bootstrap 5 carousel with multi items. but in my code i could display 3 items at a time. how can make 6 items at a time. I try to change the value in JS code but there it doesn't work. Please correct my following so it could display 6 items at a time and can be vary later. here is complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container-fluid text-center my-3">
<div class="row">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>

Just change your bootstrap columns from col-md-4 to col-md-2 so that they can appear 6 columns per row and on your javascript code change minPerSlide to 6
Here is the code for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container-fluid text-center my-3">
<div class="row">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 6
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>

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 bootstrap 5 carousel draggable

I'm trying to make a boostrap 5 carousel draggable using drag and drop API. I have a problem when the carousel is dragged into another position where it can be dropped, it will lose all css settings that are in my vue component css and I will not be able to moove it again. How I can fix this and make the carousel and it's content draggable?
COMPONNENT HTML
<div class="row widget-area position-absolute m-0">
<div class="col-3 pt-2 pb-2 dropzone" #drop.prevent="onDrop($event)" #dragover.prevent #dragenter.prevent="onDragenter($event)" #dragleave="onDragleave($event)">
<div id="newsCarousel" class="carousel slide position-absolute" data-ride="carousel" draggable="true" #dragstart="startDrag($event)">
<!-- carousel inner -->
<div class="carousel-inner" draggable="true">
<div class="carousel-item card draggable-el position-absolute" :class="{ 'active': index === 0 }" :id="index" v-for="( news, index ) in newsfeed.articles" :key="index" draggable="true">
<img class="card-img-top" :src="news.image" :id="index" draggable="true" #dragstart="startDrag($event)">
<div class="card-body p-2">
<a class="text-decoration-none text-body" :href="news.source.url">
<small class="d-block text-muted">{{ news.source.name }}</small>
</a>
<a class="h6 text-decoration-none text-body card-title stretched-link" :href="news.url">{{ news.title }}</a>
</div>
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" href="#newsCarousel" role="button" data-slide="prev" draggable="true">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#newsCarousel" role="button" data-slide="next" draggable="true">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-3 pt-2 pb-2 dropzone"
#drop.prevent="onDrop($event)"
#dragover.prevent
#dragenter.prevent="onDragenter($event)"
#dragleave="onDragleave($event)">
</div>
<div class="col-3 pt-2 pb-2 dropzone"
#drop.prevent="onDrop($event)"
#dragover.prevent
#dragenter.prevent="onDragenter($event)"
#dragleave="onDragleave($event)">
</div>
<div class="col-3 pt-2 pb-2 dropzone"
#drop.prevent="onDrop($event)"
#dragover.prevent
#dragenter.prevent="onDragenter($event)"
#dragleave="onDragleave($event)">
</div>
</div>
JS CODE
//drag n drop
startDrag(e) {
let ids = [];
e.dataTransfer.dropEffect = 'move';
e.dataTransfer.effectAllowed = 'move';
const items = document.getElementsByClassName('draggable-el');
items.forEach( (el) => {
el.classList.add('dragging');
ids.push(el.id);
});
e.dataTransfer.setData('text/plain', JSON.stringify(ids));
},
onDragenter(e) {
e.target.classList.add('drop');
},
onDragleave(e) {
e.target.classList.remove('drop');
},
onDrop(e) {
let ids = JSON.parse(e.dataTransfer.getData('text/plain'));
ids.forEach( (id) => {
const item = document.getElementById(id);
item.classList.remove('dragging');
e.target.classList.remove('drop');
e.target.appendChild(item);
});
// return false;
}
SCOPED CSS
.widget-area {
width: 100%;
height: 350px;
top: 8em;
z-index: 200;
.dropzone {
&.drop{
border: rgba(255,255,255,0.3) dotted 1px;
.draggable-el {
pointer-events: none;
}
}
}
#newsCarousel {
// width: 18.5rem;
// height: 330px;
.carousel-inner {
width: 18.5rem;
height: 330px;
z-index: 300;
.draggable-el {
height: 330px;
width: 18.5rem;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
&:active {
cursor: grabbing;
}
&.dragging {
opacity: .5;
transform: scale(.8);
}
}
}
.carousel-control-prev, .carousel-control-next {
z-index: 300;
top: -6em;
}
}
}

The carousel Only displays 2 element over the code

I want to see all of my items that are cards total number is 6 but I
ended up by seeing only 2 of them in loop please help me to solve this
problem we see total 3 cads at same time on screen and later on it get
replaced by further cards in row.
i want to see all of my items that are cards total number is 6 but i ended up by seeing only 2 of them in loop please help me to solve this problem we see total 3 cads at same time on screen and later on it get replaced by further cards in row.
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carnext {}
/* card settings */
.card-body {
text-align: center;
}
.card-title {
margin-top: 20%;
}
.top-image-card {
position: absolute;
top: -20%;
left: 38%;
}
#media screen and (max-width: 1349px) and (min-width: 978px) {
.top-image-card {
position: absolute;
top: -20%;
left: 36%;
}
}
#media screen and (max-width: 991px) and (min-width: 668px) {
.top-image-card {
position: absolute;
top: -20%;
left: 28%;
}
}
.card {
margin-top: 80px;
}
/*th
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400;500;900&display=swap" rel="stylesheet">
<!--Font Owsome-->
<script src="https://kit.fontawesome.com/4575ad6c94.js" crossorigin="anonymous"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--Internal CSS-->
<link rel="stylesheet" href="css/styles.css">
<!--JS-->
<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>
<!--Font Qwsome-->
</head>
<body>
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 5 </h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 6</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark carnext" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$('#recipeCarousel').carousel({
interval: 1000
})
$('.carousel .carousel-item').each(function() {
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>

Class is not added by jQuery

I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>

Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Image transition is not applying - javascript

First add your previous opacity: 0 and then when you want to scroll then set opacity: 1; if you will not set previous opacity. Your transition will not work.

Related

Bootstrap 5 carousel with multiple sliders

Content is not sized correctly for the viewport

How to make bootstrap 5 carousel draggable

The carousel Only displays 2 element over the code

Class is not added by jQuery

Categories

Resources