Develop Reference

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>

can't maximize or toggle chatbox, autoscroll not working

My chatbox won't maximize, autoscroll or return to bottom for new input. and also, is there any way to make the popup avatar act as android facebook messenger app, with onclick function to minimize and maximize? any help will really be appreciated here. thanks in advance.
<html>
<head>
<title>chatbox</title>
<style>
.popup-wrap {
top: 100px;
cursor: pointer;
width: 80px;
height: 110px;
position: fixed;
right: 40px;
}
.popup-avatar {
top: 11px;
left: 11px;
background: url(../images/ella1.jpg);
position: absolute;
height: 78px;
width: 78px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-radius:45px 45px 45px 45px
}
.shell-1 {
right: 20px;
background: #583983;
height: 80px;
width: 80px;
padding: 5px;
margin: 5px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.shell-2 {
background: white;
height: 78px;
width: 78px;
padding: 0px 0px 2px 2px;
margin: 0px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.tinyBanner {
background: #583983;
color: white;
height: 24px;
width: 100px;
display: inline-block;
text-align: center;
padding-top:5px;
border-radius: 15px 0px 15px 0px;
}
.msgbox_wrap {
background:white;
width:250px;
height:400px;
position:fixed;
right:20px;
padding:2px 2px 2px 2px;
bottom:0px;
display: none;
border: 1px solid #b0b0b0;
border-radius:10px 10px 0px 0px;
}
.msgbox_wrap-on {
display: block !important;
}
.msg_head{
cursor:pointer;
background:#583983;
padding:15px;
color:white;
bottom:0px;
border-radius:10px 10px 0px 0px;
}
.close{
float:right;
color:white;
}
.msg_wrap{
background:url(../images/m3-act.jpg);
min-width:250px;
height:355px
}
.chatlog {
height:300px;
}
.botMessage {
background-color: #ffffff;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.userMessage {
background-color:#583983;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.convo {
height: 290px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.msg_input {
background:#583983;
height: 42px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
</style>
</head>
<body>
<div class="popup-wrap">
<a href="#" id="addClass">
<div class="shell-1">
<div class="shell-2">
<div class="popup-avatar"></div>
</div>
</div>
</a>
<div class="tinyBanner">Talk to Ella</div>
</div>
<div class="msgbox_wrap" id="qnimate">
<div class="msg_head">Talk to Ella
<div class="close">X</div>
</div>
<div class="msg_wrap">
<div class="convo scroll">
<div id="chatlog"></div>
</div>
<div class="msg_input">
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="You say...." type="text" style="background: #white; height: 41px; width: 237px; font-color: #B1B1B1; font-size: 14px; font-weight: 400; border-radius:5px 5px 5px 5px;">
</form>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// This minimize and close
$(document).ready(function(){
$('.msg_head').click(function(){
$('.msgbox_wrap').animate({height:45},'slow');
});
$('.close').click(function(){
$('.msgbox_wrap').hide();
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//popup chat fromm avatar icon
$(document).ready(function(){
$("#addClass").click(function () {
$('#qnimate').addClass('msgbox_wrap-on');
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//This autoscrolls
setInterval(function(){
$('.msg_wrap').load('convo scroll');
$('#chatlog').animate({scrollTop: $('msg_wrap')[0]}, 1000);
});
</script>
</body>
</html>

Nothing in your code animates the chat box back to full height. You set it to 45px and never do anything else.
$('.msgbox_wrap').animate({height:200},'slow');

Why slideToggle is going downwards and out of the screen?

I am writing some code to toggle a div class. I want to slide down the div up to the bottom of the page and slide up when clicked again.
My HTML code contains:
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name" ></div>
</div>
</div>
and the CSS for this HTML :
.chat-sidebar{
width: 200px;
position: fixed;
height: 370px;;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius:5px 5px 0px 0px;
}
.sidebar-name{
padding-left: 10px;
padding-right: 10px;
margin-top : 0.8cm;
font-size: 20px;
}
.chat_head{
background:#f39c12;
color:white;
padding:2px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
margin-top: -10px;
}
and now I am sliding the main chat-sidebar DIV using jQuery function like :
$(document).ready(function() {
$('.chat_head').click(function(){
$('.chat-sidebar').slideToggle('slow');
});
});
slideToggle is working fine when click the .chat_head div. But it is going down too far so that it is not visible anymore (out of the screen). What am I missing here?

You need to slideToggle the .chat_body instead of the whole wrapper div. So just remove the height from .chat-sidebar and move it to .chat_body. Now apply the slideToggle() function on .chat_body:
$(document).ready(function() {
$('.chat_head').click(function() {
$('.chat_body').slideToggle('slow');
});
});
.chat-sidebar {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-top: 1px;
font-size: 20px;
}
.chat_head {
background: #f39c12;
color: white;
padding: 2px;
font-weight: bold;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
margin-top: -10px;
}
.chat_body {
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name"></div>
</div>
</div>

Try this :
$(document).ready(function() {
$(".head").on("click",function(){
$(".chat-sidebar").slideToggle("slow");
})
})
.wrapper {
border: 1px solid gray;
width: 200px;
position: fixed;
right: 10px;
bottom: 0;
min-height: 50px;
border-radius:3px 3px 0px 0px;
}
.head {
background:#f39c12;
color:white;
font-weight:bold;
cursor:pointer;
position: absolute;
width: 200px;
height: 50px;
border-radius:5px 5px 0px 0px;
}
.chat-sidebar {
background-color: #fff;
height: 200px;
}
<div class="wrapper">
<div class="head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat-sidebar"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

convert css code from :hover to click

i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !

Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/

How to stop a div above the footer

I have read many posts about this issue, but none of them are helping aid the issue I am having. I want to get the nav_bar on the side of the page to stop right about the footer (exactly where the content div ends.) I am sorry, I am not very good with javascript/jQuery. haha
Here is my code for the nav:
<div id="section">
<div id="navbar">
<div id="navbar_contents">
<ul>
<li><img src="images/nav_bar/nav_top.jpg" width="107" height="55" alt="top"></li>
<li><img src="images/nav_bar/nav_portfolio.jpg" width="107" height="55" alt="portfolio"></li>
<li><img src="images/nav_bar/nav_about.jpg" width="107" height="55" alt="about"></li>
<li><img src="images/nav_bar/nav_contact.jpg" width="107" height="55" alt="contact"></li>
<li><img src="images/nav_bar/nav_resume.jpg" width="107" height="55" alt="resume"></li>
</ul>
</div>
</div>
<div id="content">
<h1>THE TOP</h1>
<div id="clear">
</div>
</div>
</div>
and the CSS:
#section #navbar {
background-color: #FFF;
height: auto;
width: auto;
border: 1px solid #000;
float: left;
-moz-box-shadow: 0px 0px 25px 2px #000000;
-webkit-box-shadow: 0px 0px 25px 2px #000000;
box-shadow: 0px 0px 25px 2px #000000;
-webkit-border-radius: 8px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius: 8px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-radius: 8px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-right: 23px;
position: fixed;
}
#section #navbar #navbar_contents {
width: auto;
height: auto;
}
#section #navbar ul {
list-style-type: none;
}
#section #content {
background-color: #FFF;
height: 2000px;
width: 610px;
border: 1px solid #000;
float: left;
margin-left: 200px;
-moz-box-shadow: 0px 0px 25px 2px #000000;
-webkit-box-shadow: 0px 0px 25px 2px #000000;
box-shadow: 0px 0px 25px 2px #000000;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 20px;
padding-left: 40px;
padding-top: 30px;
}
Thank you so much for you help!

Update
Change your CSS:
#section {
width: 940px;
height: 1500px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-left: 0px;
}
The margin-top you had was causing the nav-bar to be pushed down slightly too far.