Develop Reference

JQuery on("click") effect happens but doesn't last after moving mouse

So I'm having the following problem.
On the snippet below you'll see parts of a larger page project I'm creating.
I've a parent DIV that has 2 main children in the form of flex:row - left and right side.
(With lots of sub-divs/classes each, that are not displayed here)
The "Products" button is an element/class that belongs in the "Left Side".
The Image (color in this snippet) is an element/class that belongs in the "Right Side".
When you click on the "Products" button, 2 other buttons appear, and then, when you hover to any of the 3 buttons, the image of the "Right Side" (color) changes accordingly.
What I want is to click on the "All Products" button, and change the image(color) of the "Right Side".
But what happens, is that it changes after I click, but the moment I move my mouse, it changes back.
This doesn't happen when I hover in any of the 3 buttons.
The image changes but it remains the same, wherever I move my mouse, as it should, unless I hover to another button.
I tried some methods but I didn't come up with any solution.
Any ideas, ladies and gentlemen?
$(document).ready(function() {
var btn_state = true
$("#main_pr_btn").on("click", function(){
if (btn_state != false){
btn_state = false;
$("#main_pr_btn").addClass("active");
$("#all_pr_btn").fadeIn(0300);
$("#recipes").fadeIn(0600);
}
else
{
btn_state = true;
$("#main_pr_btn").removeClass("active");
$("#all_pr_btn").fadeOut(0200);
$("#recipes").fadeOut(0400);
}
})
$("#main_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "45px 45px 150px 50px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "white", "background-size": "115%"});
})
$("#all_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "-45px 35px 100px 20px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "red", "background-size": "180%"});
})
$("#recipes").hover(function(){
$(".right_side_img").css({"box-shadow": "0px 0px 150px 50px #80ffcc"});
$(".right_side_img").css({"background-color": "blue", "background-size": "140%"});
})
$("#all_pr_btn").on("click", function(){
$(".right_side_img").css({"background-color": "yellow", "background-size": "140%"});
$(".left_side_first_page").find("#buttons").css({
"visibility": "hidden",
"opacity" : "0",
"transition" : "0.3s ease-in-out"
});
})
})
html {
height: 100%;
}
body {
background-image: linear-gradient(35deg, #073b0e, rgb(2, 17, 54));
font-family: "Aloevera", sans-serif;
background-repeat: no-repeat;
}
.section_1 {
height: 100%;
display: flex;
flex-direction: row;
margin: 5%;
font-family: "Didact Gothic";
}
.section_1 .parent_left_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
justify-content: flex-start;
height: 70vh;
padding: 1vh;
}
.section_1 .parent_left_side .left_side_first_page {
background-color: transparent;
display: flex;
flex-direction: column;
word-break: break-all;
height: 70vh;
justify-content: flex-start;
}
.section_1 .parent_left_side .left_side_first_page #buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 20%;
transition: 0.5s ease-in-out;
z-index: 10;
}
.section_1 .parent_left_side .left_side_first_page #buttons .active button {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
padding-left: 20px;
padding-right: 20px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_second_page {
background-color: rgb(0, 71, 62);
display: none;
height: 70vh;
width: 100%;
margin-right: 20%;
margin-top: 100%;
align-self: center;
transition: 0.5s ease-in-out;
z-index: 1;
box-sizing: border-box;
border: solid 0px #ffffff;
box-shadow: inset 0px 0px 30px 10px #ffffff, 0px 0px 20px 1px rgb(255, 255, 255);
}
.section_1 .right_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
height: 60vh;
justify-content: flex-start;
align-items: center;
padding: 1vh;
}
.section_1 .right_side .right_side_img {
background-color: white;
height: 55vh;
width: 55vh;
background-size: 115%;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 45px 45px 150px 50px rgb(255, 255, 255);
transform: translate3d(0px, 0px, 0px);
transition: 0.5s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link rel="stylesheet" href="../mycss/style.css">
<link href="http://fonts.cdnfonts.com/css/aloevera" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="section_1">
<div class="parent_left_side">
<div class="left_side_first_page">
<div id="buttons">
<div id="main_pr_btn">
<button type="button">
Products
</button>
</div>
<div id="all_pr_btn">
<button type="button">
All Products
</button>
</div>
<div id="recipes">
<button type="button">
Recipes
</button>
</div>
</div>
</div>
<div class="left_side_second_page">
</div>
<div class="right_side">
<div class="right_side_img">
</div>
</div>
</div>
<script src="../myjs/mainpage.js"></script>
</body>
</html>

css toggle nailboard effect

The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).
Update - modified the code:
I added #keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.
$("#toggle").click(function() {
$(".wrapper").toggleClass("animate")
$(".properties").toggleClass("animate")
$(".button").toggleClass("animate-button")
})
body {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: left;
color: #757575;
cursor: default;
overflow: hidden;
background: #ECF0F3;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 350px;
padding: 40px 35px 35px 35px;
margin: 30px;
border-radius: 20px;
background: #ecf0f3;
visibility: hidden;
}
.animate {
animation-name: fadeInDiv;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.animate-button {
animation-name: fadeInButton;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes fadeInDiv {
0% {
opacity: 0.8;
visibility: visible;
box-shadow: inset 0px 0px 0px #cbced1,
inset -0px -0px 0px #ffffff;
}
100% {
opacity: 1;
visibility: visible;
box-shadow: inset 10px 10px 10px #cbced1,
inset -10px -10px 10px #ffffff;
}
}
#keyframes fadeInButton {
0% {
box-shadow: 0px 0px 0px #b1b1b1,
-0px -0px 0px #ffffff;
}
100% {
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
}
}
#title {
text-align: center;
font-size: 24px;
padding-top: 10px;
letter-spacing: 0.5px;
}
.visible {
visibility: visible;
}
#sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.field-icon {
font-family: FontAwesome;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
width: 40px;
color: #F59B69;
}
.fields {
width: 100%;
padding: 45px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 16px;
color: #555;
padding:20px 10px 20px 5px;
width: fit-content;
}
.properties {
padding-left: 10px;
margin-bottom: 20px;
border-radius: 25px;
}
#confirm-button {
position: relative;
bottom: 0;
left: 0;
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 50px;
border-radius: 30px;
font-size: 20px;
color:#fff;
text-align: center;
background: #F59B69;
margin-top: 30px;
}
#cancel-button {
position: absolute;
top: 0;
right: 0;
margin: 20px;
outline: none;
border:none;
cursor: pointer;
width: 50px;
height: 30px;
border-radius: 30px;
font-size: 14px;
color:#fff;
text-align: center;
background: #F59B69;
}
#confirm-button:hover, #cancel-button:hover {
background:#fff;
color: #F59B69;
}
#confirm-button:active, #cancel-button:active {
box-shadow: inset 3px 3px 8px #b1b1b1,
inset -3px -3px 8px #ffffff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Playground</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button id="toggle">toggle</button>
<div class="wrapper">
<div id="title">Title</div>
<div id="sub-title">Sub-Title</div>
<div class="fields">
<div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>
<div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
<button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
</div>
<button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
</div>
</body>
</html>

I think you are searching for animating visibility so it appears like a
pin?
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.
In that case:
visibility: hidden; -> visibility: visible;
followed by:
shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.

Getting info from placeholder to label

I have code below for a contact form I am creating using HTML, CSS and JavaScript. Is it possible to have label2 under the preview button page to say whatever the user typed into the Detail placeholder on the main page? So if someone wrote "Hello" in the Detail placeholder, label2 on the preview page would say "Hello". Anything helps, cheers.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

You could add a new label which contains the value of the relative input, then set its innerHTML with the value you need, so:
add an id to the detail input (placeholder) (ex: id="txtDetail")
add a label (near the label "Detail:" to show the value of txtDetail
finally, before to show the preview, copy the value from txtDatail to label, like:
var input = document.getElementById("txtDetail");
var value = input.value; //<-- getting the value from input text
var label = document.getElementById("labelDetail");
label.innerHTML = value; //<-- setting that value in the label in preview section
See following snippet, please:
function openNav() {
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>
I hope it helps you, bye.

you can use jQuery. here is your edited fiddle:
function openNav() {
document.getElementById("myNav").style.width = "100%";
var detail = $('textarea').val(); //gets the value in the textarea
$('#label2').text(detail); //inserts the value into label2
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

get appended values to be noticed by document.ready function

Is there a way for a document.ready function to notice an append function when the page has already been rendered?
Below is the document.ready function along with code snippet. Tried a few different things for example window.onload and still no fix
jQuery(document).ready(function() {
var index = 1;
var testNum =1;
var slideLen = $('.slide-container').length;
$('.slide-thumb').click(function (event) {
var slideNum = $(this).attr('data-slide');
var el = $('.slide-container[data-slide=' + slideNum + ']');
index = slideNum;
$(el).addClass('show-slide');
$(el).siblings('.slide-container').removeClass('show-slide');
$(this).siblings('.slide-thumb').removeClass('show-slide-thumb');
$(this).addClass('show-slide-thumb');
});
function autoSlide() {
timer = setInterval(function () {
if (index >= slideLen) {
index = 0;
}
$('.slide-thumb[data-slide=' + ++index + ']').click();
testNum++;
}, 6000);
}
autoSlide();
});
function showDetails(elementID) {
$('.details-container').addClass('show');
$('.top-section').append(
'<span id="car_name" style="font-size:2em">' + obj[0].make + '</span>' +
'<span id="car_price" style="float:right;font-size:2em;font-weight: bold;color:#23F4ED;" >' + '¢' + obj[0].price + '</span>'
);
$('.slide').find('.slide-container').remove();
$('.slide').append
(
'<li class="slide-container show-slide" id="sl" data-slide="1"><div class="slide-image" style=" background:url(' + obj[0].image + '); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>'
+
'<li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url('+obj[0].image2+'); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>'
);
$('.thumbs').find('.slide-thumb').remove();
$('.thumbs').append
(
'<li class="slide-thumb show-slide-thumb" id="hit" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>'
+
'<li class="slide-thumb" id="hit" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>'
);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
font-weight: 300;
-webkit-font-smoothing: antialiased
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
p {
margin-bottom: 20px;
line-height: 2;
font-size: 1rem;
font-weight: 300;
}
html {
background-color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
body {
width: 100vw;
font-family: 'open sans', sans-serif;
font-size: 100%;
font-weight: 300;
color: #212121;
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-font-smoothing: antialiased
}
header {
width:inherit;
}
.menu-bar{
height:70px;
width:100%;
background: #02243E;
}
.menu-bar .section-container{
padding: 0px;
display: table;
}
.logo-container{
display: inline-block;
vertical-align: top;
height: 70px;
}
.logo-container h1{
margin-top: 20px;
color: #40C2F1;
}
.menu-container{
float: right;
display: inline-block;
height: 70px;
}
.menu{
width: inherit;
height: inherit;
vertical-align: middle;
display: table-cell;
}
.logo{
display: flex;
height:55px;
font-size: 1.5rem;
justify-content: flex-start;
}
.menu ul{
display: flex;
justify-content: flex-end;
color: #40C2F1;
list-style-type: none;
}
.menu-item{
margin-left: 40px;
}
.banner-wrap{
height:50vh;
background: #D6D6D6;
width: inherit;
}
.section-title{
width:100%;
text-align: center;
margin-bottom:25px;
color:
}
.mini-section-title{
width:100%;
text-align: center;
margin-bottom:25px;
}
.content-text{
color:#95989A;
padding: 0px 25px;
}
.section-container{
padding:50px 0px;
width: 90vw;
max-width: 1250px;
margin: 0 auto;
height:inherit;
}
.content-area{
vertical-align: top;
width: 75%;
display: inline-block;
height: auto;
}
.side-content{
width: 24%;
height: auto;
display: inline-block;
}
.welcome-section{
height:auto;
}
.welcome-section .section-title{
color: #40C2F1;
}
.categories-section{
height:auto;
border: 1px solid #C9CACA;
background: #F8FAFC;
}
.categories-section .mini-section-title{
color: #3F3F3F;
}
.contact-section{
height:300px;
width: inherit;
background: #40C2F1;
display: table;
}
.contact-section .innerwrap{
color:white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.submit-button{
width:auto;
padding:20px 40px;
color:white;
border:none;
border-radius:5px;
background:#23F4ED;
}
.category-wrap{
width: auto;
}
.category-card{
cursor: pointer;
margin: 25px 10px;
display: inline-block;
border-radius: 5px;
width: 27vw;
max-width: 393px;
height: 25vw;
max-height: 393px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.cat-icon-wrap{
display:table;
width: 100%;
height:75%;
border-bottom: 1px solid #C9CACA;
}
.cat-icon{
display:table-cell;
vertical-align: middle;
}
.cat-img{
margin:0 auto;
width:45%;
height:56.25%;
background: black;
}
.cat-description{
display: table;
width: 100%;
height:24%;
}
.cat-text{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #40C2F1;
}
.line{
height: 1px;
width: 100%;
background: #95989A;
}
.footer-top{
width: 100%;
height: auto;
}
.social-icons{
color: #40C2F1;
text-align: right;
}
.sitemap{
color: #40C2F1;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.footer-content{
width: 100%
}
.footer-bottom{
padding:20px 0px;
color: #40C2F1;
width: 100%;
}
.foot-link{
margin-bottom:15px;
}
.footer-icon{
font-size: 2.5rem;
margin-left:5px;
display: inline-block;
width: auto;
}
.base-left{
text-align: left;
float: right;
}
.base-right{
text-align: right;
}
.footer-column{
vertical-align: top;
width: 24.5%;
display: inline-block;
height:200px;
}
.search-banner{
height:auto;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.search-field-wrap{
height: auto;
width: 100%;
margin: 50px 0px;
}
.combobox{
border-radius: 5px;
height:40px;
width: 15vw;
padding: 5px;
text-align: center;
border:1px solid #C9CACA;
display: inline-block;
margin: 0px 10px 0px 10px;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.button-wrap{
width: 100%;
text-align: center;
}
.image-card{
cursor: pointer;
margin: 0px 10px 25px 0px;
display: inline-block;
border-radius: 5px;
width: 20vw;
height: 25vw;
max-width: 295px;
max-height: 320px;
background: #fff;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.card-wrap{
display:table;
width: 100%;
height:65%;
border-bottom: 1px solid #C9CACA;
}
.card-icon{
width:100%;
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px 5px 0px 0px;
}
.card-img{
margin:0 auto;
width:45%;
height:56.25%;
background: black;
}
.card-description{
width: 100%;
height: 35%;
}
.card-text{
display: inline-block;
text-align: center;
width: 49%;
height:100%;
color: #40C2F1;
}
.card-text-wrapper{
display: table;
width:100%;
height: 100%;
text-align: center
}
.vehicle-details{
margin-bottom: 2px;
line-height: 1.2;
font-size: 0.7rem;
}
.vehicle-name{
font-size: 1rem;
line-height: 1;
margin-bottom: 5px;
}
.card-details{
padding-left: 15px;
display: table-cell;
vertical-align: middle;
text-align: left;
}
.price-tag{
display: table-cell;
vertical-align: middle;
font-size: 1.5rem;
font-family: 'lato', -serif;
font-weight: 700;
color: #23F4ED;
}
.ad-images{
width: 100%;
margin-bottom: 25px;
}
.top-section{
height:250px;
width: 100%;
}
.details-container{
position:fixed;
margin: 0;
padding-top: 10%;
padding-bottom: 10%;
width:100%;
opacity: 0;
height:100%;
background: rgba(2,36,62,0.3);
z-index: 1000;
transition:all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
visibility: hidden;
/* Safari */
}
.show{
visibility: visible;
opacity: 1;
}
.details-card{
display: block;
margin: auto;
padding:15px 11px;
padding-top:;
height: auto;
width: 800px;
background: white;
border-radius: 5px;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.details-card-header{
height: 40px;
}
.close-button{
cursor: pointer;
color: #C9CACA;
font-size: 1.5em;
font-weight: bolder;
float: right;
background: none;
border: none;
}
.details-card-content{
/*height: 90%;*/
height: 500px;
overflow-y: scroll;
padding: 11px;
}
/*.details-card{*/
/*height: 900px;*/
/*overflow-y: scroll;*/
/*padding: 11px;*/
/*}*/
.details-card-content::-webkit-scrollbar {
width:8px;
background: white;
}
.details-card-content::-webkit-scrollbar-track {
width: 15px;
}
.details-card-content::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #C9CACA;
}
.slider-card{
margin: 0px 10px 25px 0px;
width: 100%;
max-width: 900px;
height:425px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
margin-top: -150px;
}
.car-details-card{
margin: 0px 10px 25px 0px;
border-radius: 5px;
display:inline-block;
width: 470px;
height:40vh;
max-height: 300px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.contact-card{
vertical-align: top;
margin: 0px;
display:inline-block;
border-radius: 5px;
width: 262px;
height:25vw;
max-height: 300px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.slide {
overflow: hidden;
/*border: 4px solid #E74C3C;*/
/* border: 4px solid #3498DB;*/
}
.slide-container{
opacity:0;
transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.show-slide{
opacity:1;
}
.slide-thumb {
opacity: 0.5;
}
.show-slide-thumb {
opacity: 1;
}
.slide, .slide li, .slide-image {
width: 100%;
height: 350px;
position: relative;
border-bottom:1px solid #C9CACA;
margin-top: -8px;
padding: 0px;
}
.slide li {
position: absolute;
z-index: 50;
}
/*Animation For Slider*/
#-webkit-keyframes
slider { 0% {
left: -500px;
}
100% {
left: 0;
}
}
.slide li:target {
z-index: 100;
-webkit-animation: slider 1s 1;
}
/*Not Target*/
#-webkit-keyframes
noTarget { 0% {
z-index: 75;
}
100% {
z-index: 75;
}
}
.slide li:not(:target) { -webkit-animation: noTarget 1s 1; }
.thumbs {
margin-bottom: 10px;
display: flex;
justify-content: center;
padding: 0px;
}
.thumbs li, .thumbs li a {
width: 98px;
height: 55px;
}
.thumbs li{
list-style-type: none;
}
.thumbs a {
/*display: block;*/
position: relative;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25), inset 1px 1px 0px rgba(0, 0, 0, 0.15);
}
.thumbs li a img {
width: 90px;
height: 45px;
border:1px solid #C9CACA;
}
.thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -30px;
display: block;
width: 98px;
height: 25px;
text-align: center;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: -moz-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: -o-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: -ms-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: linear-gradient(top, #fff 0%, #bcbcbc 100%);
}
.thumbs li a:hover span::before {
width: 0;
height: 0;
border-bottom: 5px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
position: absolute;
top: -5px;
left: 44px;
}
.card-header{
height:25%;
width: 100%;
display: table;
height: 45px;
border-bottom:1px solid #C9CACA;
text-align: center;
}
.card-header h1{
vertical-align: middle;
display: table-cell;
font-size: 1rem;
color: #40C2F1;
}
.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
margin-right:5px;
margin-bottom: 10px;
padding: 12px 15px;
display: inline-block;
/* Styles */
background: #fff;
border-radius: 5px;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
.inactive{
/* Size & position */
background: #f2f2f2;
pointer-events: none;
}
.wrapper-dropdown-5:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #4cbeff transparent;
}
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
width: auto;
min-width: 200px;
/* Styles */
background: #fff;
border-radius: 5px;
list-style: none;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: scroll;
}
.dropdown::-webkit-scrollbar {
width: 0.5em;
background: white;
border-radius: 5px;
}
.dropdown::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #C9CACA;
}
.dropdown::-webkit-scrollbar-track {
border-radius: 5px;
}
.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
}
.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;
}
.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}
.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}
.wrapper-dropdown-5.active {
background: #4cbeff;
box-shadow: none;
border-bottom: none;
color: white;
}
.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}
.mini-left{
width: 100px;
margin: 0;
padding: 12px 15px;
display: inline-block;
border-radius: 5px 0 0 5px;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
outline: none;
transition: all 0.3s ease-out;
}
.mini-right{
width: 100px;
margin: 0;
margin-right: 5px;
margin-left: -5px;
padding: 12px 15px;
display: inline-block;
/* Styles */
border-radius: 0 5px 5px 0 ;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
/* pagination */
.archive-pages{
}
.wrapper{
background-color:red;
margin:50px auto;
width:100%;
}
/*****Delete this*****/
.archive-pages li.selected{
color:white;
}
.archive-pages a,
.archive-pages a:visited{
color:#555;
}
.archive-pages li.selected{
color:white;
padding:5px;
width:25px;
line-height:20px;
background: #063c65;
}
.archive-pages li.selected:hover{
cursor:default;
background: rgb(53,121,214);
}
.archive-pages li:hover{
background: #f2f2f2;
}
.archive-pages li a{
cursor:pointer;
line-height:20px;
display:block;
padding:5px;
float:left;
width:25px;
text-aling:center;
}
.archive-pages{
display:block;
float:left;
padding:0px;
margin:0px;
font-size:.8em;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.archive-pages ul{
float:left;
margin:0px;
padding:10px;
list-style:none;
}
.archive-pages li{
border:1px solid #C9CACA;
float:left;
font-weight:700;
margin:0 2px;
text-align:center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: white;
-moz-box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
}
.archive-pages .first a,
.archive-pages .previous a,
.archive-pages .next a,
.archive-pages .last a{
overflow:hidden;
white-space:nowrap;
-webkit-transition-duration: 300ms;
-webkit-transition-property: width,text-indent,letter-spacing;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 300ms;
-moz-transition-property: width,text-indent,letter-spacing;
-moz-transition-timing-function: ease;
-o-transition-duration: 300ms;
-o-transition-property: width,text-indent,letter-spacing;
-o-transition-timing-function: ease;
}
.archive-pages a{
text-decoration:none;
}
.archive-pages .next a:after,
.archive-pages .last a:after{
content:" »";
}
.archive-pages .first a:before,
.archive-pages .previous a:before{
content:'« '
}
.archive-pages .first a:hover,
.archive-pages .previous a:hover,
.archive-pages .next a:hover,
.archive-pages .last a:hover{
width: 100px;
text-indent:0;
letter-spacing:0px;
}
.archive-pages .first a{
text-indent:+6px;
letter-spacing:10px;
}
.archive-pages .previous a{
text-indent:+7px;
letter-spacing:10px;
}
.archive-pages .next a{
text-indent:-159px;
letter-spacing:10px;
}
.archive-pages .last a{
text-indent:-154px;
letter-spacing:10px;
}
/*pagination ends*/
footer{
background: #02243E;
height:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!--META-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
<meta name="theme-color" content=""/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="{{asset('js/jquery.js')}}"></script>
<!--<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
</head>
<body>
<div class="details-container">
<div class="details-card">
<div class="details-card-header">
<button class="close-button">X</button>
</div>
<div class="details-card-content">
</div>
</div>
</div>
<header>
</header>
<div class ="categories-section">
<div class="section-container">
<div class="content-area">
<div class="image-card" onClick="showDetails(1)">
<div class="card-wrap">
<div class="card-icon" style="background-image:url('{{asset('img/car1.jpg') }}')">
</div>
</div>
<div class="card-description">
<div class="card-text">
<div class="card-text-wrapper">
<div class="card-details">
<p class="vehicle-name">make</p>
<p class="vehicle-details">year</p>
<p class="vehicle-details">type</p>
</div>
</div>
</div>
<div class="card-text">
<div class="card-text-wrapper">
<h1 class="price-tag">price</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tSection" class="top-section">
</div>
<div class="slider-card">
<ul class="slide">
<li class="slide-container show-slide" data-slide="1"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>
<li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>
</ul>
<ul class="thumbs">
<li class="slide-thumb show-slide-thumb" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>
<li class="slide-thumb" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>
</ul>
</div>
<div class="car-details-card">
<div id="card-details" class="card-header">
<h1>Car details</h1>
</div>
</div>
<div class="contact-card">
<div id="vendor-details" class="card-header">
<h1>Vendor Contact Info</h1>
</div>
</div>
<footer>
</footer>
</body>
</html>

You need to use jQuery's delegated click handler mechanism.
See Delegated events in http://api.jquery.com/on/
We add a click handler to your ul.thumbs HTML as this is present when we start. However, other slides are able to be added as we proceed. As such, a standard event handler would not work (as you've seen).
Try clicking the dynamically added entries to see this in action.
$(document).ready(function()
{
// We use a deferred click handler here as we will add further slide thumbs as we run...
$("ul.thumbs").on("click", "li.slide-thumb", function(e)
{
alert( $(this).data("slide") );
});
// Dynamically add new slides
for(var i=3; i<10; i++)
{
var $li = $("<li />").addClass("slide-thumb").data("slide", i);
$li.append( $("<img />").attr("src","//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&wid=90&hei=90") );
$("ul.thumbs").append($li);
}
});
img
{
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbs">
<li class="slide-thumb show-slide-thumb" data-slide="1">
<img src="//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&wid=90&hei=90">
</li>
<li class="slide-thumb" data-slide="2">
<img src="//images.clipartpanda.com/car-20clip-20art-nicubunu_Toy_car.png">
</li>
</ul>

Issue with trying to get desired effect

I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is the navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here are my html and css
<!DOCTYPE html>
<html>
<head>
<title>New Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<link href="css/create-post.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/jquery.tagsinput.css" rel="stylesheet">
</head>
<body class="main">
<section>
<nav class="menu">
<ul>
<li class="logo">Lithium CMS</li>
<div class="links">
<li>Dashboard</li>
<li>Messages</li>
<li>Posts</li>
<li>Pages</li>
</div>
</ul>
</nav>
</section>
<section class="content">
<form>
<input type="text" name="post-title" class="post-title" placeholder="Title...">
<div class="post-content-container">
<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
</div>
<div class="post-tags-container">
<input name="post-tags" class="post-tags">
</div>
</form>
<section>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script>
$(function() {
$('.menu-toggle').bind('click', function() {
$('.main').toggleClass('menu-open');
return false;
});
$('.post-content').autogrow();
$('.post-tags').tagsInput({
'width': '100%',
'height': '',
});
});
</script>
</body>
</html>
Here's my CSS
html,
body {
height: 100%;
}
.main {
overflow-x: hidden;
position: relative;
left: 0;
}
.menu-toggle {
background-color: #333333;
border-right: 1px solid #111111;
border-bottom: 1px solid #111111;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-right: 11px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.menu-open .menu-toggle {
left: 210px;
z-index: 4;
}
.menu-open {
left: 210px;
}
.menu-open .menu {
left: 0;
}
.menu,
.menu-toggle,
.main {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu {
background-color: #333333;
border-right: 1px solid #111111;
color: #ffffff;
position: fixed;
top: 0;
left: -210px;
z-index: 3;
height: 100%;
width: 210px;
}
.menu li.logo {
color: #666;
text-shadow: 1px 0px 1px #000000;
font-size: 16px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid #2f2f2f;
}
.menu a {
color: #eaeaea;
text-shadow: 1px 0px 1px #555555;
text-decoration: none;
font-weight: bolder;
font-size: 18px;
}
.menu a li {
border-bottom: 1px solid #2a2a2a;
padding: 10px;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
.menu .links li:hover {
background-color: #2f2f2f;
}
.content {
position: relative;
height: 100%;
}
.post-title,
.post-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
outline: none;
width: 100%;
}
.post-content {
resize: none;
}
.post-title {
background-color: #eaeaea;
font-size: 24px;
padding-left: 50px;
}
.post-content-container {
max-height: 90%;
}
.post-tags-container {
position: absolute;
bottom: 0;
width: 100%;
}
div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}

You can avoid this problem quite easy. Just put .post-tags-container right before the end of the body (right before </body>).