Develop Reference

How to optimize these two functions into clean code (No jQuery)

I have this very "not clean" code where I open a modal with an animation:
const modal = document.getElementById("modal");
const modalDarkBackground = document.getElementById("modalDarkBackground");
document.getElementById("openModal").onclick = function() {
modal.style.opacity = "1";
modal.style.zIndex = "9999";
modal.style.transform = "translate(-50%, -50%) scale(1)";
modalDarkBackground.style.zIndex = "9998";
modalDarkBackground.style.opacity = "1";
}
document.getElementById("closeModal").onclick = function() {
modal.style.transform = "translate(-50%, -50%) scale(1.1)";
setTimeout(function() {
modal.style.opacity = "0";
modal.style.zIndex = "-1";
modal.style.transform = "translate(-50%, -50%) scale(0)";
modalDarkBackground.style.zIndex = "-1";
modalDarkBackground.style.opacity = "0";
}, 500);
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#modalDarkBackground {
height: 100vh;
width: 100%;
background: rgba(0,0,0,0.5);
transition: all 0.5s;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
#modal {
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
overflow: hidden;
transition: all 0.5s;
opacity: 0;
background: #fff;
}
#modal h1 {
background: #E6E6E6;
color: #ff0C0C;
font-size: 20px;
padding: 0.5em;
border-bottom: 1px solid #C0C0C0;
}
#modal p {
min-height: 70px;
padding: 0.5em;
color: #ff0C0C;
font-weight: 400;
font-size: 15px;
}
#modal button {
display: block;
width: 50%;
padding: 0.5em 1em;
background: #EDB44C;
color: #fff;
font-size: 15px;
margin: 0 auto 0.5em auto;
border: 1px solid #BEBEBE;
border-radius: 3px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<button id="openModal">
Open Modal
</button>
<div id="modalDarkBackground"></div>
<div id="modal">
<h1>Error</h1>
<p id="modalContent">
You do not seem to have an Internet connection.
Please check your connection.
</p>
<button id="closeModal">
OK
</button>
</div>
I noticed that my JavaScript code is very bad with inline styles and way too long. Is there a way to optimize this JavaScript code with e.g. AddClass and maybe make a single function out of it? Sorry, I am a JavaScript newbie
Thanks in advance!

Instead of hard-wiring the effected DOM nodes with their intended behavior, and instead of CSS-data baked into the JavaScript code as well, one could give a component (DOM) and module (JavaScript) based approach more than just a single thought.
On top one leaves the animation behavior entirely to the CSS by targeting this behavior via a common set of css class names which will be used by the JavaScript logic.
Of cause one has to start with a more generic and better structured markup. Especially the nesting is crucial for how one can target the layout rules, and even more, how one can achieve a fine grained targeting of element specific css transformations.
Thus, the OP's original CSS got slightly reassembled according to the new markup.
The OP might also notice the class name specific rules for/under active, before-deactivation and deactivating which each target a specific state of a just or still raised modal component and which are customizable via related data-* attributes at every modal component's root node.
The idea behind a modals-module is convenience and flexibility. The module internally stores modal items by each item's corresponding element-node.
The module features just two methods get and initialize. The latter identifies all modal related element-nodes by their specific data-component-modal attribute and creates a node specific modal-item.
Thus every modal related element-node can be used by the module's get method, either to retrieve an already existing modal-item, or to create, store and get a new element-node specific modal-item.
Each item owns exactly two methods activate and deactivate which literally trigger a behavior according to its naming/wording.
Thus the component approach allows the usage of more than just one modal component within one and the same document. It allows other program logic or components to retrieve and use modal-items individually by their element-node reference and e.g. trigger modal behavior like raising/opening (activate) or closing (deactivate) the modal related element-node.
The implementation of the final executable snippet's main function does demonstrate the just said exemplarily ...
function main() {
modals.initialize();
document
.querySelectorAll('[data-activate-modal]')
.forEach(triggerNode => document
.querySelectorAll(triggerNode.dataset.activateModal)
.forEach(componentNode => triggerNode
.addEventListener('click', modals.get(componentNode).activate)
)
);
}
... modals does get initialized first. Then there are some buttons which we want to be triggers for raising different modals. Such a button/trigger gets identified by its data-activate-modal attribute. And the value of the latter will be used as element-query for the targeted modal. For instance a button like ...
<button data-activate-modal='#warningModal'>
Open Warning Modal
</button>
... does target any modal which gets queried by '#warningModal' which of cause for the example is just a sole modal component due to the used id based selector.
Finally any triggering element is going to handle any of its targeted modal-items by activate-ing each related item on such a trigger's e.g. click event.
But of cause there are many more options left with the approach of storing and retrieving modal items via their related element-node references.
// `modals` module.
const modals = (function () {
function getSafeInteger(value) {
value = parseInt(value, 10);
return Number.isSafeInteger(value) ? value : 0;
}
function activateBoundModalTarget() {
this.classList.add('active');
}
function deactivateBoundModalTarget() {
const modalNode = this;
let {
deactivationDuration: delayDefault,
deactivationDelay: delayBefore,
} = modalNode.dataset;
delayDefault = getSafeInteger(delayDefault);
delayBefore = getSafeInteger(delayBefore);
modalNode.classList.add('before-deactivation', 'deactivating');
setTimeout(() => {
modalNode.classList.remove('active', 'before-deactivation');
setTimeout(() =>
modalNode.classList.remove('deactivating'), delayDefault
);
}, delayBefore);
}
// `modal` item/type factory
function createModal(rootNode) {
const activate = activateBoundModalTarget.bind(rootNode);
const deactivate = deactivateBoundModalTarget.bind(rootNode);
rootNode
.querySelectorAll('[data-trigger-inactive]')
.forEach(triggerNode => triggerNode
.addEventListener('click', deactivate)
);
return {
rootNode,
activate,
deactivate
}
}
const storage = new WeakMap;
function getModal(rootNode) {
let modal = storage.get(rootNode);
if (
!modal &&
(rootNode instanceof HTMLElement) &&
rootNode.hasAttribute('data-component-modal')
) {
if (modal = createModal(rootNode)) {
storage.set(rootNode, modal);
}
}
return modal ?? null;
}
function initialize() {
document
.querySelectorAll('[data-component-modal]')
.forEach(getModal);
}
// export module.
return {
get: getModal,
initialize,
};
}());
function main() {
modals.initialize();
document
.querySelectorAll('[data-activate-modal]')
.forEach(triggerNode => document
.querySelectorAll(triggerNode.dataset.activateModal)
.forEach(componentNode => triggerNode
.addEventListener('click', modals.get(componentNode).activate)
)
);
}
main();
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
[data-component-modal] {
z-index: -1;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
[data-component-modal] .background {
opacity: 0;
z-index: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(192, 192, 192, 0.9);
transition: all 0.5s;
}
[data-component-modal] .content {
zoom: .8;
opacity: 0;
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
width: 300px;
background: #fff;
overflow: hidden;
transition: all 0.5s;
transform: translate(-50%, -50%) scale(1);
}
[data-component-modal].deactivating,
[data-component-modal].active {
z-index: 99;
}
[data-component-modal].active .background,
[data-component-modal].active .content {
opacity: 1;
}
[data-component-modal].active.before-deactivation .content {
transform: translate(-50%, -50%) scale(1.1);
}
[data-component-modal].error .background {
background: rgba(255, 192, 192, 0.9);
}
[data-component-modal] .content h1 {
background: #E6E6E6;
font-size: 20px;
padding: 0.5em;
border-bottom: 1px solid #C0C0C0;
}
[data-component-modal] .content p {
min-height: 70px;
padding: 0.5em;
font-weight: 400;
font-size: 15px;
}
[data-component-modal].error .content h1,
[data-component-modal].error .content p {
color: #ff0C0C;
}
[data-component-modal] .content button {
display: block;
width: 50%;
padding: 0.5em 1em;
background: #EDB44C;
color: #fff;
font-size: 15px;
margin: 0 auto 0.5em auto;
border: 1px solid #BEBEBE;
border-radius: 3px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<button data-activate-modal='#errorModal'>
Open Error Modal
</button>
<button data-activate-modal='#warningModal'>
Open Warning Modal
</button>
<button data-activate-modal='#errorModal'>
Open Error Modal
</button>
<button data-activate-modal='#warningModal'>
Open Warning Modal
</button>
<div
data-component-modal
data-deactivation-duration='500'
id="errorModal"
class="error"
>
<div class="content">
<h1>Error</h1>
<p id="modalContent">
You do not seem to have an Internet connection.
Please check your connection.
</p>
<button data-trigger-inactive>
OK
</button>
</div>
<div class="background"></div>
</div>
<div
data-component-modal
data-deactivation-duration='500'
data-deactivation-delay='500'
id="warningModal"
>
<div class="content">
<h1>Warning</h1>
<p id="modalContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<button data-trigger-inactive>
OK
</button>
<button data-trigger-inactive>
close
</button>
</div>
<div class="background"></div>
</div>

You can describe transition in css classes and add/remove them to show/hide the modal
const modal = document.getElementById("modal");
const modalDarkBackground = document.getElementById("modalDarkBackground");
const show = () => {
modal.classList.add('show');
modalDarkBackground.classList.add('show');
};
const hide = () => {
modal.classList.add('prepare-hide');
setTimeout(function() {
modal.classList.remove('prepare-hide');
modal.classList.remove('show');
modalDarkBackground.classList.remove('show');
}, 500);
};
modalDarkBackground.onclick = hide;
document.getElementById("openModal").onclick = show;
document.getElementById("closeModal").onclick = hide;
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#modalDarkBackground {
height: 100vh;
width: 100%;
background: rgba(0,0,0,0.5);
transition: all 0.5s;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
#modal {
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
overflow: hidden;
transition: all 0.5s;
opacity: 0;
background: #fff;
}
#modal h1 {
background: #E6E6E6;
color: #ff0C0C;
font-size: 20px;
padding: 0.5em;
border-bottom: 1px solid #C0C0C0;
}
#modal p {
min-height: 70px;
padding: 0.5em;
color: #ff0C0C;
font-weight: 400;
font-size: 15px;
}
#modal button {
display: block;
width: 50%;
padding: 0.5em 1em;
background: #EDB44C;
color: #fff;
font-size: 15px;
margin: 0 auto 0.5em auto;
border: 1px solid #BEBEBE;
border-radius: 3px;
}
#modalDarkBackground.show {
z-index: 9998;
opacity: 1;
}
#modal.show {
opacity: 1;
z-index: 9999;
transform: translate(-50%, -50%) scale(1);
}
#modal.prepare-hide {
transform: translate(-50%, -50%) scale(1.1);
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<button id="openModal">
Open Modal
</button>
<div id="modalDarkBackground"></div>
<div id="modal">
<h1>Error</h1>
<p id="modalContent">
You do not seem to have an Internet connection. Please check your connection.
</p>
<button id="closeModal">
OK
</button>
</div>

You can rewrite the JS code using style classes.
And I moved styles from JS to a style block.
Now the JS looks better.
const modal = document.getElementById('modal');
const modalDarkBackground = document.getElementById('modalDarkBackground');
document.getElementById('openModal').onclick = function() {
modal
.classList.add('openModal');
modalDarkBackground
.classList.add('modalDarkBackgroundOpen');
}
document.getElementById('closeModal').onclick = function() {
modal
.classList.add('transformScale');
setTimeout(function() {
modal
.classList.replace('openModal', 'closeModal');
modalDarkBackground
.classList.replace('modalDarkBackgroundOpen', 'modalDarkBackgroundClose');
}, 500);
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#modalDarkBackground {
height: 100vh;
width: 100%;
background: rgba(0,0,0,0.5);
transition: all 0.5s;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
#modal {
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
overflow: hidden;
transition: all 0.5s;
opacity: 0;
background: #fff;
}
#modal h1 {
background: #E6E6E6;
color: #ff0C0C;
font-size: 20px;
padding: 0.5em;
border-bottom: 1px solid #C0C0C0;
}
#modal p {
min-height: 70px;
padding: 0.5em;
color: #ff0C0C;
font-weight: 400;
font-size: 15px;
}
#modal button {
display: block;
width: 50%;
padding: 0.5em 1em;
background: #EDB44C;
color: #fff;
font-size: 15px;
margin: 0 auto 0.5em auto;
border: 1px solid #BEBEBE;
border-radius: 3px;
}
#modal.openModal {
opacity: 1;
z-index: 9999;
transform: translate(-50%, -50%) scale(1);
}
#modal.closeModal {
opacity: 0;
z-index: -1;
transform: translate(-50%, -50%) scale(0);
}
#modal.transformScale {
transform: translate(-50%, -50%) scale(1.1);
}
#modalDarkBackground.modalDarkBackgroundOpen {
z-index: 9998;
opacity: 1;
}
#modalDarkBackground.modalDarkBackgroundClose {
z-index: -1;
opacity: 0;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<button id="openModal">
Open Modal
</button>
<div id="modalDarkBackground"></div>
<div id="modal">
<h1>Error</h1>
<p id="modalContent">
You do not seem to have an Internet connection.
Please check your connection.
</p>
<button id="closeModal">
OK
</button>
</div>

You can add a close class while closing the modal, which can have different transition property - this property will use cubic-berzier to give the effect of expanding the modal, before completely contracting it. Then you can use setTimeout to remove the close class.
Here is the code:
const modal = document.getElementById("modal");
const modalDarkBackground = document.getElementById("modalDarkBackground");
document.getElementById("openModal").onclick = function () {
modal.classList.add("open");
modalDarkBackground.classList.add("open");
}
document.getElementById("closeModal").onclick = function () {
modal.classList.add("close");
modal.classList.remove("open");
modalDarkBackground.classList.remove("open");
setTimeout(function () { modal.classList.remove("close"); }, 500);
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#modalDarkBackground {
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
#modalDarkBackground.open {
opacity: 1;
z-index: 9998;
}
#modal {
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
overflow: hidden;
transition: all 0.5s;
opacity: 0;
background: #fff;
}
#modal.open {
opacity: 1;
z-index: 9999;
transform: translate(-50%, -50%) scale(1);
}
#modal.close {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
transition: all 0.5s cubic-bezier(0.17, -0.16, 0.54, -0.42) !important;
}
#modal h1 {
background: #E6E6E6;
color: #ff0C0C;
font-size: 20px;
padding: 0.5em;
border-bottom: 1px solid #C0C0C0;
}
#modal p {
min-height: 70px;
padding: 0.5em;
color: #ff0C0C;
font-weight: 400;
font-size: 15px;
}
#modal button {
display: block;
width: 50%;
padding: 0.5em 1em;
background: #EDB44C;
color: #fff;
font-size: 15px;
margin: 0 auto 0.5em auto;
border: 1px solid #BEBEBE;
border-radius: 3px;
}
<button id="openModal">
Open Modal
</button>
<div id="modalDarkBackground"></div>
<div id="modal">
<h1>Error</h1>
<p id="modalContent">
You do not seem to have an Internet connection. Please check your connection.
</p>
<button id="closeModal">
OK
</button>
</div>

Div will always shift up after refreshing the page

I have 2 divs on the webpage, the flipbook that is created using turnjs and another div containing the buttons. When I load the page, the divs are in the center of the page: https://imgur.com/a/lLb2g2l . After I refresh the page, the divs will shift up and stay there even after refreshing the page. This is how the page looks after refreshing: https://imgur.com/a/guwW0RT .
This is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/test.css" />
</head>
<body>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
<div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
</div>
</div>
</div>
<div class="buttons">
<button type="button" onclick="thePreviousPage()" class="button">Previous</button>
<button type="button" onclick="theHomePage()" class="button">Home</button>
<button type="button" onclick="theNextPage()" class="button">Next</button>
</div>
<script type="text/javascript">
theWindowHeight = $(window).height();
theWindowWidth = $(window).width();
// Create the flipbook
$('.flipbook').turn({
// Width
width: theWindowWidth*0.9,
// Height
height:theWindowHeight*0.7,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
console.log($('.flipbook').turn('size'));
function thePreviousPage()
{
$('.flipbook').turn('previous');
}
function theHomePage()
{
$('.flipbook').turn('page',1);
}
function theNextPage()
{
$('.flipbook').turn('next');
}
</script>
</body>
</html>
This is the css:
body{
overflow:hidden;
background-color:#fcfcfc;
margin:0;
padding:0;
}
.flipbook-viewport{
overflow:hidden;
width:100%;
height:100% !important;
overflow-anchor: none;
}
.flipbook-viewport .container{
position: absolute;
margin: auto;
top: 45%;
left: 37%;
height: 100%;
width: 100%;
}
.flipbook-viewport .flipbook{
top: -30%;
left: -32%;
}
.flipbook
{
transform: translate(-50%, -50%);
}
.flipbook-viewport .page{
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;
}
.flipbook .page{
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
box-shadow:0 0 20px rgba(0,0,0,0.2);
}
.flipbook-viewport .page img{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin:0;
}
.flipbook-viewport .shadow{
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow:0 0 20px #ccc;
-moz-box-shadow:0 0 20px #ccc;
-o-box-shadow:0 0 20px #ccc;
-ms-box-shadow:0 0 20px #ccc;
box-shadow:0 0 20px #ccc;
}
.button{
position: absolute;
align-items: center;
left: 50%;
bottom: 10%;
}
How do I ensure that the contents will not shift up after the page refreshes?

You just need to do some css updates, here are the few css classes are updated,
.flipbook-viewport {
overflow: hidden;
width: 100%;
height: 100% !important;
overflow-anchor: none;
top: 100px;
position: relative;
}
.flipbook-viewport .container {
position: relative;
margin: auto;
top: 45%;
left: 37%;
height: 100%;
width: 100%;
}
.flipbook-viewport .flipbook {
left: auto;
top: auto;
}

My slideshows are not working with node in localhost

As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA5CAYAAABAgbluAAABQmlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSCwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwcDKIM5gzKCTmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsgs5ePLNiyYJnbX/yGf7M4vyS8w1aMArpTU4mQg/QeIk5ILikoYGBgTgGzl8pICELsFyBYpAjoKyJ4BYqdD2GtA7CQI+wBYTUiQM5B9BcgWSM5ITAGynwDZOklI4ulIbKi9IMDh7W5kbqgQQMCppIOS1IoSEO2cX1BZlJmeUaLgCAyhVAXPvGQ9HQUjAyMDBgZQeENUf74BDkdGMQ6EWCIwXAyB/mM8hBDLjmBg2OfLwMDHhxDTbGJg4P/MwHA4tiCxKBHuAMZvLMVpxkYQNvd2BgbWaf//fw5nYGDXZGD4e/3//9/b////u4yBgfkWA8OBbwD1NV/22PjJgQAAAFZlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA5KGAAcAAAASAAAARKACAAQAAAABAAAAKqADAAQAAAABAAAAOQAAAABBU0NJSQAAAFNjcmVlbnNob3TwILGCAAAB1GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj40MjwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj41NzwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrUovx8AAAC1ElEQVRoBe2YPY7iQBBGC2NiCEkQATE3gACJBEIEEgEiIEdcgiMRQMYdiDkGSIifXV6vquUVDGMbe6YCSvLYY7u7n6vqq266sFqt/txNLpeLnM9nmU6n0ul0ZLfbiSULisWi3G43x1QoFIT/LVqAN6Nw1+tVALZmAVB4FGA9c23NnEeB0rAHQWCN0fF4UADxpMWwQ+pCDxyqJ/QqLGtu9TmKoPCqWY+iciA17BaF5EIPpKrdamlyoECq0sMwdJ61lp/whPwBNioo7r1rzWZTZrOZ72az2ch6vfb/J70Io+LJUkyTyUSGw6HnORwOb4H6OgqwHr73lBelUkn6/X7K1s+buWlIxUQtzcJGo5FUKpUsuvJ9OFA8gKmo/NMUF+12W5bLZYqWr5uElCfWoZSmtKBUi1arJYPBQHq9nuiHvx462dOQsHMocFzYxWIhKLvRaEi9Xs8FLvopTvWqfM54No6h6mq1GufVTN5xORqdNvGsRfOrJ/UqaWDRQkKteQpg3Bwdj8dSLpefflO325X5fP70WdqbbgpFtafTyUHGzdH9fv/lmHnk7t2B/1b25CaQmgJfUvzSAzeFRr0IqEVYF3oF40y+RqvALznwYVhXngg/87xVb0L933qUG+pdri2Zq6MAqZii+WoKVMHITbxpdmaihlrOTY1qoFMmsKhdPawvWDk7UCAVOO4U+tMf8Nkfzdrjfu+J/NRZyeTMpFBamszmqILqKgpgi+ZX+J/90YzCE1DgmTZJAS36GfWdaTe+jgIKtNkcpSSp0i3vj/pNMjyJR3UqfSdux+Pxofmzew8vvbiRy/7odruVWq32Ytjkj3LZH02O8X0LH3rElNX+6PfDJn/Dgeo2oYoqeTf5t/DlCSGZBkXlHPrjziqsn+sJnpao/AOZfASXo7qCornZX6F4UQ9Asyj49JO1uUWJ5imdm81R4HSOBxL1W7Q722d/NNPA/AVJbXhhhHAPmQAAAABJRU5ErkJggg==">
</div>
<div class ="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAzCAYAAAAKLSELAAABQmlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSCwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwcDKIM5gzKCTmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsgs5ePLNiyYJnbX/yGf7M4vyS8w1aMArpTU4mQg/QeIk5ILikoYGBgTgGzl8pICELsFyBYpAjoKyJ4BYqdD2GtA7CQI+wBYTUiQM5B9BcgWSM5ITAGynwDZOklI4ulIbKi9IMDh7W5kbqgQQMCppIOS1IoSEO2cX1BZlJmeUaLgCAyhVAXPvGQ9HQUjAyMDBgZQeENUf74BDkdGMQ6EWCIwXAyB/mM8hBDLjmBg2OfLwMDHhxDTbGJg4P/MwHA4tiCxKBHuAMZvLMVpxkYQNvd2BgbWaf//fw5nYGDXZGD4e/3//9/b////u4yBgfkWA8OBbwD1NV/22PjJgQAAAFZlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA5KGAAcAAAASAAAARKACAAQAAAABAAAAKaADAAQAAAABAAAAMwAAAABBU0NJSQAAAFNjcmVlbnNob3SW3B9UAAAB1GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj40MTwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj41MTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqG8ogmAAAD8UlEQVRoBe1YSyhtURj+DjfPPAuRIuRVBgYiJiQTEYWBkVJMZIASErcYMPEqUgZIyYCJoiRGkglJ8sgjiVImHnnlde+/i85eax1rLc651+2eVbLX97++/a/9r/WvYwkPD3/FNx8u35yfQc9J0l6r5Mzkf5XJH/Z424SEBOTm5iI6OhrBwcEICgrC6+srDg8Psb+/j4ODA+P/5uYmHh4etENavrJPZmZmorW1FTExMUqBiXBNTQ3W19eV9N+UPkXSxcXFIFdeXv7mR/n/8/Mz+vv70dPTg8fHRyU7V19f359KmlZKDQ0NqKystELUH+kFU1NTERkZidnZWSVD7UxmZ2djeHgYFouFC0DfIS3p2toabm5uEBUVheTkZPj5+XG6BJSWlmJpaUkoswa1SU5PTxuBrZ3Q89DQEHp7e3F5eWkS+fv7o6WlBSUlJSacJlRQOTk50mXXWm4qEFpqdoyNjRlERJV7f3+Pubk50DKnpaWZTAMDA40dYHt724SzE60Tp7i4mLXH/Pw8mpqaOJwF+vr6sLu7y8JISkriMBbQIilySN+nyqBKHh8f51QTExM5jAW0SIaGhprsr6+vsby8bMI+muzt7XHi+Ph4DmMBLZJhYWEm+5OTE9C+pzro+2SHq6srC3FzZZLu7u7w9PQ0OTg7OzPNZRNR1mRFQz6Vz26q3Pz8fHh5eb1zOT8/f3+WPdC+WlBQwKltbW1xGAsokyTDjY0N1l55XlFRYZw0rAE1HbKhvNwyRx/J8/LyUF9fz6kcHx9jZmaGw1lAK5OssWzu5uaG2tpaVFVVcap0hNbV1eH29paTsYDDSFIT0dHRYbONo/11ZWWF5SOc251kSEiIcXQWFRUJmxBiQZt6W1ubkJAItBtJWloqjurqanh7e4ti4e7uDo2NjZiamhLKbYF2IZmVlWVkJiIiwlYco8mgLv709NSmji3Bl0h6eHigubkZZWVltvzj6OjI6OIXFxdt6sgEnyZJpwddA2JjY4UxLi4uQJ3PyMiItF8UOrACP0WSboWTk5PCjvvp6Qmjo6Po7u7mGmCruFqP2iQDAgIMEqIrwerqqlHZOzs7WiRkytokBwcHISqQgYEBdHZ24uXlRRZTW65FMj09HfTHjq6uLmN5Wdxec62zu7CwkIs7MTHhUIIUUPm2SJs1XVWtv8WrqyukpKQonb/c22kAysudkZFhImi84e8eUXRV1YgP6u4XFhY+NFEmGRcXxzny8fFBe3s7h+sA1JnLSCp/k/SzyN8ayiRF286fIq1MkgrHEYN+M5IN5eqWOXKkXDmTjiQh8+0kKcuQqtyZSdVMyfScmZRlSFXuzKRqpmR6/0QmfwHA4zESzpQpugAAAABJRU5ErkJggg==">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

How to show block below fixed container with jQuery?

Please someone help me out on this I got stuck in my code. I'm putting my code complete below please have a look and please try to provide better solution.
<!DOCTYPE html>
<!--[if lte IE 7]><html id="ie" class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 8]><html id="ie8" class="no-js lt-ie10 lt-ie9" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 9]><html id="ie9" class="no-js lt-ie10" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<!-- <link rel="stylesheet" href="css/site.css" /> -->
<link href='https://fonts.googleapis.com/css?family=Exo:400,100,200,300,500,600,700,800,900|Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
body.ticketDetail {
margin: 0;
padding: 0;
color: #292929;
font: 400 14px "Exo",sans-serif;
}
.fixed-container {
position: fixed;
top: 0;
}
.main-container {
padding: 85px 30px 100px;
background: none;
}
.toggle-wrap {
position: fixed;
z-index: 9;
box-shadow: 3px 0px 5px #000;
height: 59px;
}
.toggle-wrap {
width: 100%;
background: #f3f3f3;
background: rgba(243,243,243,0.8);
filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
}
.container-right>div {
height: 175px;
border-left: 13px solid #bbc3c6;
background: #f4f4f4;
margin: 0 0 8px;
-webkit-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-moz-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-ms-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-o-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
transition: transform .35s ease-in-out, background 0.8s ease-in-out;
}
.e-stand-b {
border-left: 13px solid #f39c11 !important;
}
.e-stand-a {
border-left: 13px solid #f1c40f !important;
}
.n-stand-a {
border-left: 13px solid #3497db !important;
}
.n-stand-b {
border-left: 13px solid #297fb8 !important;
}
.s-stand-a {
border-left: 13px solid #dae0e0 !important;
}
.w-stand-a {
border-left: 13px solid #e74b3c !important;
}
.w-stand-b {
border-left: 13px solid #c1392b !important;
}
.container-right>div:before {
content: '';
display: table;
}
.container-right>div:after {
content: '';
display: table;
clear: both;
}
.container-right>div:hover {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-ms-transform: scale(1.03);
-o-transform: scale(1.03);
transform: scale(1.03);
background: #000;
background: rgba(0,0,0,0.5);
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
.main-container .container-fluid {
padding: 0;
position: relative;
}
.container-right-column {
float: right;
width: 100%;
}
.container-right {
margin-left: 650px;
position: relative;
}
.container-left {
position: relative;
float: left;
background: #f4f4f4;
text-align: center;
width: 630px;
margin-right: -100%;
height: 635px;
}
.container-left h2 {
color: #9C9A9A;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 35px 0 34px;
}
.container-left img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.container-left a {
position: absolute;
opacity: 0;
transition: opacity .5s ease-in;
outline: none;
}
a.e-stand-b {
top: 14%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.e-stand-a {
top: 22%;
left: 20%;
z-index: 2;
width: 60%;
height: 8%;
}
a.n-stand-b {
top: 21%;
left: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.n-stand-a {
top: 28%;
left: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.s-stand-b {
top: 21%;
right: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.s-stand-a {
top: 28%;
right: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.w-stand-b {
bottom: 10%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.w-stand-a {
bottom: 18%;
left: 18%;
z-index: 2;
width: 63%;
height: 8%;
}
</style>
</head>
<body class="ticketDetail">
<div class="toggle-wrap">
</div>
<div class="main-container">
<div class="container-fluid">
<div class="container-right-column">
<div class="container-right">
<div class="e-stand-a">
</div>
<div class="s-stand-a">
</div>
<div class="w-stand-a">
</div>
<div class="n-stand-a">
</div>
<div class="e-stand-b">
</div>
<div class="s-stand-b">
</div>
<div class="w-stand-b">
</div>
<div class="n-stand-b">
</div>
</div>
</div>
<div id="fixed-container">
<div class="container-left">
<h2>Stadium Name</h2>
<img src="images/goan-stadium-img.png" alt="stadium" usemap="#Stadium" id="#Stadium" />
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 765) {
$('#fixed-container').css('position', 'initial');
}
if (windowSize > 765) {
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="b-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('b-'+stand_class);
});
// ----------***********Ticket Detail Hover method***********---------------
$("div.e-stand-a, div.e-stand-b, div.s-stand-a, div.s-stand-b, div.w-stand-a, div.w-stand-b, div.n-stand-a, div.n-stand-b").mouseenter(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).addClass('b-'+stand_class[0]);
}).mouseleave(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).removeClass('b-'+stand_class[0]);
});
/*$('#floatingElement').followMe({ container: '.container-column-main' });*/
}
if (windowSize <= 765) {
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').attr('href', '#to-top');
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="bm-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)bm-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('bm-'+stand_class);
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
var sliderTop = $('.container-right').height(); // header size
console.log(sliderTop);
$(window).scroll(function () {
//var notAnimated = true;
var scrollTop = $(window).scrollTop();
//console.log(sliderTop + " " + scrollTop);
if (scrollTop > 300) {
$('#fixed-container').addClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '300px');
}
if (scrollTop > sliderTop) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
if (scrollTop < 300) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
});
</script>
</body>
</html>
Right now when I click on the left side stadium anyone of block so accordingly in the right side column it is sliding down at the top of the right container.
And after scrolling down the page I make the left container position fixed and right container scroll-able. And clicking on any stadium block the right container blocks showing on top of container only.
But what I really want that when I scroll down and then click on the left container stadium block, the right container blocks should be shown in visible window not at the top of the right container.
Please someone help me out it's really needy... And please let me know.
Thanks

Remove CSS applied by a click event

So I'm having trouble toggling this switch to change the background color. Im not sure how to get it to remove the CSS that it applies to the document. I want it to toggle between to different colored backgrounds.
Here's my code:
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<label class="switch"><input id="input" type="checkbox" /><div></div></label>
</div>
<footer>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript" src="js.js"></script>
</footer>
</body>
</html>
The Styles:
html {
background: #878476;
}
.container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height: 40px;
margin: auto;
text-align: center;
}
.switch input {
position: absolute;
opacity: 0;
}
.switch {
display: inline-block;
font-size: 20px; /* 1 */
height: 1em;
width: 2em;
background: #BDB9A6;
border-radius: 1em;
}
.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #FFF;
box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
transition: all 300ms;
transition: all 300ms;
transition: all 300ms;
}
.switch input:checked + div {
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
And the JS:
$(document).ready(function() {
console.log( "Coffee Isn't strong enough for me to remember how to toggle the OnClick" );
$(".switch").on("click", function() {
$("html").css("background", "blue");
});
});

You can use toggle class here is link for more information http://api.jquery.com/toggleclass/
$("#input").on("click", function() {
$("html").toggleClass("bck-change");
});
And also i've modified your code pls refer: https://jsfiddle.net/eLgqe2ya/