Create multiple Tabs with Next/Previous buttons in multiple pop up Modals - javascript

I am working on a knowledge bank on a single HTML page.
The idea is that I have 8 pop-up modals, each modal will have it own steps.
The steps will be created with tabs and I want to add next/previous buttons to each tab on each modal.
Right now, I have 8 pop-up modals. I have added the tabs with buttons on all tabs in all modals. I am struggling with the following issue: When I open the first modal and click next/previous, it works but it works on all modals. So in the first modal, I click next 10 times, then I close the first modal and I end up in modal 3 on step 4.. What I want is for each modal/tab to have its own next and previous modal, instead of one global previous/next button that works on all tabs and only works in one modal.
Also, sometimes the modal pop ups don't work.. I have to click multiple times before it opens and sometimes it opens at once..
I am stuck on this problem for a few days now. I think it has something to do with the JS. Can someone help me? I would really appreciate it.. I have looked everywhere on the internet for the solution, but there isn't any..
Here is the code:
// Pop Ups JS
// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// Tabs JS
let currentSection = 0;
let sections = document.querySelectorAll(".section");
let sectionButtons = document.querySelectorAll(".nav > li");
let nextButton = document.querySelector(".next");
let previousButton = document.querySelector(".previous");
for (let i = 0; i < sectionButtons.length; i++) {
sectionButtons[i].addEventListener("click", function() {
sections[currentSection].classList.remove("active");
sectionButtons[currentSection].classList.remove("active");
sections[currentSection = i].classList.add("active");
sectionButtons[currentSection].classList.add("active");
if (i === 0) {
if (previousButton.className.split(" ").indexOf("disable") < 0) {
previousButton.classList.add("disable");
}
} else {
if (previousButton.className.split(" ").indexOf("disable") >= 0) {
previousButton.classList.remove("disable");
}
}
if (i === sectionButtons.length - 1) {
if (nextButton.className.split(" ").indexOf("disable") < 0) {
nextButton.classList.add("disable");
}
} else {
if (nextButton.className.split(" ").indexOf("disable") >= 0) {
nextButton.classList.remove("disable");
}
}
});
}
nextButton.addEventListener("click", function() {
if (currentSection < sectionButtons.length - 1) {
sectionButtons[currentSection + 1].click();
}
});
previousButton.addEventListener("click", function() {
if (currentSection > 0) {
sectionButtons[currentSection - 1].click();
}
});
/*==================== MODAL CSS ====================*/
body {
font-family: Arial, Helvetica, sans-serif;
}
.button {
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #3b6e88;
width: 100%;
height: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 75px;
font-weight: 100;
margin-top: 12px;
margin-right: 27px;
;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #3b6e88;
color: white;
}
.modal-body {
padding: 2px 16px;
background-color: #3b6e88;
color: white;
}
.modal-footer {
padding: 2px 16px;
background-color: #3b6e88;
color: white;
}
/* Add Animation
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}*/
/*================= TAB CSS=============== */
.section {
display: none;
}
.section.active {
display: block;
}
.invisible {
display: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
ul li {
background: #ccc;
padding: 8px 15px;
margin-left: 6px;
border-radius: 5px;
cursor: pointer;
opacity: .5;
color: #3b6e88;
font-size: 17px;
}
ul li.active {
opacity: 1 !important;
}
.next,
.previous {
padding: 15px 10px;
border-radius: 6px;
background: deepskyblue;
color: white;
border: 0;
outline: none;
cursor: pointer;
width: 100px;
}
.next.disable,
.previous.disable {
opacity: .5;
}
<!-- MODAL BUTTONS -->
<section>
<div>
<div>
<!-- Modal 1 -->
<button href="#myModal1" class="modal-button">
<p>Modal 1</p>
</button>
<!-- Modal 2 -->
<button href="#myModal2" class="modal-button">
<p>Modal 2</p>
</button>
<!-- Modal 3 -->
<button href="#myModal3" class="modal-button">
<p>Modal 3</p>
</button>
<!-- Modal 4 -->
<button href="#myModal4" class="modal-button">
<p>Modal 4</p>
</button>
<!-- Modal 5 -->
<button href="#myModal5" class="modal-button">
<p>Modal 5</p>
</button>
<!-- Modal 6 -->
<button href="#myModal6" class="modal-button">
<p>Modal 6</p>
</button>
<!-- Modal 7 -->
<button href="#myModal7" class="modal-button">
<p>Modal 7</p>
</button>
<!-- Modal 8 -->
<button href="#myModal8" class="modal-button">
<p>Modal 8</p>
</button>
</div>
</div>
</section>
<!-- MODALS POP UPS HTML -->
<!-- Modal 1 -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 1</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 2</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 3 -->
<div id="myModal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 3</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 4 -->
<div id="myModal4" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 4</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 5 -->
<div id="myModal5" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 5</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 6 -->
<div id="myModal6" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 6</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 7 -->
<div id="myModal7" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 7</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 8 -->
<div id="myModal8" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 8</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>


Can you try something like this? Code is not tested, but the concept is next:
On open modal trigger remove all 'active' classes, then add active on first tab:
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
// Remove all active tabs
var elems = document.querySelectorAll("#" + e.target.id + ">li.active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
// Add active on first element
elems[0].classList.add('active')
}
}

Related

Remove list-group-item-action click

I want to keep the list-group-item-action hover effect where it changes the background but I want to remove the click effect that makes it active. How would I do this?
I removed the href="#" from the
If I remove list-group-item-action, the hover effect is removed
I don't really want to specify a hover color in css because the bootstrap list groups automatically change the hover colors in light/dark mode. Also idk what the exact light/dark mode hover colors are lol
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 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 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 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>

I want to keep the list-group-item-action hover effect where it
changes the background but I want to remove the click effect that
makes it active.
If you want :
keep the hover effect
make the click effect same as hover effect
Just add following CSS :
.list-group-item:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
I don't really want to specify a hover color in css because the
bootstrap list groups automatically change the hover colors in
light/dark mode.
If you want :
remove hover and click effect completely
Just add following CSS :
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
color: unset !important;
background-color: unset !important;
}
For how to find out the CSS specified in those :active, :focus, :hover selectors, by taking Chrome as example, open the browser debugger, select the element that you would like to dig out the CSS, from screenshot below, you can see I highlighted two red boxes.
Click on the :hov option and the available selectors will listed out, just tick/untick them to see the effect.
Hope it helps !
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;
}
.list-group-item-action:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
/* remove hover & click effect completely */
/*
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
color: unset !important;
background-color: unset !important;
}
*/
<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 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 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 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>

Simple override the :focus and :active css--
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
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;
}
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
<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 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 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 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>

Swiper.js, multiple swipers with multiple controls on one page

For my Swiper design, I need a new set of controls on each slide, so the controls visually slide away with the slide content itself. Normally, this is no problem.
But as soon as I add multiple swipers on one page and init them using an each function, none of the controls work anymore. Does anyone know how I can have multiple swipers with multiple sets of controls on one page?
Here is my code so far:
$('.swiper-container').each(function() {
var next = $(this).find('.swiper-next');
var prev = $(this).find('.swiper-prev');
var swiper = new Swiper($(this)[0], {
navigation: {
nextEl: next,
prevEl: prev,
},
});
});
* {margin: 0; padding: 0; box-sizing: border-box;}
.swiper-container {
margin-bottom: 2em;
}
.swiper-slide {
background: rgba(0,0,0,.1);
height: 10em;
padding: 1em;
border-right: 2px solid red;
}
.swiper-controls {
display: flex;
}
.swiper-controls > div {
background: rgba(0,0,0,.2);
border: 1px solid white;
cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper#8/swiper-bundle.min.css" rel="stylesheet" />
<!-- swiper #01 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #01-01 -->
<div class="swiper-slide">
<p>slide #01-01</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #01-02 -->
<div class="swiper-slide">
<p>slide #01-02</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #01-03 -->
<div class="swiper-slide">
<p>slide #01-03</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
</div>
</div>
<!-- swiper #02 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #02-01 -->
<div class="swiper-slide">
<p>slide #02-01</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #02-02 -->
<div class="swiper-slide">
<p>slide #02-02</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #02-03 -->
<div class="swiper-slide">
<p>slide #02-03</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
</div>
</div>
<!-- embed js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>

1. For next and previous arrow
You can't have multiple swiper-controls, one in each swiper-slide. You can have only one swiper-controls for each group of slides. As you can read on the official doc, prevEl and nextEl can accept only null | CSSSelector | HTMLElement.
The trick is use CSS to place that one swiper-controls in a way that look like it’s in each one:
document.querySelectorAll(".swiper-container").forEach(function (s) {
let next = s.querySelector(".swiper-next");
let prev = s.querySelector(".swiper-prev");
new Swiper(s, {
navigation: {
nextEl: next,
prevEl: prev
}
});
});
* {margin: 0; padding: 0; box-sizing: border-box;}
.swiper-container {
margin-bottom: 2em;
}
.swiper-slide {
background: rgba(0,0,0,.1);
height: 10em;
padding: 1em;
border-right: 2px solid red;
}
.swiper-controls {
display: flex;
}
.swiper-controls > div {
background: rgba(0,0,0,.2);
border: 1px solid white;
cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper#8/swiper-bundle.min.css" rel="stylesheet" />
<!-- swiper #01 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #01-01 -->
<div class="swiper-slide">
<p>slide #01-01</p>
</div>
<!-- slide #01-02 -->
<div class="swiper-slide">
<p>slide #01-02</p>
</div>
<!-- slide #01-03 -->
<div class="swiper-slide">
<p>slide #01-03</p>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- swiper #02 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #02-01 -->
<div class="swiper-slide">
<p>slide #02-01</p>
</div>
<!-- slide #02-02 -->
<div class="swiper-slide">
<p>slide #02-02</p>
</div>
<!-- slide #02-03 -->
<div class="swiper-slide">
<p>slide #02-03</p>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- embed js -->
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
2. For pagination bullets
However, you can have multiple paginations, those bullet points, even if it's weird because on the doc, el has the same type as nextEl and prevEl:
document.querySelectorAll(".swiper-container").forEach(function (s) {
let next = s.querySelector(".swiper-next");
let prev = s.querySelector(".swiper-prev");
new Swiper(s, {
navigation: {
nextEl: next,
prevEl: prev
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper-container {
margin-bottom: 2em;
}
.swiper-slide {
background: rgba(0, 0, 0, 0.1);
height: 10em;
padding: 1em;
border-right: 2px solid red;
}
.swiper-controls {
display: flex;
}
.swiper-controls > div {
background: rgba(0, 0, 0, 0.2);
border: 1px solid white;
cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper#8/swiper-bundle.min.css" rel="stylesheet" />
<!-- swiper #01 -->
<div class="swiper swiper-container">
<div class="swiper-wrapper">
<!-- slide #01-01 -->
<div class="swiper-slide">
<p>slide #01-01</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #01-02 -->
<div class="swiper-slide">
<p>slide #01-02</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #01-03 -->
<div class="swiper-slide">
<p>slide #01-03</p>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- swiper #02 -->
<div class="swiper swiper-container">
<div class="swiper-wrapper">
<!-- slide #02-01 -->
<div class="swiper-slide">
<p>slide #02-01</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #02-02 -->
<div class="swiper-slide">
<p>slide #02-02</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #02-03 -->
<div class="swiper-slide">
<p>slide #02-03</p>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- embed js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>

Full horizontal page carousel bootstrap

I try to build a responsive one page using bootstrap that scrolls horizontally and every mouse scroll will switch to next page, best way i found so far to achieve this is to use carousel. The problem is that my carousel skips "pages". is there any way to restrict mouse scroll event to move only 100vw per scroll? or any other creative ideas how to approach this kind of build?
Any help will be much appreciated.Thanks in advance
This what i have so far:
https://codepen.io/xxannxx/pen/mxJWae
Html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="aquamarine">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="blue"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="pink">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="purple"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yellow">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="orange"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
Css:
.aquamarine {
width: 50vw;
height: 100vh;
background-color: aquamarine;
}
.blue {
width: 50vw;
height: 100vh;
background-color:skyblue;
}
.pink {
width: 50vw;
height: 100vh;
background-color:lightpink;
}
.purple {
width: 50vw;
height: 100vh;
background-color:plum;
}
.yellow {
width: 50vw;
height: 100vh;
background-color:yellow;
}
.orange {
width: 50vw;
height: 100vh;
background-color:orange;
}
.right.carousel-control, .left.carousel-control {
display: none;
}
.carousel-indicators li {
visibility: hidden;
}
JS:
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('mousewheel', function(e)
{
if(event.wheelDelta>0) {
$(this).carousel('next');
}else if(event.wheelDelta<0){
$(this).carousel('prev');
}
}
);

Make bootstrap mega menu open on hover instead of on click

I am using a bootstrap mega menu and I have it styled and working as I need, however I need it to open for desktop devices on hover (instead of on click). I thought I would be able to easily do this with just css, but I cannot get it to work.
Any suggestions? I am open to using jQuery or jscript, but I am not very fluid with these just yet.
Working jsfiddle: https://jsfiddle.net/L2o657p6/4/
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Mega Menuu</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-megamenu">
Today <span class="sr-only">(current)</span>
<div class="dropdown-container">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Featured Collections</h5>
<ul class="list-links">
<li>Press Every Button</li>
<li>Travel with Technology</li>
<li>Smart Choice</li>
<li>Fall in Love with Tech</li>
<li>Smartphones at a Snip</li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Trending Collections</h5>
<ul class="list-links">
<li>Harley-Davidson</li>
<li>Will you be my Valentine?</li>
<li>Summer Wedding Bridesmaid Dresses</li>
<li>Pink Wedding Centerpiece Ideas</li>
<li>Wedding Party Table Runners</li>
<li>Backyard Wedding Reception</li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<h5>My Collections</h5>
<span class="text-muted">You currently have no collections. Learn how to create one.</span>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Fashion
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li>Men's</li>
<li>Women's</li>
<li>Kids</li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Shop for</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li>Jewelry & Watches</li>
<li>Handbags & Accessories</li>
<li>Health & Beauty</li>
<li>Shoes</li>
<li>Sales & Events</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Electronics
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li>Cell Phones & Accessories</li>
<li>Cameras & Photo</li>
<li>Computers & Tablets</li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Other categories</h5>
<ul class="list-links">
<li>Car Audio, Video & GPS</li>
<li>iPhone</li>
<li>iPad</li>
<li>TV, Audio</li>
<li>Video Games & Consoles</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Deals
<div class="dropdown-container">
<div class="row">
<div class="col-sm-3">
<h5>Best deals of the day</h5>
<ul class="list-links">
<li>Car Audio, Video & GPS</li>
<li>iPhone</li>
<li>iPad</li>
<li>TV, Audio</li>
<li>Video Games & Consoles</li>
</ul>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Waterproof cellphone cover</h5>
<p>$5.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Large 20 slot leather watch box organizer</h5>
<p>$25.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
<p>$319</p>
</div>
</a>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Contact Us
<div class="dropdown-container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h5>Contact us</h5>
<p>Feel free to drop us a line, we will respond as sson as possible.</p>
<form>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputText1">Text</label>
<textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /col -->
<div class="col-sm-6 col-md-8">
<img src="holder.js/100px260?text=Map">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
CSS:
.nav > .dropdown-megamenu {
position: static;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-container {
position: static;
float: none;
width: auto;
margin-top: 0;
border: 0;
box-shadow: none;
border-radius: 0;
}
}
.dropdown-megamenu > .dropdown-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
padding: 15px;
}
.dropdown-megamenu .dropdown-menu {
display: block;
}
.link-image .media-object {
float: left;
margin-bottom: 7.5px;
}
.link-image-sm + .link-image-sm .media-object {
margin-left: 7.5px;
}
.thumbnail .caption {
min-height: 120px;
}
.thumbnail:hover {
text-decoration: none;
}
/* Link list */
.list-links {
list-style: none;
padding: 0;
}
.list-links li {
line-height: 1.71428571;
}
.list-links a {
color: #555;
}
.list-links a:hover,
.list-links a:focus,
.list-links a:active {
color: #22527b;
}
html,
body {
height: 100%;
min-height: 500px;
}
body {
background: -webkit-linear-gradient(top, #59a874 0, #449a63 100%);
background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
h3 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
line-height: 1.3;
margin-bottom: 2rem;
color: #fff;
}

You can just add a desktop only media query:
#media (min-width: 768px){
.navbar-nav .dropdown-megamenu:hover .dropdown-container {
display: block;
}
}
Here's a fiddle: https://jsfiddle.net/vqubh18j/
You could trim the selector down to dropdown:hover .dropdown-container if you wish.
Also note there is a 2px top margin on the dropdown that makes a tiny gap between the navbar and the dropdown, allowing slower mouse movers to have the menu disappear unintentionally:
.dropdown-container {
...
/* Should probably be removed or replaced with
margin: 0; border-top: 2px solid transparent; */
margin: 2px 0 0;
...
}

When one clicks on dropdown-toggle, class open is added to dropdown-megamenu.
.nav > .dropdown-megamenu.open .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu.open > .dropdown-container {
display: block;
}
Adapting the above CSS selector to the hover pseudo-class will give the following:
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
As hovering is not available on touch devices, the above selector is better wrapped in a media query.
#media (min-width: 768px) {
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
}
Updated JSFiddle

Bootstrap caption outside carousel

Iam adding bootstrap carousel to my site. I need bootstrap caption to be placed outside of the image in the right section. I did it but the caption is not adjusting with the container? if anyone knows how to fix this it will be greatful.....
<style>
.img-swap {
cursor: pointer;
}
.content-container:after {
clear: both;
content: "";
display: block;
}
.fullview {
height: 16px;
padding: 0px;
width: 18px;
}
.clean {
background-position: -253px 0;
}
.hide-sidebar { margin-left: -253px; }
.clean { background-position: -253px 0; }
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.slider-container {
margin-top:35px;
height:100%;
}
.carousel-caption {
position: absolute;
top: 0;
text-align: left;
left: inherit;
right: inherit;
width: 200px;
color:#000;
}
.carousel-caption:not(#caption-0) {
display: none;
}
#media (max-width: 1024px) {
.right-side-content .wrapper { margin-right: 20px; }
.right-side-content.full-content .wrapper { margin-right: -253px; }
body { background-position: -253px 0; }
body.clean { background-position: 0 0; }
.left-side-content { margin-left: -253px; z-index: 99; }
.left-side-content.hide-sidebar { margin-left: 0; }
}
</style>
</head>
<body class="">
<header class="title hidden-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<header class="title visible-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<div class="clearfix">
</div>
<div class="content-container bg-light-gray">
<div class="container">
<div class="row">
<div class="container slider-container">
<div class="row">
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/landing/carousel_bg_4.jpg">
</div>
<div class="item">
<img alt="Second slide" src="images/landing/carousel_bg_2.jpg">
</div>
<div class="item">
<img alt="Third slide" src="images/landing/carousel_bg_3.jpg">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, im. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
</div>
</div>
<a data-slide="prev" role="button" href="#slider" class="left carousel-control"><span class="glyphicon glyphicon-chevron-down"></span></a>
<a data-slide="next" role="button" href="#slider" class="right carousel-control"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.container -->
</div>
<div class="footer">
<div class="footer-menu">
<ul>
<li class="padd-lt0">Mobile App</li>
<li> About </li>
<li>Terms & Privacy Policy</li>
<li>Help</li>
<li>Videos</li>
<li>Disclaimer</li>
<li class="border-rt-none">Blog</li>
</ul>
</div>
<div class="copyright-sec">
2014, Copyright ©<img src="images/hudooku-footer-logo.png">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- ============= SCRIPTS ============= -->
<!--<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
<script type="text/javascript">
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
</script>
</body>
</html>

You have to give position from bottom to your carousel-caption class.
like following:
.carousel-caption { bottom:-95px; }
For showing the caption outside the carousel-inner class, you have to set padding bottom into that class otherwise the caption will not appear. It will hide due to overflow
.carousel-inner { padding-bottom:95px; }

Categories