CSS positioning seems not to be loaded on iOS

CSS positioning seems not to be loaded on iOS - javascript

I'm creating a responsive website but it seems to me the CSS is not loading the positioning of divs on iOS.
How it looked like without JS on iPhone 5s:
So, what I tryed is to find a way around the CSS by javascript and jquery allthough this seems to work, it still doesn't so it's job properly. And the lenth of my code would be enormous if i would declare evere iOS device in new js code like this:
/* Begin iPhone 5 portrait */
if (blockwidth == 67.375) {
$('input[type="date"]').css("width", "53px");
$('input[type="time"]').css("width", "53px");
$('input[type="date"]').css("height", "42px");
$('input[type="time"]').css("height", "42px");
$('input[type="text"]').css("height", "42px");
$('input[type="text"]').css("width", "93%");
$('input[type="button"]').css("height", "50px");
$('#nav_top').css("height", "170px");
$('#nav_logout').css("marginTop", "5px");
$('#nav_account').css("marginTop", "5px");
} else {}
/* Einde iPhone 5 portrait */
The total CSS (also in JSFiddle):
#charset "utf-8";
/* CSS Document */
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
width : 5px;
opacity: 0.2;
}
::-webkit-scrollbar:hover {
width : 5px;
opacity: 0.6;
}
::-webkit-scrollbar-track {
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color : #288328;
}
::-moz-scrollbar {
width : 5px;
-moz-opacity:0.2;
}
::-moz-scrollbar:hover {
width : 5px;
-moz-opacity:0.6;
}
::-moz-scrollbar-track {
background-color : black;
}
::-moz-scrollbar-thumb {
background-color : #288328;
}
/* Kuler:
Olijfgroen: #95c11f
Donkergroen: #288328
Limoengroen: #e3f4ae
Oranje: #f39200
Wit: white
Zwart: black
Grijs: lightgrey
*/
/* OWN CODE CSS */
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
height: 100%;
width: 100%;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../img/page-loader.gif') 50% 50% no-repeat #95c11f;
background-size: 75px 75px;
}
/* BEGIN NAVIGATIE */
aside{
margin: 0px;
height:100%;
width: 25%;
background-color:#95c11f;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
-webkit-box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
}
#aside_logout{
margin-left:20px;
background-color:#288328;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#aside_account{
margin-left:10px;
background-color:#f39200;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#aside_bottom{
width:100%;
height:50px;
position:fixed;
bottom:-10px;
}
#aside_bottom a{
text-decoration:none;
color:white;
text-align:center;
}
.left{
float:left;
}
header{
display:none;
width:100%;
height:70px;
background-color:#95c11f;
-webkit-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
}
#menu_placement{
height:300px;
margin-left:20px;
margin-top:120px;
margin-right:20px;
}
nav{
display:none;
position: fixed;
top:60px;
left:0px;
width:100%;
height:auto;
z-index:500;
}
.men_button{
height:50px;
width:auto;
display:block;
text-align:left;
color: #288328;
font-weight:400;
margin:0 auto;
color:white;
float:left;
}
.men_button a{
text-decoration:none;
color:white;
}
.icon_menubutton{
width:40px;
margin-top:5px;
display:inline-block;
float:left;
}
.menu_content{
display:inline-block;
height:30px;
width:100px;
margin-left:10px;
line-height:50px;
float:left;
}
form{
height: 110px;
}
input{
display:block;
height:50px;
border:none;
border-radius:5px;
text-align:center;
}
input[type='text']{
width:100%;
margin-bottom:5px;
margin-top:10px;
background-image:url(../img/icon_search.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='date']{
display:inline-block;
float:left;
margin:0;
margin-bottom:5px;
background-image:url(../img/icon_date.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='time']{
display:inline-block;
float:left;
margin-left:5px;
margin-bottom:5px;
background-image:url(../img/icon_time.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='text'], input[type='date'], input[type='time'] {
background-color:#e3f4ae;
color:#95c11f;
-webkit-box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
-webkit-appearance: none;
}
input[type='button']{
display:inline-block;
float:right;
margin-left:5px;
margin-bottom:0px;
-webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
background-color: #288328;
color:white;
font-size:18px;
}
#aside_form{margin-top:20px;}
#nav_form{
margin-left:20px;
margin-top:10px;
margin-bottom:5px;
}
#small_logo{
width:100px;
height:auto;
margin-left:20px;
padding: 0;
border: 0;
float:left;
-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
-moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
}
header #small_logo{
width:60px;
position: fixed;
top:0px;
left:0px;
z-index:500;
height:auto;
margin-left:10px;
margin-right:10px;
padding: 0;
border: 0;
float:left;
-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
-moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
}
#menu_opener{
width:40px;
margin-top:15px;
margin-right:15px;
height:auto;
float:right;
}
#logo{
width:100%;
height:auto;
padding: 0;
border: 0;
}
header #logo{
width:auto;
height:40px;
margin-top:12.5px;
margin-left:85px;
padding: 0;
border: 0;
}
#media screen and (max-width: 360px), screen and (max-device-width: 360px) {
header #logo{
width:auto;
height:35px;
margin-top:15px;
padding: 0;
border: 0;
}
.menu_content{
height:50px;
width:auto;
margin-left:10px;
line-height:50px;
font-size:11px;
}
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin: 0px;
height:100%;
width: 75%;
background-color:black;
float:right;
z-index:500;
}
.block{
margin: 0px;
width:calc(100% / 3);
background-image: url(../img/bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
display:inline-block;
float:left;
font-weight:normal;
}
.blockfooter{
height:100px;
width:100%;
background-color:rgba(255, 255, 255, 0.75);
margin-bottom:25px;
}
.tagblock{
height:50px;
width:100%;
}
.tagline{
height:50px;
margin:0;
padding:0;
padding-left:15px;
float:left;
line-height:50px;
font-size:19px;
}
.amounttag{
height:50px;
width:50px;
background-color:#95c11f;
margin:0;
padding:0;
float:right;
color:white;
line-height:50px;
text-align:center;
font-size:30px;
}
.pricetag{
height:50px;
width:50px;
background-color:#288328;
margin:0;
padding:0;
float:right;
color:white;
line-height:50px;
text-align:center;
font-size:14px;
font-weight:bold;
}
.allergictag{
height:50px;
margin:0;
padding:0;
float:left;
}
.icontag{
width:170px;
height:30px;
padding:10px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.icons{
width:30px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.datetag{
height:25px;
width:100px;
background-color:#f39200;
margin:0;
padding:0;
float:right;
color:white;
line-height:35px;
text-align:center;
font-weight:normal;
font-size:14px;
}
.timetag{
height:25px;
width:100px;
background-color:#f39200;
margin:0;
padding:0;
float:right;
color:white;
line-height:15px;
text-align:center;
font-weight:bold;
}
/* EIND BLOCKSTYLE */
/* Kuler:
Olijfgroen: #95c11f
Donkergroen: #288328
Limoengroen: #e3f4ae
Oranje: #f39200
Wit: white
Zwart: black
Grijs: lightgrey
*/
#media screen and (max-width: 1220px), screen and (max-device-width: 1220px) {
/* BEGIN NAVIGATIE */
aside{
margin: 0px;
height:100%;
width: 25%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
header, nav{display:none;}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin: 0px;
height:100%;
width: 75%;
background-color:black;
float:right;
}
.block{
margin: 0px;
width:50%;
background-image: url(../img/bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
display:inline-block;
float:left;
font-weight:normal;
}
/* EIND BLOCKSTYLE */
}
#media screen and (max-width: 900px), screen and (max-device-width: 900px) {
/* BEGIN NAVIGATIE */
aside{
display:none;
}
header{
margin: 0px;
width: 100%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:0;
}
#nav_top{
width:100%;
height:auto;
background-color:#95c11f;
-webkit-box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
}
#menu_nav_placement{
margin-left:20px;
height:50px;
margin-bottom:5px;
}
.men_button{
height:50px;
display:inline-block;
text-align:left;
font-weight:400;
text-align:center;
margin-bottom:5px;
float:inherit;
}
.icon_menubutton{
width:40px;
margin-top:5px;
float:left;
}
.menu_content{
height:50px;
width:auto;
margin-left:10px;
line-height:50px;
}
.left{
float:left;
}
.right{
float:right;
}
#nav_logout{
margin-left:20px;
background-color:#288328;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav_account{
margin-right:20px;
background-color:#f39200;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav_bottom{
width:100%;
height:50px;
margin-top:-5px;
}
#nav_bottom a{
text-decoration:none;
color:white;
text-align:center;
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
height:100%;
width: 100%;
float:right;
margin-top:70px;
}
.block{
margin: 0px;
height:200px;
width:50%;
background-color:rgba(255,0,4,1.00);
display:inline-block;
float:left;
}
/* EIND BLOCKSTYLE */
}
#media screen and (max-width: 600px), screen and (max-device-width: 600px) {
::-webkit-scrollbar {
width : 0px;
opacity: 0.2;
}
::-webkit-scrollbar:hover {
width : 0px;
opacity: 0.6;
}
::-webkit-scrollbar-track {
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color : #288328;
}
::-moz-scrollbar {
width : 0px;
-moz-opacity:0.2;
}
::-moz-scrollbar:hover {
width : 0px;
-moz-opacity:0.6;
}
::-moz-scrollbar-track {
background-color : black;
}
::-moz-scrollbar-thumb {
background-color : #288328;
}
/* BEGIN NAVIGATIE */
aside{
display:none;
}
header{
margin: 0px;
width: 100%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
input[type='date']{
background-position:center;
}
input[type='time']{
background-position:center;
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin-top:70px;
height:100%;
width: 100%;
float:right;
}
.block{
margin: 0px;
height:200px;
width:100%;
background-color:black;
display:inline-block;
float:left;
}
/* EIND BLOCKSTYLE */
}
Here's the total code sample:
https://jsfiddle.net/LLgsqyfc/
The normal #media query and the # media query for aspect ratio's of devices didn't work either.

Related

How to display a windows alert near my link

hello For the moment my code displays an alert when I click on "envoyer une alerte"
But the alert is displayed far from the "envoyer une alerte" link
I would like the alert to be displayed near the link display an alert
I have to modify what in my code so that the alert is glued to my link
https://codepen.io/Wilou/pen/eNNEme
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
send an alert
<br>
send an alert
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
margin-left: 24%;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
window.alert = function(titre, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closealert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}

Pass the clicked element as argument in the onclick handler.
Then, use the element to determine its position using getBoundingClientRect and apply it to your alertPanel.
window.alert = function(link, titre, message) {
// Store this in a variable instead of querying the document multiple times
let alertPanel = document.getElementById("alertPanel")
alertPanel.innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
alertPanel.style.display = 'block';
// Get the position of the clicked link
let position = link.getBoundingClientRect()
// Apply the position to the alertPanel
alertPanel.style.top = position.top + 20 + "px";
alertPanel.style.left = position.left + "px";
document.getElementById('overlay').style.display = 'block';
}
function closealert() {
document.getElementById('alertPanel').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
body{
font-family:'Open Sans',sans-serif;
background-color: #DEDEDE;
}
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
/*margin-left: 24%;*/
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
/*margin-bottom: 20px;*/
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('data:image/png;base64,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') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
<alert>
<div id="overlay"></div>
<div id="alertPanel"></div>
</alert>
send an alert
<br>
send an alert

Set your alert element to position: relative, and align position of alertPanel accordingly.

You can modified the position in this class: alert #alertPanel
In the example below i change the top and margin-left property.
top: 10px;
margin-left: 300px;
window.alert = function(titre, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closealert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}
body{
font-family:'Open Sans',sans-serif;
background-color: #DEDEDE;
}
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top: 10px;
min-height: 170px;
width: 450px;
margin-left: 250px;;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('data:image/png;base64,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') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
Envoyer une alerte
<br>
En envoyer une autre

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>

Dropdown menu working different in mozilla firefox

I did a dropdown menu. but works different in mozilla firefox. If you visit the demo page you can understand what is my problem. When I click on the menu works differently. But in other browsers are working normally.
This is Demo in JSFiddle
CSS for menu :
a.change_photo_link{
position:absolute;
line-height:25px;
width:20px;
height:20px;
cursor:pointer;
display:block;
border: 1px solid rgba(128,128,128,1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
background-image: -moz-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
background-image: -o-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
background-image: -ms-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
background-image: linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.bubmenu{
float:left;
position:relative;
width:150px;
height:auto;
padding:0px;
border:1px solid #d8dbdf;
background-color:#f4f4f4;
margin-top:0px;
display:none;
margin-left:-131px;
margin-top:20px;
}
.change_photo ul {
margin:0px;
padding:0px;
display:block;
list-style:none;
}
.change_photo ul li a {
width:150px;
height:20px;
line-height:20px;
display:block;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
color:#3b5997;
padding:3px 0px;
cursor:pointer;
text-decoration:none;
text-indent:15px;
}
.change_photo ul li a:hover {
background-color:#25476c;
color:#fff;
text-decoration:none;
}
.change_photo.open .change_photo_link {
cursor: pointer;
width: 20px;
height:20px;
display: inline-block;
line-height: 16px;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
text-decoration: none !important;
background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.u_p_a.open .change_photo_link {
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
border-radius:0px;
}
And also HTML CODE:
<a class="change_photo_link"></a>
<div class="bubmenu">
<ul class="root">
<li>Fotoğrafı değiştir</li>
<li>Fotoğrafı kaldır</li>
</ul>
</div>

This is because of the below css block. comment the block and test once.
.change_photo.open .change_photo_link {
background: url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat scroll 100% 0 #D8DBDF;
border-radius: 0;
cursor: pointer;
display: inline-block;
height: 20px;
line-height: 16px;
text-decoration: none !important;
width: 20px;
}

Jquery and css click open menu and show active menu

I am try to make a jquery dropdown menu like facebook notification menu. But i have one problem with javascript code.
This is my JSFiddle example . My problem is when i click menu will open but menu has a icon for example like facebook. Facebok notification when you click notification menu icon is automatically white but when you click other area icon is different color. I want only background color will be change. but if you check this link you can understand What is my problem.
This is my HTML Code :
<div class="msdv">
<a class="account"><span></span></a>
<div class="bubble">
<div class="xstr"><div class="gks">lorem</div><div class="yms">lorem</div></div>
<div class="xstrs">
<ul class="root">
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">lorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremlorem.</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">lorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">lorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
</ul>
</div>
<div class="xstrdob">loremloremlorem</div>
</div>
</div>
And also this is my Css code:
.msdv {
float:left;
width:30px;
height:40px;
background-color:#2a3542;
color:#fff;
text-align:center;
line-height:40px;
margin-left:130px;
}
.bubble
{
float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top:50px;
margin-left:-87px;
display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 134px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;
}
.msdv ul li a {
width:325px;
height:50px;
color:#000;
display:block;
font-family:arial;
font-weight:bold;
padding:3px 2px;
cursor:pointer;
text-decoration:none;
border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
background:#edeff4;
color:#000;
text-decoration:none;
}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;
}
.xstr {
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border: 0px solid #d8dbdf;
text-align:left;
color:#333333;
text-indent:7px;
font-weight:bold;
font-size:12px;
}
.bubble.xstr {
width:285px;
height:5px;
text-align:left;
}
.gks {
float:left;
text-align:left;
width:135px;
}
.bubble.gks{
height:30px;
line-height:30px;
}
.yms{
float:right;
color:#4e69a2;
text-align:left;
text-indent:35px;
width:150px;
font-size:13px;
font-weight:normal;
}
.xstr.yms{
float:left;
height:30px;
line-height:30px;
}
.xstrdob{
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border: 0px solid #d8dbdf;
-webkit-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
-moz-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
color:#3b5998;
font-size:13px;
font-weight:bold;
}
.bubble.xstrdob{
width:285px;
margin: 0 auto;
}
.xstrs{
overflow-y: scroll;
height:400px;
}
.bubble.xstrs {
float:left;
width:280px;
}
.bubble.xstrs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar
{
width: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar-thumb
{
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.usrxmsg{
float:left;
width:315px;
height:50px;
}
.xtreaimage{
float:left;
width:50px;
height:50px;
background-color:#0000;
}
.msinf{
float:left;
width:265px;
height:50px;
text-align:left;
}
.msisndoknk{
float:left;
width:265px;
height:15px;
}
.msis{
float:left;
width:252px;
height:15px;
color:#333333;
line-height:15px;
text-indent:10px;
}
.msisok{
float:left;
width:13px;
height:15px;
background-image:url(../icons/okundu.png);
background-repeat:no-repeat;
}
.mxsg{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdtm{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdv.open .account {
cursor: pointer;
width: auto;
display: inline-block;
padding-left: 7px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 22px;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.msdv.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
.msdv .account img {
height: 14px;
margin-top: 1px;
margin-bottom: 1px;
float: left;
margin-right: 5px;
}
and the last time javascript function code is here:
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".bubble").hide();
$(this).attr('id', '0');
}
else
{
$(".bubble").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".bubble").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});
//Textarea without editing.
$(document).mouseup(function()
{
$(".bubble").hide();
$(".account").attr('id', '');
});
$(function(){
$('.msdv').each(function(){
$(this).find('.account').bind('click',function(){
if($(this).parent().hasClass('open')){
$(this).parent().removeClass('open');
}else{
$('.account.open').removeClass('open');
$(this).parent().addClass('open');
}
});
});
$('.msdv li').each(function(){
$(this).bind('click',function(){
$('.account.open').removeClass('open');
});
});
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("msdv")){
$('.account.open').removeClass('open');
}
});
});
});

For me, replacing
$('.account.open').removeClass('open');
with $('.msdv').removeClass("open");
is enough :
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("msdv")){
$('.msdv').removeClass("open");
}
});

I've simplified your jsfiddle to get a better understanding of it. In this fiddle if you click on the icon it brings up the menu and if you click on the background or the icon again it will disappear. Is this what you wanted?
jsFiddle
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".msdv").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".msdv").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.msdv').hasClass('open'))
{
$('.msdv').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});

You can simply add $('.msdv').removeClass("open"); to the end of your document click event like so:
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("msdv")){
$('.account.open').removeClass('open');
$('.msdv').removeClass("open");
}
});

Your problem is with the css code here try this.
.msdv {
float:left;
width:30px;
height:40px;
background-color:#2a3542;
color:#fff;
text-align:center;
}
.bubble
{
float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top:50px;
margin-left:-87px;
display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 134px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;
}
.msdv ul li a {
width:325px;
height:50px;
color:#000;
display:block;
font-family:arial;
font-weight:bold;
padding:3px 2px;
cursor:pointer;
text-decoration:none;
border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
background:#edeff4;
color:#000000;
}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;
}
.xstr {
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border: 0px solid #d8dbdf;
text-align:left;
color:#333333;
text-indent:7px;
font-weight:bold;
font-size:12px;
}
.bubble.xstr {
width:285px;
height:5px;
text-align:left;
}
.gks {
float:left;
text-align:left;
width:135px;
}
.bubble.gks{
height:30px;
line-height:30px;
}
.yms{
float:right;
color:#4e69a2;
text-align:left;
text-indent:35px;
width:150px;
font-size:13px;
font-weight:normal;
}
.xstr.yms{
float:left;
height:30px;
line-height:30px;
}
.xstrdob{
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border: 0px solid #d8dbdf;
-webkit-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
-moz-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
color:#3b5998;
font-size:13px;
font-weight:bold;
}
.bubble.xstrdob{
width:285px;
margin: 0 auto;
}
.xstrs{
overflow-y: scroll;
height:400px;
}
.bubble.xstrs {
float:left;
width:280px;
}
.bubble.xstrs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar
{
width: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar-thumb
{
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.usrxmsg{
float:left;
width:315px;
height:50px;
}
.xtreaimage{
float:left;
width:50px;
height:50px;
background-color:#0000;
}
.msinf{
float:left;
width:265px;
height:50px;
text-align:left;
}
.msisndoknk{
float:left;
width:265px;
height:15px;
}
.msis{
float:left;
width:252px;
height:15px;
color:#333333;
line-height:15px;
text-indent:10px;
}
.msisok{
float:left;
width:13px;
height:15px;
background-image:url(../icons/okundu.png);
background-repeat:no-repeat;
}
.mxsg{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdtm{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdv.open .account {
cursor: pointer;
width: auto;
display: inline-block;
padding-left: 7px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 22px;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.msdv.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
.msdv .account img {
height: 14px;
margin-top: 1px;
margin-bottom: 1px;
float: left;
margin-right: 5px;
}
I am sure other formatting you can do.Is this what you were looking for?

Styling JQuery UI Autocomplete

Fiddle
I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
Any suggestions???

Are you looking for this selector?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
Ugly demo:
http://jsfiddle.net/zeSTc/
Just replace with your code:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
demo: http://jsfiddle.net/w5Dt2/

Bootstrap styling for jQuery UI Autocomplete
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}

Based on #md-nazrul-islam reply, This is what I did with SCSS:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//#include border-radius(5px);
#include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
#include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}

You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.
.ui-corner-all
{
border-radius: 0px !important;
}

Develop Reference

JavaScript is the programming language of the Web.

CSS positioning seems not to be loaded on iOS - javascript

Related

How to display a windows alert near my link

get appended values to be noticed by document.ready function

Dropdown menu working different in mozilla firefox

Jquery and css click open menu and show active menu

Styling JQuery UI Autocomplete

Categories

Resources