Develop Reference

When I add a new CSS style with Javascript, the JS that's there stops working

I have a JavaScript to-do list that works until I add the below code to it. style to it. (The entire code is saved at https://codepen.io/hmcka/pen/vYBgZVN). Yes, I want to use plain JS.
function toggleShimmer(e) {
box.classList.add("shimmer");
}
I don't understand why what's there originally stops working, but I wonder if it has something to do with the fact that my CSS that I am adding is attached to a wrapper and the JavaScript is attached to the items within the wrapper.
I have tried a few things to fix this. First I tried to put a timer on the add.classList so that the style could be removed afterwards. When I did this, however, the style would show up again when I clicked on the check boxes. The other thing that I tried to do was adjust the z-index of the list items.
Any suggestions would be appreciated by this beginner.
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
const box = document.querySelector('#rectWrapper');
function addItem(e) {
e.preventDefault();
const text = (this.querySelector('[name=item]')).value;
const item = {
text,
done: false
};
items.push(item);
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));
this.reset();
}
function populateList(plates = [], platesList) {
platesList.innerHTML = plates.map((plate, i) => {
return `
<li>
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
<label for="item${i}">${plate.text}</label>
</li>
`;
}).join('');
}
function toggleDone(e) {
if (!e.target.matches('input')) return; // skip this unless it's an input
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}
function toggleShimmer(e) {
box.classList.add("shimmer");
}
window.addEventListener("load", toggleShimmer);
box.addEventListener('mouseenter', toggleShimmer);
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
populateList(items, itemsList);
html {
/* background-color: #B01E84B01E84; */
background: rgba(153, 25, 117, 1);
background: -moz-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(153, 25, 117, 1)), color-stop(100%, rgba(212, 19, 157, 1)));
background: -webkit-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: linear-gradient(135deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
box-sizing: border-box;
/* background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; */
/* background-size: cover; */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* svg {
fill:white;
background: rgba(0,0,0,0.1);
padding: 20px;
border-radius: 50%;
width: 200px;
margin-bottom: 50px;
} */
.wrapper {
padding: 20px;
max-width: 350px;
background-color: #7A0857;
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}
.shimmer {
position: relative;
overflow: hidden;
/* width: 50px; */
/* height: 50px; */
display: inline-block;
/* margin: 25px 0 25px 25px; */
/* border-radius: 5px; */
color: #fff;
}
/*The "shine" element */
.shimmer:after {
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
/* display: none; */
display: block;
/* display: inline; */
}
/* Hover state - trigger effect */
.shimmer:hover:after {
opacity: 1;
top: -40%;
left: -40%;
transition-property: left, top, opacity;
transition-duration: 1.4s, 1.4s, 0.3s;
transition-timing-function: ease;
}
/* Active state */
.shimmer:active:after {
opacity: 0;
}
h2 {
text-align: center;
margin: 0;
font-weight: 200;
}
.plates {
margin: 0;
padding: 0;
text-align: left;
list-style: none;
}
.plates li {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 0;
font-weight: 100;
display: flex;
}
.plates label {
flex: 1;
cursor: pointer;
}
.plates input {
display: none;
}
.plates input+label:before {
content: '⬜️';
margin-right: 10px;
}
.plates input:checked+label:before {
content: '🌮';
}
.add-items {
margin-top: 20px;
}
.add-items input {
padding: 10px;
outline: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
}
<div id="rectWrapper" class="wrapper">
<h2>TO-DO LIST</h2>
<p></p>
<ul class="plates">
<li>Loading Tapas...</li>
</ul>
<form class="add-items">
<input type="text" name="item" placeholder="Item Name" required>
<input type="submit" value="+ Add Item">
</form>
</div>

There is a pseudo element (shimmer:after) over the form, preventing you from clicking on the input field or add button.
The easiest solution is to use pointer-events to make the shimmer "transparent" to mouse events:
.shimmer:after {
pointer-events: none;
}

How to smooth transition from Large Header to small static header (Javascript/CSS)

I have a large centered masthead (our logo and the page/section that the user is on) that I have on my pages and when the user scrolls past what would be the masthead a mini masthead/header appears (a smaller version of the logo and the page the user is on, that is all left aligned). What I am trying to figure out is how to make the transition from the larger masthead to the smaller one look better than the quick jump-cut that currently happens.
Here is my current code:
/*********************************
*
* File: resources/js/system.header_bar.js
*
* JavaScript for Header Bar on page.
*
* Version 1.0.1
*
* Date Created: 20190702.0712
* Date Modified:20190702.1416
*
************************************/
//JavaScript to control Header Scroll.
window.onscroll = function() {
'use strict';
OTE_HeaderFunction();
};
var header = document.getElementById("header-myHeader");
var sticky = header.offsetTop - 50;
var logo_sm = document.getElementById("header-Logo_sm");
var pg_name = document.getElementById("header-Logo_PageName_sm");
function OTE_HeaderFunction() {
'use strict';
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
logo_sm.style.display = "inline";
pg_name.style.display = "inline";
} else {
header.classList.remove("sticky");
logo_sm.style.display = "none";
pg_name.style.display = "none";
}
}
/*********************************
*
* File: resources/css/system.bar01_header.css
*
* {{APP DESCR}}
* CSS for Header Bar on page.
*
* Version BAR01_1.0
*
* Date Created: 20190702.0712
* Date Modified:
*
************************************/
.header-top-container {
background: rgb(242, 246, 248);
background: -moz-linear-gradient(180deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: -webkit-linear-gradient(180deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: linear-gradient(180deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8", endColorstr="#e0eff9", GradientType=1);
padding: 10px;
text-align: center;
color: #05336b;
}
.header-top-container h1 {
margin-top: 0;
margin-bottom: 0;
color: white;
/*#05336b;*/
line-height: .5;
font-weight: 600;
font-variant: small-caps;
font-size: 14px;
}
#media screen and (min-width: 300px) {
.header-top-container h1 {
font-size: calc(14px + (32 - 14) * ((100vw - 300px) / (1000 - 300)));
}
}
/* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */
#media screen and (min-width: 1000px) {
.header-top-container h1 {
font-size: 32px;
}
}
.header-main-logo {
width: calc(275px + (590 - 275) * ((100vw - 300px)/(1600 - 300)));
height: auto;
max-width: 590px;
margin: auto;
}
.header-bar {
padding: 10px 16px;
background: rgb(242, 246, 248);
background: -moz-linear-gradient(0deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: -webkit-linear-gradient(0deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: linear-gradient(0deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8", endColorstr="#e0eff9", GradientType=1);
color: #05336b;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
border: 0 0 4 4 ridge #05336b;
}
.header-bar h3 {
margin-top: 0;
margin-bottom: 0;
color: #05336b;
line-height: .5;
display: none;
font-weight: 600;
font-variant: small-caps;
}
.content {
padding: 16px;
/*background: #05336b;*/
}
.sticky {
position: fixed;
top: 0;
width: 100%;
-webkit-box-shadow: 7px 9px 22px 0px rgba(159, 168, 218, .75);
;
-moz-box-shadow: 7px 9px 22px 0px rgba(159, 168, 218, .75);
;
box-shadow: 7px 9px 22px 0px rgba(159, 168, 218, .75);
;
display: inline;
}
.sticky+.content {
padding-top: 102px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- other formatting and style sheets here -->
<!-- Page Header -->
<title>User Menu</title>
<style>
.header-main-logo {
width: calc(275px + (590 - 275) * ((100vw - 300px)/(1600 - 300)));
height: auto;
max-width: 590px;
margin: auto;
}
.menu-bar-item {
font-size: calc(12px + (24 - 12) * ((100vw - 300px)/(1600 - 300)));
text-align: center;
font-weight: 600;
}
</style>
</head>
<body>
<div class="header-top-container">
<div class="w3-mobile w3-content">
<h1>
<img src="./resources/logo/bc_ote_scfe_PMS288.png" alt="Logo" class="header-main-logo" />
<br>
<span id="header-Logo_PageName_lg">5t3User Menu </span>
</h1>
</div>
</div>
<div class="header-bar" id="header-myHeader">
<img src="./resources/logo/bc_ote_scfe_PMS288.png" alt="Logo (Smaller)" style="width:30%;height:auto;max-width:350px;display: none;" id="header-Logo_sm" /><br />
<h3 id="header-Logo_PageName_sm">User Menu</h3>
</div>
<div class="content">
<div class="w3-row-padding w3-mobile">
<div class="w3-content">
<!-- YOUR CONTENT HERE -->
</div>
</div>
</div>
<script src="./resources/js/system.header_bar.js"></script>
</body>
</html>
What I am trying to do is get the logo so smoothly transition from when it is in the header-top-container to the header-bar.

You could try adding a CSS transition which will make it happen more smoothly and gives it a nice-looking animation effect.

Adding image in option

I want to add a image left of my option when my list opened and I'm using awesomplete autocomplete plugin and I'd like to add a picture to show you what I want to do.
I try to add inline css but nothing change
$(document).ready(function() {
$('.awesomplete').on('awesomplete-select', function() {
var $this = $(this),
$sibling = $this.next();
if ($sibling.attr('id') == 'mylist') {
setTimeout(function() {
var val = $this.find('input').val();
var dataLink = $sibling.find('option:contains("' + val + '")').data('link');
//console.log(dataLink);
location.href = dataLink;
}, 500);
}
});
});
.awesomplete>ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0, 0%, 100%, .9);
background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8));
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
text-shadow: none;
}
#supports (transform: scale(0)) {
.awesomplete>ul {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete>ul[hidden],
.awesomplete>ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete>ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete>ul>li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete>ul>li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete>ul>li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
<option data-link="http://www.google.com">Ada</option>
<option data-link="http://www.yahoo.com">Java</option>
<option data-link="http://www.bing.com">JavaScript</option>
<option data-link="http://www.yandex.com">Brainfuck</option>
<option data-link="http://www.php.net">LOLCODE</option>
<option data-link="http://www.asp.net">Node.js</option>
<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>

You could override the creation of single item putting an image before the label, like:
var awesomplete = new Awesomplete(input, {
item: myItemFunc
});;
function myItemFunc(text, input){
//return the html to render an item
}
See following for a complete example:
var imgList = new Object();
imgList["Ada"] = "http://www.maglioccola.com/images/add-1.png";
imgList["Java"] = "http://www.maglioccola.com/images/add-2.png";
imgList["JavaScript"] = "http://www.maglioccola.com/images/add-3.png";
imgList["Brainfuck"] = "http://www.maglioccola.com/images/add-4.png";
imgList["LOLCODE"] = "http://www.maglioccola.com/images/add-4.png";
imgList["Node.js"] = "http://www.maglioccola.com/images/add-4.png";
imgList["Ruby on Rails"] = "http://www.maglioccola.com/images/add-4.png";
$(document).ready(function() {
var input = document.getElementById("my-input");
var awesomplete = new Awesomplete(input, {
item: myItemFunc
});;
});
function myItemFunc(text, input){
return Awesomplete.$.create("li", {
innerHTML: createItem(text,input),
"aria-selected": "false"
});
}
function createItem(text, input){
var img = document.createElement("img");
img.style.height = '16px';
img.src = imgList[text.label];
var html = img.outerHTML + " " + text.label;
return html;
}
.awesomplete>ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0, 0%, 100%, .9);
background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8));
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
text-shadow: none;
list-style: none;
}
#supports (transform: scale(0)) {
.awesomplete>ul {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete>ul[hidden],
.awesomplete>ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete>ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete>ul>li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete>ul>li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete>ul>li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
<input list="mylist" id="my-input" />
<datalist id="mylist">
<option data-link="http://www.google.com">Ada</option>
<option data-link="http://www.yahoo.com">Java</option>
<option data-link="http://www.bing.com">JavaScript</option>
<option data-link="http://www.yandex.com">Brainfuck</option>
<option data-link="http://www.php.net">LOLCODE</option>
<option data-link="http://www.asp.net">Node.js</option>
<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>
I hope it helps you, bye.

try this, here you need to customize awesomplete autocomplete plugin, i have edited that and copied in my code
/*awesomplete.min.js customized and add above code in external file and link that here*/
// Awesomplete - Lea Verou - MIT license
(function(){function h(a){a=Array.isArray(a)?{label:a[0],value:a[1]}:"object"===typeof a&&"label"in a&&"value"in a?a:{label:a,value:a};this.label=a.label||a.value;this.value=a.value}function n(a,b,d){for(var g in b){var f=b[g],c=a.input.getAttribute("data-"+g.toLowerCase());a[g]="number"===typeof f?parseInt(c):!1===f?null!==c:f instanceof Function?null:c;a[g]||0===a[g]||(a[g]=g in d?d[g]:f)}}function c(a,b){return"string"===typeof a?(b||document).querySelector(a):a||null}function k(a,b){return l.call((b||
document).querySelectorAll(a))}function m(){k("input.awesomplete").forEach(function(a){new e(a)})}var e=function(a,b){var d=this;this.input=c(a);this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");b=b||{};n(this,{minChars:2,maxItems:10,autoFirst:!1,data:e.DATA,filter:e.FILTER_CONTAINS,sort:e.SORT_BYLENGTH,item:e.ITEM,replace:e.REPLACE},b);this.index=-1;this.container=c.create("div",{className:"awesomplete",around:a});this.ul=c.create("ul",{hidden:"hidden",
inside:this.container});this.status=c.create("span",{className:"visually-hidden",role:"status","aria-live":"assertive","aria-relevant":"additions",inside:this.container});c.bind(this.input,{input:this.evaluate.bind(this),blur:this.close.bind(this),keydown:function(a){var b=a.keyCode;if(d.opened)if(13===b&&d.selected)a.preventDefault(),d.select();else if(27===b)d.close();else if(38===b||40===b)a.preventDefault(),d[38===b?"previous":"next"]()}});c.bind(this.input.form,{submit:this.close.bind(this)});
c.bind(this.ul,{mousedown:function(a){var b=a.target;if(b!==this){for(;b&&!/li/i.test(b.nodeName);)b=b.parentNode;b&&0===a.button&&(a.preventDefault(),d.select(b,a.target))}}});this.input.hasAttribute("list")?(this.list="#"+this.input.getAttribute("list"),this.input.removeAttribute("list")):this.list=this.input.getAttribute("data-list")||b.list||[];e.all.push(this)};e.prototype={set list(a){if(Array.isArray(a))this._list=a;else if("string"===typeof a&&-1<a.indexOf(","))this._list=a.split(/\s*,\s*/);
else if((a=c(a))&&a.children){var b=[];l.apply(a.children).forEach(function(a){if(!a.disabled){var c=a.textContent.trim(),f=a.value||c;a=a.label||c;""!==f&&b.push({label:a,value:f})}});this._list=b}document.activeElement===this.input&&this.evaluate()},get selected(){return-1<this.index},get opened(){return!this.ul.hasAttribute("hidden")},close:function(){this.ul.setAttribute("hidden","");this.index=-1;c.fire(this.input,"awesomplete-close")},open:function(){this.ul.removeAttribute("hidden");this.autoFirst&&
-1===this.index&&this["goto"](0);c.fire(this.input,"awesomplete-open")},next:function(){this["goto"](this.index<this.ul.children.length-1?this.index+1:-1)},previous:function(){var a=this.ul.children.length;this["goto"](this.selected?this.index-1:a-1)},"goto":function(a){var b=this.ul.children;this.selected&&b[this.index].setAttribute("aria-selected","false");this.index=a;-1<a&&0<b.length&&(b[a].setAttribute("aria-selected","true"),this.status.textContent=b[a].textContent,c.fire(this.input,"awesomplete-highlight",
{text:this.suggestions[this.index]}))},select:function(a,b){a?this.index=c.siblingIndex(a):a=this.ul.children[this.index];if(a){var d=this.suggestions[this.index];c.fire(this.input,"awesomplete-select",{text:d,origin:b||a})&&(this.replace(d),this.close(),c.fire(this.input,"awesomplete-selectcomplete",{text:d}))}},evaluate:function(){var a=this,b=this.input.value;b.length>=this.minChars&&0<this._list.length?(this.index=-1,this.ul.innerHTML="",this.suggestions=this._list.map(function(d){return new h(a.data(d,
b))}).filter(function(d){return a.filter(d,b)}).sort(this.sort).slice(0,this.maxItems),this.suggestions.forEach(function(d){a.ul.appendChild(a.item(d,b))}),0===this.ul.children.length?this.close():this.open()):this.close()}};e.all=[];e.FILTER_CONTAINS=function(a,b){return RegExp(c.regExpEscape(b.trim()),"i").test(a)};e.FILTER_STARTSWITH=function(a,b){return RegExp("^"+c.regExpEscape(b.trim()),"i").test(a)};e.SORT_BYLENGTH=function(a,b){return a.length!==b.length?a.length-b.length:a<b?-1:1};e.ITEM=
function(a,b){var d=""===b?a:a.replace(RegExp(c.regExpEscape(b.trim()),"gi"),"<mark>"+"<img width='15px' src='http://www.download3k.com/icons/Opera-Mini-for-Java-388689.png'/>"+"$&</mark>");return c.create("li",{innerHTML:d,"aria-selected":"false"})};e.REPLACE=function(a){this.input.value=a.value};e.DATA=function(a){return a};Object.defineProperty(h.prototype=Object.create(String.prototype),"length",{get:function(){return this.label.length}});h.prototype.toString=h.prototype.valueOf=function(){return""+this.label};var l=Array.prototype.slice;c.create=function(a,b){var d=document.createElement(a),
g;for(g in b){var f=b[g];"inside"===g?c(f).appendChild(d):"around"===g?(f=c(f),f.parentNode.insertBefore(d,f),d.appendChild(f)):g in d?d[g]=f:d.setAttribute(g,f)}return d};c.bind=function(a,b){if(a)for(var d in b){var c=b[d];d.split(/\s+/).forEach(function(b){a.addEventListener(b,c)})}};c.fire=function(a,b,c){var e=document.createEvent("HTMLEvents");e.initEvent(b,!0,!0);for(var f in c)e[f]=c[f];return a.dispatchEvent(e)};c.regExpEscape=function(a){return a.replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&")};
c.siblingIndex=function(a){for(var b=0;a=a.previousElementSibling;b++);return b};"undefined"!==typeof Document&&("loading"!==document.readyState?m():document.addEventListener("DOMContentLoaded",m));e.$=c;e.$$=k;"undefined"!==typeof self&&(self.Awesomplete=e);"object"===typeof module&&module.exports&&(module.exports=e);return e})();
/*awesomplete.min.js customized and add above code in external file and link that here*/
$(document).ready(function() {
$('.awesomplete').on('awesomplete-select', function() {
var $this = $(this),
$sibling = $this.next();
if ($sibling.attr('id') == 'mylist') {
setTimeout(function() {
var val = $this.find('input').val();
var dataLink = $sibling.find('option:contains("' + val + '")').data('link');
//console.log(dataLink);
location.href = dataLink;
}, 500);
}
});
});
.awesomplete>ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0, 0%, 100%, .9);
background: linear-gradient(to bottom right, white, hsla(0, 0%, 100%, .8));
border: 1px solid rgba(0, 0, 0, .3);
box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
text-shadow: none;
}
ul li{
list-style:none !important;
}
#supports (transform: scale(0)) {
.awesomplete>ul {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete>ul[hidden],
.awesomplete>ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete>ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete>ul>li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete>ul>li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete>ul>li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
<option data-link="http://www.google.com">Ada</option>
<option data-link="http://www.yahoo.com">Java</option>
<option data-link="http://www.bing.com">JavaScript</option>
<option data-link="http://www.yandex.com">Brainfuck</option>
<option data-link="http://www.php.net">LOLCODE</option>
<option data-link="http://www.asp.net">Node.js</option>
<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Toggling the checked status of a html/css checkbox using js

I have downloaded a theme with a preconstructed switch component that replaces the normal checkbox functionality. This switch fits in nicely with the UI and I'm desperately trying to make it work but I'm unable to get the 'checked' status of the underlying checkbox to change on a click/touch event.
This is the html structure:
<div class="switch has-switch" data-off-label="<i class='fa fa-times'></i>" data-on-label="<i class='fa fa-check'></i>">
<div class="switch-off switch-animate">
<input checked type="checkbox">
<span class="switch-left"><i class="fa fa-check"></i></span>
<label> </label>
<span class="switch-right"><i class="fa fa-times"></i></span>
</div>
</div>
The switch functionality works perfectly fine, but I'm unable to get it to toggle the 'checked' value of the checkbox input attribute.
I've tried a few solutions. The last one I've tried is this (Note this was a test to see whether I could at least get it to uncheck when clicked):
$(function () {
$('.switch').click(function() {
console.log(this);
var CheckboxInput = $(this).find('input[type="checkbox"]');
if ($(CheckboxInput).is(':checked')) {
CheckboxInput.prop('checked', false);
}
}
});
});
My javascript knowledge is not great (more of a rails guy). Could anybody please help me find what I'm doing incorrectly?

THE SOLN:
$(function() {
$('.switch').click(function() {
var checkBoxes = $(this).find('input');
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="switch has-switch" data-off-label="<i class='fa fa-times'></i>" data-on-label="<i class='fa fa-check'></i>">
<div class="switch-off switch-animate">
<input checked type="checkbox">
<span class="switch-left"><i class="fa fa-check">LEFT</i></span>
<label> </label>
<span class="switch-right"><i class="fa fa-times"></i>RIGHT</span>
</div>
</div>
A SIMPLE SOLN W/O JAVASCRIPT:
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.switch-input {
position: absolute;
top: 0;
left: 200px;
opacity: 50;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="ONL" data-off="Off"></span>
<span class="switch-handle"></span>
</label>

Replace this line
if ($(CheckboxInput).is(':checked')) {
CheckboxInput.prop('checked', false);
}
to
CheckboxInput.prop('checked', !$(CheckboxInput).is(':checked'));
Working Fiddle: https://jsfiddle.net/codeandcloud/xnq16htu/
Update: Same has been filed as a bug and the team has deemed it invalid bug report with the note,
That is correct behavior. The user's click does not remove the
attribute from the HTML. It only changes the property. If you want to
know the dynamic state, use .prop("checked") instead.
Link: https://bugs.jquery.com/ticket/10730
Test: Using Vanilla JavaScript
var container = document.getElementById("container"),
elm = document.getElementById("test-check");
elm.addEventListener("click", function() {
console.log("CheckBox Markup: ", container.innerHTML);
console.log("CheckBox Status: ", elm.checked);
});
<div id="container">
<input id="test-check" type="checkbox" checked />
</div>

you just need to replace property 'true' by 'checked' i.e CheckboxInput.prop('checked','checked');
<div class="switch has-switch" data-off-label="<i class='fa fa-times'></i>" data-on-label="<i class='fa fa-check'></i>">
<div class="switch-off switch-animate">
<input type="checkbox" checked>
<span class="switch-left"><i class="fa fa-check"></i></span>
<label> </label>
<span class="switch-right"><i class="fa fa-times"></i></span>
</div>
</div>
$(function () {
$('.switch').click(function() {
console.log(this);
var CheckboxInput = $(this).find('input[type="checkbox"]');
if ($(CheckboxInput).is(':checked')) {
CheckboxInput.prop('checked','checked');
}
});
});

.click event on li plus link redirect

I am not a programmer, just know a good amount of css and html, but almost no javascript. I am trying to implement a free menu I found (thanks to stu nichols), but I am running into an issue I think is the the jquery script. I contacted the designer but he was not able to help.
I input the menu into jsfiddle.
http://jsfiddle.net/3vAaN/
HTML:
<ul class="leftnav1">
<li>tier1
<ul>
<li>t1 s1</li>
<li>t1 s2</li>
<li>t1 s3</li>
</ul>
</li>
<li>tier2
<ul>
<li>t2 s1</li>
<li>t2 s2</li>
<li>t2 s3</li>
<li>t2 s4</li>
<li>t2 s5</li>
</ul>
</li>
</ul>​
CSS:
.leftnav1 { font: bold 15px/15px arial, sans-serif; text-align: center; border: 5px solid #400; }
.leftnav1 {background:#600; width:180px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul {background:#700; width:170px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul {background:#800; width:160px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul ul {background:#900; width:150px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul { display: none; }
.leftnav1, .leftnav1 ul { padding: 10px 5px; margin: 0; list-style: none; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); }
.leftnav1 li a { color: #ddd; text-indent: 0; text-decoration: none; display:block; }
.leftnav1 li { cursor: pointer; width: 100%; padding: 5px 0; }
.leftnav1 li a:hover { color: #fff; }
.leftnav1 li.has_ul { color: #fc0; }
.leftnav1 li.has_ul:hover { color: #0cf; }
.leftnav1 li.clicked { color: #0cf; }
​JavaScript:
$(document).ready(function () {
timer=0;
/* time in milliseconds */
collapse = 10000;
$(".leftnav1 li:has(ul)").click(function (event) {
if (this == event.target) {
$(this).toggleClass('clicked').children('ul').slideToggle();
$(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
$(this).siblings().removeClass('clicked').find("ul").slideUp();
}
}).addClass('has_ul');
$(".leftnav1").mouseover(function() {
clearTimeout(timer);
});
$(".leftnav1").mouseleave(function() {
timer = window.setTimeout(function(){
$('.leftnav1 li > a').siblings().children().removeClass('clicked').find('ul').slideUp();
$('.leftnav1 li > a').parent().siblings().removeClass('clicked').find('ul').slideUp();
}, collapse);
});
});
​
If you look at the menu, the sliding works correctly on the first tier because it does not contain a link within the li.
On tier 2, I add a link within the li which also has a sub ul. The sliding only works if you click on the very tip top of the li area. Not on the whole li area. My guess is that the link fires if you click anywhere on the word, not allowing the slide function in the script to fire, and vice versa when you click the tip top of the li area.
I have tried display:block in every possible class that might solve it, and it hasn't. Is it possible that jquery cannot fire a function and follow a link at the same time? The implementation of the menu will be in a static left hand column of an ecommerce site, and the links will be to categories within the site that load in the inner page area.

Rewrite the function to fire when clicking on the link (<a>). At the end of the event handler, make sure you include return false or use preventDefault()
See http://api.jquery.com/event.preventDefault/