We Keep Coding

Collapsible Navbar Scrolling Page Up and Not Opening When Clicking on it - Not Responsive Due to JavaScript or jQuery?

I have been trying to sort out this issue for a few days and have been unable to determine the issue. Whenever I press the link on the Navbar dropdown it scrolls up to the top of the page. Additionally, the navbar toggler is not showing on a phone.
I have this navbar working on other pages where the javascript is not being used and it works; but any page that has js, the navbar dropdown does not work.
Here is the full code, any help would be appreciated.
window.sr = ScrollReveal();
sr.reveal('.showcase-left', {
duration: 4000,
origin: 'left',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.showcase-right', {
duration: 4000,
origin: 'right',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.info-left', {
duration: 2000,
origin: 'bottom',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.info-right', {
duration: 2000,
origin: 'right',
distance: '300px'
});
$(function() {
// Smooth Scrolling
$('a[href="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
.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;
}
}
#showcase img {
width: 90%;
}
#showcase {
margin-left: 40px;
}
#testimonial {
background: #f1f1f1;
padding: 50px 0 30px 0;
text-align: 40px;
margin: 60px;
}
#info1 .info-left {
margin-top: 90px;
margin-bottom: 90px;
}
#info1 .info-right {
margin-top: 150px;
margin-bottom: 90px;
}
#contact {
background: url(./project/static/pics/gallery/90LayoutPhoto.jpg);
padding: 40px;
color: #fff;
border-top: #333 7px solid;
border-top: #333 7px solid;
}
<!-- Font Awesome -->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal,min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap 4 Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" />
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-danger">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/static/pics/OldLogo.jpg" alt="Logo" style="width:80px; border-radius:16px;">
</a>
<div class="d-flex ms-auto order-2">
<h2>604-726-9705</h2>
</div>
</div>
</nav>
<div>
<br>
<br>
<br>
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators carousel-fade">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gapext0.jpg);"></div>
<div class="container">
<strong id="hero-title"> Welcome to GRADE A PAINTERS</strong>
<br>
<strong id="hero-textp"> Grade A Painters is a highly rated painting company serving the Lower Mainland Vancouver since 2008. We are known for our quality work and
competitive pricing.</strong>
<p></p>
Book Your Project Today
</div>
</div>
<div class="carousel-item">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gapext.jpg);"></div>
<div class="container">
<strong id="hero-title">We’re here for YOU!</strong>
<br>
<strong id="hero-textp"> Grade A Painters is a full service one stop shop for interior and exterior home services, offering the highest quality
residential paint jobs in Vancouver and everything else your house needs to stay happy and healthy- from pressure washing
to painting your home, we’re here for you.</strong>
<p></p>
<div>
Call Us Now
</div>
</div>
</div>
<div class="carousel-item">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gpaext3.jpg);"></div>
<div class="container">
<strong id="hero-title">Free, In-Home PAINT COLOR CONSULT</strong>
<br>
<strong id="hero-textp">Choosing paint colors for your house is not easy! If you use us as your house painter, we'll provide you with a free in-home
professional color consultation.</strong>
<p></p>
FREE Consultation
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control-prev" role="button" data-bs-slide="prev">
<span class="visually-hidden">Previous</span>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" role="button" data-bs-slide="next">
<span class="visually-hidden">Next</span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item-active dropdown">
<a class="nav-link dropdown-toggle" id="navdrop" data-toggle="dropdown" href="#">Painting</a>
<div class="dropdown-menu">
<a class="dropdown-item-active" href="exterior.html">Exterior Painting</a>
<a class="dropdown-item-active" href="interior.html">Interior Painting</a>
<a class="dropdown-item-active" href="index1.html">Interior Painting</a>
</div>
</li>
<li class="nav-item-active">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
<div class="d-flex ms-auto order-5">
<form class="form-inline" action="booknow.html">
<button class="btn btn-danger" type="submit">Book Now!</button>
</form>
</div>
</div>
</div>
</nav>
<section id="info1">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="info-left card-img-top">
<img src="/static/pics/intwbrushes.jpg" alt="Painter Pic" width=100% height=100%/>
</div>
</div>
<div class="col-md-8 col-sm-8">
<div class="info-right">
<h2>Call Us Today</h2>
<p class="text">At GRADE A PAINTERS, we offer fast, high-quality solutions for all of your interior or exterior residential painting projects. Monetarily and comparatively speaking, the best way to make a good first impression for a minimal price, is with a fresh coat
of paint. House painting is like the cover of a book: the first thing anybody visiting or passing by notices. With an image saying about a thousand words, nothing presents itself better than a perfectly detailed, professionally completed paint
job; and nobody does it better than Grade A Painters. As a dedicated team of local, experienced, precision painters, we’re committed to giving your home or business the best treatment possible; ensuring it always makes the very best first
impression.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container-fluid fade-in-image">
<script src="https://googlereviews.cws.net/google-reviews.js"></script><br />
<script>
load_google_reviews("ChIJTblLDDt4hlQRarDEfpsSqvc");
</script>
</div>
<section id="showcase">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="showcase-left">
<img src="/static/pics/extwper.jpg" alt="Exterior w / Person">
<h2 class="text">Check out our Interior Project Page!</h2>
<div id="button">
Click Here
</div>
</div>
<br>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="showcase-right">
<img src="/static/pics/intwper.jpg" alt="interior w / Person">
<h2 class="card-text">Check out our Interior Project Page!</h2>
<div id="button">
Click Here
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<div class="container-fluid">
<div class="bg-danger text-white">
<h1 class="text-white">CALL US TODAY!</h1>
<h5 class="text-white"> Monday - Friday 8am - 9pm</h5>
<h5 class="text-white"> Saturday 9am - 9pm</h5>
<h5 class="text-white"> Sunday 10am - 6pm</h5>
</div>
</div>
<div class="container-fluid">
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container-fluid p-4 pb-0">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn text-white btn-floating m-1" style="background-color: #3b5998;" href="https://www.facebook.com/gradeapaintersbc" role="button"><i class="fa fa-facebook"></i
></a>
<!-- Yelp -->
<a class="btn text-white btn-floating m-1" style="background-color: #C41200;" href="https://www.yelp.ca/biz/grade-a-painters-coquitlam" role="button"><i class="fa fa-yelp"></i></a>
<!-- Linkedin -->
<a class="btn text-white btn-floating m-1" style="background-color: #0082ca;" href="https://www.linkedin.com/in/christopher-white-60353928/" role="button"><i class="fa fa-linkedin"></i></a>
<!-- Google -->
<a class="btn text-white btn-floating m-1" style="background-color: #dd4b39;" href="https://www.google.com/search?q=grade+a+painters&rlz=1C1GCEA_enCA845CA845&oq=gr" role="button"><i class="fa fa-google"></i></a>
<!-- BBB -->
<a class="btn text-white btn-floating m-1" style="background-color: #0082ca;" href="https://www.bbb.org/ca/bc/coquitlam/profile/commercial-painter/grade-a-painters-0037-1257346" role="button"><i class="fa fa-bbb">BBB</i></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright:
<a class="text-white" href="https://gradeapainters.com/">GradeAPainters.com</a>
</div>
<!-- Copyright -->
</footer>
</div>

how to make html elements respond to their parent viewport rather than browser viewport?

I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>

Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>

This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

fullpage.js with fixed sidebar image gallery

I am looking for a way to use fullpage.js as slideshow with a fixed sidebar on the left containing an "INFO" button which on click slides in a div with the information referring to the Section/Image, visible in the viewport.
I am using the basic setUp for fullpage.js with the div container "fullpage" including the "section" divs. Each section has a bg-image and a div with the capture to the image.
The sidebar is fixed on the left side and outside the "fullpage" container with the following markup.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<i class="fa fa-long-arrow-down"></i> <span>INFO</span>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<i class="fa fa-caret-left scrollDown"></i>
<!-- Gallery image count 4 -->
<span>1/15</span>
<i class="fa fa-caret-right scrollUp"></i>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
Can anybody help me with the jquery code to solve this problem?
You can find the basic layout in the Image below.

Try This
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.site-nav{
height: 100vh;
width: 135px;
background-color: pink;
position: fixed;
}
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar{
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
}
.body{
background-color: white;
float:left;
width:90%;
height:100%;
}
#section-one {
height: 100vh;
width: 100%;
background-color: pink;
}
#section-two {
height: 100vh;
width: 100%;
background-color: red;
}
#section-three {
height: 100vh;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="sidebar">
</div>
<div id="section-one">
</div>
<div id="section-two">
</div>
<div id="section-three">
</div>
</body>
</html>

Here is an screenshot of my site. I will put it on a server as soon as I can. And add the link to it.
Preview

Here is the HTML code of the site.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<a class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>
<!-- gallery image count 4 PHP Issue -->
<span>1/15</span>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
<div id="fullpage">
<!-- section 1 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>1955—60</h2>
<p class="lead">die erste liebe<br>und Schule aller Renner</p>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns" id="glsp-1">
</div>
</div>
</div>
<!-- section 2 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>Bruno Beuss</h2>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-2">
</div>
</div>
</div>
<!-- section 3 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<p class="lead">DIE ABSOLUTE BEHERRSCHUNG DER...</p>
<hr>
<a class="button scrollDown">GALERIE</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-3">
</div>
</div>
</div>
<!-- section 4 Gallery Start-->
<div class="section">
<div class="row gallery-content-box wow slideInLeft fadeIn">
<div class="wow fadeIn" id="glsp-4">
</div>
</div>
</div>
<!-- section 5 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" id="glsp-5-1">
</div>
<div class="medium-6 columns wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s" id="glsp-5-2">
</div>
</div>
</div>
</div>
<!-- Gallerie Lightbox -->
<div class="medium-3 columns toggle-lighbox hide animated slideOutLeft" id="gallery-lightbox">
<div class="row gallery-lightbox-innerwrap">
<ul class="medium-11" id="gallery-lightbox-menu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/fullpage.js/vendors/jquery.slimscroll.min.js"></script>
<script src="bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/wow/dist/wow.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
menu: '#gallery-lightbox-menu',
resize: false,
animateAnchor:false,
scrollOverflow: true,
autoScrolling:true,
responsive: 900,
fitSection: false,
navigation:true,
navigationPosition: 'right',
navigationTooltips: ['firstSection', 'secondSection'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
continuousVertical:true,
scrollBar: true,
css3: true,
afterLoad: function (anchorLink, index) {
// #toggle-menu for section 4...
if (index == 4) {
$(".toggle-menu").css('visibility','visible')
}
},
onLeave: function (index, nextIndex, direction) {
//going from section 3 to 4
if (index == 3 && direction == 'down') {
//whatever
}
//going form section 4 to 3
else if (index == 4 && direction == 'up') {
$(".toggle-menu").css('visibility','hidden')
}
}
});
// toggle-lighbox-opener
$('.gallery-open').click(function() {
if($('.toggle-lighbox').hasClass('slideOutLeft'))
{
$('.toggle-lighbox').addClass('slideInLeft').removeClass('hide slideOutLeft');
}
else
{
$('.toggle-lighbox').addClass('slideOutLeft').removeClass('slideInLeft');
}
});
// slimscroll.js
$(function(){
    $('.gallery-lightbox-innerwrap').slimScroll({
height: '100vh',
size: '7px',
position: 'right',
color: '#87704c',
alwaysVisible: true,
// distance: '-10px',
// start: $('#child_image_element'),
railVisible: true,
railColor: '#87704c',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: true,
disableFadeOut: true,
    });
});
$(document).on('click', '.scrollDown', function(){
$.fn.fullpage.moveSectionDown();
});
$(document).on('click', '.scrollUp', function(){
$.fn.fullpage.moveSectionUp();
});
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 100, // default
mobile: true, // default
live: true // default
}
)
wow.init();
});
</script>

how to scroll the page?

when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>

Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.