multi-range slider with html5 input range in Angular 4 - javascript

If you are using Angular 4, you are probably suffering if you need to use a range slider. Most of the packages available are for AngularJS or Angular 2 that doesn't work flawless.
So, I'm trying to build up a cross browser multiple range slider with native html5 input ranges. However, when it comes to IE and Edge, it seems there is a little issue understanding the pointer events for pseudo elements and it doesn't work.
Although I'm using Angular 4, I just created a JSFiddle in AngularJS as an example as I believe this is more a CSS issue maybe with a Javascript workaround.
I appreciate your help. Thanks,
#filter .slider_container{
display: block;
width: 99.5%;
background-color: rgba(0,0,0,0);
height: 15%;
min-height: 85px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
margin-top:1px;
border-bottom: 1px solid gray;
}
#filter .slider_container p{
font-weight: 300;
margin-left: 5%;
font-size: 0.8em;
text-align: center;
display: block;
margin:0;
margin-bottom: 15px;
color: #000000;
}
#filter .slider_container p:nth-of-type(1){
font-weight: 500;
font-size: 0.8em;
margin-bottom: 0;
padding-top:10px;
}
#filter .slider_container .gender{
outline: 0;
background: #ffffff;
border: 1px solid #000000;
color: #000000;
width: 45%;
height: 20px;
max-width: 150px;
border-radius: 20px;
margin: 0.8%;
cursor: pointer;
font-size: 0.65em;
}
#filter .slider_container .gender:focus{
outline: 0;
}
#filter .slider_container .gender:hover{
background-color: #EA0A8A;
background-image: -webkit-linear-gradient(#EA0A8A, #ec5aae);
background-image: -moz-linear-gradient(#EA0A8A, #ec5aae);
background-image: -o-linear-gradient(#EA0A8A, #ec5aae);
background-image: linear-gradient(#EA0A8A, #ec5aae);
/*text-shadow: 1px 1px 2px black , 0 0 25px black , 0 0 5px black;
-webkit-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);*/
cursor: pointer;
color: #ffffff;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
border: 0px solid #ffffff;
}
#filter .slider_container .active{
background: #EA0A8A;
color: #ffffff;
border: 0px solid #ffffff;
}
#filter input[type=range]{
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 80%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
margin-left: 10%;
}
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
#filter input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
#filter input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
/* Special styling for WebKit/Blink */
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for Firefox */
#filter input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for IE */
#filter input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 15px;
width: 15px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -3px;
}
#filter input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 0px solid #010101;
}
#filter input[type=range]:focus::-webkit-slider-runnable-track {
background: none transparent;
}
#filter input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[type=range]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
z-index: -9;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[name='distanceslider']::-ms-fill-lower {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-lower {
background: #EA0A8A;
}
#filter input[name='distanceslider']::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .ghost{
position: absolute;
z-index:1;
pointer-events: none;
}
#filter .ghost::-webkit-slider-thumb{
z-index:1;
pointer-events: all;
}
#filter .ghost::-moz-range-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-ms-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost:focus::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost::-moz-range-track {
z-index: -10;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-track {
z-index: -40;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-fill-lower {
background: none transparent;
border: 0px solid #010101;
border-radius: 2.6px;
visibility: hidden;
z-index: -9;
}
#filter .ghost:focus::-ms-fill-lower {
background: none transparent;;
}
#filter .ghost::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .ghost:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .main{
position: absolute;
z-index: 0;
pointer-events: none;
}
#filter .main::-webkit-slider-thumb{
z-index: 0;
pointer-events: all;
}
#filter .main::-moz-range-thumb {
z-index: 0;
pointer-events: all;
}
#filter .main::-ms-thumb{
z-index: 1;
pointer-events: all;
}
#filter .main::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main:focus::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main::-moz-range-track {
z-index: -11;
border: 0px solid #FFFFFF;
pointer-events: none;
height: 15px;
}
#filter .main::-ms-track {
z-index: 0;
pointer-events: none;
}
#filter .main::-ms-fill-lower {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-lower {
background: #c5c5c5;
}
#filter .main::-ms-fill-upper {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-upper {
background: #EA0A8A;
}
https://jsfiddle.net/guarinex/00Lh7kfd/28/

Related

Display Tooltip after a Click instead when Hover

I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:

Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE

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>

Linking 'muted speaker' icon to volume slider when value = 0?

I have a speaker icon besides my volume slider, and I would like the icon to change when the volume value is at 0, to a second (muted) speaker icon. I've tried different variations which didn't work. How do I do that? Thanks!
var volumeslider;
volumeslider = document.getElementById("volumeslider");
// Add Event Handling
volumeslider.addEventListener("mousemove", setvolume);
// Functions
function setvolume(){
audio.volume = volumeslider.value / 100;
}
input[type=range] {
-webkit-appearance: none;
display: inline-block;
vertical-align: top;
width: 60%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #666666;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #666666;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">

Use JQs attr method to just swap the image source. Also, make sure the src path to the images is relative to the HTML document if you are using an external JS document.
JS:
volumeslider.addEventListener("mousemove", checkMute);
//check for mute each time the slider is dragged.
function checkMute(){
if (audio.volume == 0){
$( ".speaker" ).attr("src", "images/speaker.png");
}else{
$( ".speaker" ).attr("src", "images/speakermute.png");
}
}

Input[type=range] CSS not working on android device

This is the desired slider css which works on dekstop.
But only on mobile device (android) it shows like this. I wonder where the textfield like input shows like attached to the slider.
Here's the fiddle http://jsfiddle.net/p5zo31q8/
CSS
/* INPUT RANGE*/
/*chrome*/
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 1px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #fff;
height: 36px;
width: 36px;
border-radius: 50%;
background: #4BDAFF;
margin-top: -14px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
/*firefox*/
input[type=range]{
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 200px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/*internet*/
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/*scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
margin-top:30px;
margin-bottom:30px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
background-color:#00B0F0;
}
input[type='range']{
background: #0c0;
height:10px;
}
input[type='range']::-webkit-slider-thumb{
background:#f60;
height:30px;
width:30px;
border-radius: 30px;
}

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;
}

Categories

Resources