Develop Reference

How to prevent the Kendo grid from loading the data twice if endless scrolling is enabled?

I have a Kendo grid with server side paging/sorting/filtering and with endless scrolling enabled. With this scenario I have the problem that when the grid is filtered, the data is loaded twice. The first time all data is loaded and the second time the filtered data is loaded.
To reproduce the problem you have to do the following steps.
Code Example: https://dojo.telerik.com/#Ruben/OnODErav
Scroll down in the grid until new data is loaded
In the console there should be the event "Grid data bound" two times by now
Set any filter on any column
Now you have the event "Grid data bound" four times in the console, instead of three times!
The error occurs only after you scrolled down. If you restart and only do step three you will see that the event is only fired two times (initial one and after filtering) which is correct.
Does anybody know how I can prevent it from loading the data twice?
function onDataBound(arg) {
kendoConsole.log("Grid data bound");
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
dataBound: onDataBound,
filterable: true,
sortable: true,
scrollable: {
endless: true
},
pageable: {
numeric: false,
previousNext: false
},
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
(function($, undefined){
window.kendoConsole = {
log: function(message, isError, container) {
var lastContainer = $(".console div:first", container),
counter = lastContainer.find(".count").detach(),
lastMessage = lastContainer.text(),
count = 1 * (counter.text() || 1);
lastContainer.append(counter);
if (!lastContainer.length || message !== lastMessage) {
$("<div" + (isError ? " class='error'" : "") + "/>")
.css({
marginTop: -24,
backgroundColor: isError ? "#ffbbbb" : "#b2ebf2"
})
.html(message)
.prependTo($(".console", container))
.animate({ marginTop: 0 }, 300)
.animate({ backgroundColor: isError ? "#ffdddd" : "#ffffff" }, 800);
} else {
count++;
if (counter.length) {
counter.html(count);
} else {
lastContainer.html(lastMessage)
.append("<span class='count'>" + count + "</span>");
}
}
},
error: function(message) {
this.log(message, true);
}
};
})(jQuery);
/*
* jQuery Color Animations
* Copyright 2007 John Resig
* Released under the MIT and GPL licenses.
*/
(function(jQuery) {
// We override the animation for all of these color styles
jQuery.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function(i, attr) {
jQuery.fx.step[attr] = function(fx) {
if (!fx.state || typeof fx.end == typeof "") {
fx.start = getColor(fx.elem, attr);
fx.end = getRGB(fx.end);
}
fx.elem.style[attr] = ["rgb(", [
Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
].join(","), ")"].join("");
};
});
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
var result;
// Check if we're already dealing with an array of colors
if (color && color.constructor == Array && color.length == 3) {
return color;
}
// Look for rgb(num,num,num)
result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
if (result) {
return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
}
// Look for #a0b1c2
result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
if (result) {
return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
}
// Otherwise, we're most likely dealing with a named color
return jQuery.trim(color).toLowerCase();
}
function getColor(elem, attr) {
var color;
do {
color = jQuery.css(elem, attr);
// Keep going until we find an element that has color, or we hit the body
if (color && color != "transparent" || jQuery.nodeName(elem, "body")) {
break;
}
attr = "backgroundColor";
elem = elem.parentNode;
} while (elem);
return getRGB(color);
}
var href = window.location.href;
if (href.indexOf("culture") > -1) {
$("#culture").val(href.replace(/(.*)culture=([^&]*)/, "$2"));
}
function onlocalizationchange() {
var value = $(this).val();
var href = window.location.href;
if (href.indexOf("culture") > -1) {
href = href.replace(/culture=([^&]*)/, "culture=" + value);
} else {
href += href.indexOf("?") > -1 ? "&culture=" + value : "?culture=" + value;
}
window.location.href = href;
}
$("#culture").change(onlocalizationchange);
})(jQuery);
/*global*/
.floatWrap:after,#example:after{content:"";display:block;clear:both}
.floatWrap,#example{display:inline-block}
.floatWrap,#example{display:block}
.clear{clear:both}
body,h1,h2,h3,h4,p,ul,li,a,button
{
margin:0;
padding:0;
list-style:none;
}
html
{
top: 0;
left: 0;
overflow-y:scroll;
font:75% Arial, Helvetica, sans-serif;
background: #f5f7f8;
}
body
{
margin: 0;
padding: 0;
}
a,
li>a,
h2>a,
h3>a,
a
{
text-decoration:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a
{
color: #0487c4;
}
a:hover
{
text-decoration: underline;
}
.page
{
max-width:72%;
margin: 2% auto;
padding: 3% 5% 0;
background: #fff;
border: 1px solid #e2e4e7;
}
.offline-button {
display: inline-block;
margin: 0 0 30px;
padding: 9px 23px;
background-color: #015991;
border-radius: 2px;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
transition-duration: 0.2s;
transition-property: background-color;
transition-timing-function: ease;
}
.offline-button:hover {
background-color: #013a5e;
color: #fff;
text-decoration: none;
}
#example
{
margin: 2em 0 5em;
padding: 0;
border: 0;
background: transparent;
font-size: 14px;
}
/*console*/
.console
{
background-color: transparent;
color: #333;
font: 11px Consolas, Monaco, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
margin: 0;
overflow-x: hidden;
text-align: left;
height: 200px;
border: 1px solid rgba(20,53,80,0.1);
background-color: #ffffff;
text-indent: 0;
}
.demo-section .box-col .console
{
min-width: 200px;
}
.console .count
{
background-color: #26c6da;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
color: #ffffff;
font-size: 10px;
margin-left: 5px;
padding: 2px 6px 2px 5px;
}
.console div
{
background-position: 6px -95px;
border-bottom: 1px solid #DDD;
padding: 5px 10px;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.console .error
{
background-position: 6px -135px;
}
/*configurator*/
.centerWrap .configuration,
.configuration,
.configuration-horizontal
{
margin: 4.5em auto;
padding: 3em;
background-color: rgba(20,53,80,0.038);
border: 1px solid rgba(20,53,80,0.05);
}
.absConf .configuration
{
position: absolute;
top: -1px;
right: -1px;
height: auto;
margin: 0;
z-index: 2;
}
.configuration-horizontal
{
position: static;
height: auto;
min-height: 0;
margin: 0 auto;
zoom: 1;
}
.configuration-horizontal-bottom
{
margin: 20px -21px -21px;
position: static;
height: auto;
min-height: 0;
width: auto;
float:none;
}
.configuration .configHead,
.configuration .infoHead,
.configuration-horizontal .configHead,
.configuration-horizontal .infoHead
{
display: block;
margin-bottom: 1em;
font-size: 12px;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
}
.configuration .configTitle,
.configuration-horizontal .configTitle
{
font-size: 12px;
display: block;
line-height: 22px;
}
.configuration .options,
.configuration-horizontal .options
{
list-style:none;
margin: 0;
padding: 0;
}
.configuration button,
.configuration-horizontal button
{
margin: 0;
vertical-align: middle;
}
.configuration .k-textbox,
.configuration-horizontal .k-textbox
{
margin-left: 7px;
width: 30px;
}
.configuration .options li { display: block; margin: 0; padding: 0.2em 0; zoom: 1; }
.configuration .options li:after,
.configuration-horizontal:after
{
content: "";
display: block;
clear: both;
height: 0;
}
.configuration-horizontal .config-section
{
display: block;
float: left;
min-width: 200px;
margin: 0;
padding: 10px 20px 10px 10px;
}
.configuration label,
.configuration input
{
vertical-align: middle;
line-height: 20px;
margin-top: 0;
}
.configuration label
{
float: left;
}
.configuration input
{
width: 40px;
}
.configuration input,
.configuration select,
.configuration .k-numerictextbox
{
float: right;
}
.configuration input.k-input
{
float: none;
}
.configuration .k-button,
.configuration .k-widget
{
margin-bottom: 3px;
}
/* Code Viewer */
.source {
background-color: #f5f7f8;
margin: 0 0 5em;
border: 1px solid rgba(20,53,80,0.05);
}
.source .code {
background-color: #fff;
border-top: 1px solid rgba(20,53,80,0.08);
padding: 20px 0 0;
}
.source .code pre {
margin: 0;
padding: 0 20px 20px;
}
.source .offline-button {
background: none;
text-decoration: none;
color: #0487c4;
margin: 10px 0 10px 14px;
padding: 10px;
}
.source .offline-button.selected {
color: #000;
}
.source .code .controller {
display: none;
}
/* Pretty Print */
.prettyprint
{
font-size: 12px;
overflow: auto;
}
pre .nocode { background-color: transparent; color: #000; }
pre .str, /* string */
pre .atv { color: #2db245; } /* attribute value */
pre .kwd { color: #ff3399; } /* keyword */
pre .com { color: #9933cc; } /* comment */
pre .typ { color: #000; } /* type */
pre .lit { color: #0099ff; } /* literal */
pre .pun { color: #333; } /* punctuation */
pre .pln { color: #3e526b; } /* plaintext */
pre .tag { color: #3e526b; } /* html/xml tag */
pre .atn { color: #3e526b; } /* attribute name */
pre .dec { color: #3e526b; } /* decimal */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #333; }
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #eee; }
/*keyboard navigation legend */
.key-button {
display: inline-block;
text-decoration: none;
color: #555;
min-width: 20px;
margin: 0;
padding: 3px 5px;
font-size: 12px;
text-align: center;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background: #eee;
box-shadow: 0 1px 0 1px rgba(0,0,0,0.1), 0 2px 0 rgba(0,0,0,0.1);
}
.widest {}
.wider {}
.wide {}
.leftAlign, .rightAlign, .centerAlign {text-align: left;}
.letter {
padding-top: 14px;
padding-bottom: 11px;
font-weight: bold;
font-size: 17px;
}
ul.keyboard-legend {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: left;
}
#example ul.keyboard-legend li,
.demo-section .box-col ul.keyboard-legend li {
display: block;
margin: 0;
padding: 4px 0;
line-height: 1.5em;
}
ul.keyboard-legend li a {
color: #0487C4;
}
.button-preview {
display: inline-block;
vertical-align: top;
padding: 0 5px 0 0;
}
.button-descr {
display: inline-block;
vertical-align: top;
text-align: left;
padding: 3px 0;
}
.demo-section p a.hyperlink,
.config-section a {
color: #e15613;
text-decoration: none;
}
.chart-wrapper,
.map-wrapper,
.diagram-wrapper {
position: relative;
height: 430px;
margin: 0 auto 15px auto;
padding: 10px;
}
#example.absConf .chart-wrapper,
#example.absConf .map-wrapper,
#example.absConf .diagram-wrapper
{
margin-left: 0;
}
.chart-wrapper .k-chart,
.map-wrapper .k-map,
.diagram-wrapper .k-diagram {
height: 430px;
}
.config-section.console-section
{
width: 400px;
float: right;
}
#page > h2 {
float: none;
text-align: center;
width: auto;
padding: 5em 0 1em;
font-size: 3em;
}
#suites .imgPlate,
#suites .box {
border-width: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#suites {
text-align: center;
}
#suites .box {
float: none;
clear: none;
display: inline-block;
width: auto;
min-width: auto;
}
#suites .box h2 {
margin-top: 1em;
}
#draggable
{
cursor: pointer;
position: absolute;
top: 210px;
left: 30px;
border: 1px solid #ff8000;
width: 78px;
height: 78px;
border-radius: 37px;
box-shadow: 2px 0 10px #9d9d9d;
background: #ffcc00 url(../../web/dragdrop/draggable.png) 50% 50% no-repeat;
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -moz-linear-gradient(top, #ffcc00 0%, #ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff8000));
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -webkit-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -o-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -ms-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, linear-gradient(top, #ffcc00 0%,#ff8000 100%);
}
#draggable.hollow
{
cursor: default;
background: #ececec;
border-color: #cbcbcb;
}
/* Box Styles */
.box {
margin: 4.5em 7.5em;
padding: 3em;
background-color: rgba(20,53,80,0.038);
border: 1px solid rgba(20,53,80,0.05);
}
.demo-section {
margin: 0 auto 4.5em;
padding: 3em;
border: 1px solid rgba(20,53,80,0.14);
}
.demo-section:not(.wide),
#example .box:not(.wide) {
max-width: 400px;
}
.box:after,
.demo-section:after {
content: "";
display: block;
clear: both;
height: 0;
}
#example .box {
margin: 4.5em auto;
}
#example .box:first-child {
margin-top: 0;
}
.demo-section.k-content {
box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);
}
.box h4,
.demo-section h4 {
margin-bottom: 1em;
font-size: 12px;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
}
.box-col {
display: block;
float: left;
padding: 0 3em 1.667em 0;
}
.box ul:not(.km-widget) li,
.demo-section .box-col ul:not(.km-widget) li {
line-height: 3em;
}
.box li:last-child {
margin-bottom: 0;
}
.box li a {
font-size: 13px;
}
.box .k-widget {
background-color: #ebeef0;
border-color: #ccc;
color: #7c7c7c;
}
.box .k-widget.k-slider {
background-color: transparent;
}
.box .k-button {
cursor: pointer;
border-radius: 2px;
font-size: inherit;
color: #333;
background: #e2e4e7;
border-color: #e2e4e7;
min-width: 90px;
box-shadow: none;
}
.box .k-upload-status .k-button-bare {
min-width: 0;
}
.box .k-button:hover,
.box .k-button:focus:active:not(.k-state-disabled):not([disabled]),
.box .k-button:focus:not(.k-state-disabled):not([disabled]) {
background: #cad0d6;
border-color: #cad0d6;
color: #000;
box-shadow: none;
}
.box .k-primary {
color: #fff;
background: #015991;
border-color: #015991;
}
.box .k-primary:hover,
.box .k-primary:focus:active:not(.k-state-disabled):not([disabled]),
.box .k-primary:focus:not(.k-state-disabled):not([disabled]) {
background: #013A5E;
border-color: #013A5E;
color: #fff;
}
.box .k-textbox,
.box textarea {
background: #fff;
border-color: #e2e4e7;
color: #555;
border-radius: 2px;
}
.box .k-textbox:hover,
.box .k-textbox:active,
.box .k-textbox:focus,
.box textarea:hover,
.box textarea:active,
.box textarea:focus {
border-color: #cad0d6;
background: #fff;
color: #333;
box-shadow: none;
}
.box.demo-description p {
line-height: 1.5em;
max-width: 1000px;
padding-bottom: 1em;
}
.box.demo-description p:last-child {
padding-bottom: 0;
}
.box.demo-description ul,
.box.demo-description ul li {
list-style: disc inside;
line-height: 1.5em;
max-width: 1000px;
}
.box.demo-description ol,
.box.demo-description ol li {
list-style: decimal inside;
line-height: 1.5em;
max-width: 1000px;
}
.box.demo-description ul,
.box.demo-description ol {
margin: 1em;
padding: 0;
}
.demo-hint {
line-height: 22px;
color: #aaa;
font-style: italic;
font-size: .9em;
padding-top: 1em;
}
.responsive-message {
font-size: 17px;
display: none;
margin: 4em auto;
padding: 2.5em;
text-align: center;
background-color: #ffda3f;
color: #000;
}
.responsive-message:before {
content: "This demo requires browser or device screen width to be equal or greater than 1024px.";
}
#media screen and (max-width: 1023px) {
.page {
max-width:100%;
margin: 0;
padding: 10px;
background: #fff;
border: 0;
}
.hidden-on-narrow {
display: none !important;
}
.responsive-message {
display: block;
}
}
div.console div {
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<div class="box wide">
<h4>Console log</h4>
<div class="console"></div>
</div>
</div>
</body>
</html>

The Problem seems to be by design and it will not be changed in the near future.
We are considering improvements in dataSource requests. The current
state is with two calls because we use the first one to reset the
state of the datasource and the second one to apply the sorting.
Source: https://github.com/telerik/kendo-ui-core/issues/5462#issuecomment-563259073

Not sure how to prevent it.
Deep in kendo.all.js, in the FilterMenu widget filter method, is where the doubling appears to be happening:
filter: function (expression) {
var filters = this._stripFilters(expression.filters);
if (filters.length && this.trigger('change', {
filter: {
logic: expression.logic,
filters: filters
},
field: this.field
})) {
return;
}
expression = this._merge(expression);
if (expression.filters.length) {
this.dataSource.filter(expression);
}
},
This first time after a scroll that causes a data page to be loaded, a UI filtering will cause:
this.trigger('change', to issue the request causing the first dataBound, and
this.dataSource.filter(expression); to issue the request causing the second dataBound
Looking at the debugger network tab you will see the framework issues two GET requests. (I changed my page size to 8 so the URL parameters have top=8):
https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders?$callback=jQuery1123011816937403352101_1583588644905&%24inlinecount=allpages&%24format=json&%24top=8
https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders?$callback=jQuery1123011816937403352101_1583588644905&%24inlinecount=allpages&%24format=json&%24top=8&%24filter=startswith(ShipName%2C%27h%27)
Best responses would likely come from Progress forums. You might need to be registered or licensed to post new questions there.

Custom select (Nice select) with custom scrollbar (mCustomScrollbar)

I'm new here and I'm facing an issue which I can't fix.
I have a custom select using nice select which is working perfectly, then I added mCustomScrollbar which is working fine too, the issue is when I want to use the keyboard only, I first focus using TAB and then pressing the down arrow (or spacebar, enter, up arrow) where it displays the options, once you keep using the arrow to move down the scrollbar is not moving with the cursor showing the rest of the options like if you use the mouse, I would like to find a way of fixing this so that when a user is using the keyboard it can see all the options.
Codepen: https://codepen.io/anon/pen/MPPybJ
HTML
<section class="form-container">
<form action="" method="" class="tn-general" novalidate>
<fieldset>
<div class="row">
<div class="col-md-5">
<div class="form-group form-group-floating-label">
<div class="custom-select">
<select required>
<option value="" disabled selected="selected" hidden>Seleccionar</option>
<option value="1">Soltero</option>
<option value="2">Casado</option>
<option value="3">Divorciado</option>
<option value="4">Viudo</option>
<option value="5">Concubino</option>
<option value="">Casado 1</option>
<option value="">Casado 2</option>
<option value="">Casado 3</option>
<option value="">Casado 4</option>
<option value="">Casado 5</option>
<option value="">Casado 6</option>
<option value="">Casado 7</option>
<option value="">Casado 8</option>
<option value="">Casado 9</option>
<option value="">Casado 10</option>
<option value="">Casado 11</option>
<option value="">Casado 12</option>
<option value="">Casado 13</option>
<option value="">Casado 14</option>
<option value="">Casado 15</option>
<option value="">Casado 16</option>
<option value="">Casado 17</option>
<option value="">Casado 18</option>
<option value="">Casado 19</option>
<option value="">Casado 20</option>
</select>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</section>
CSS
/* Font Size*/
$font-size-small: 0.8em; /*12px*/
$font-size-minismall: 0.813em; /*13px*/
$font-size-normal: 0.9em; /* 14px */
$font-size-main-mininormal: 0.938em; /* 15px */
$font-size-main-normal: 1em; /* 16px */
$font-size-smedium: 1.115em; /* 17px */
$font-size-medium: 1.125em; /* 18px */
$font-size-xmedium: 1.25em; /* 20px */
$font-size-xm-medium: 1.375em; /* 22px */
$font-size-big: 1.5em; /*24px*/
$font-size-xbig: 1.65em; /* 26px */
$font-size-mxlarge: 1.9em; /* 30px */
$font-size-mxxlarge: 2em; /* 32px */
$font-size-mxxxlarge: 2.125em; /* 34px */
$font-size-xlarge: 2.5em; /* 40px */
$font-size-large: 2.75em; /*44px*/
$font-size-xxlarge: 3em; /*48px*/
$font-size-xxxlarge: 50px; /* 50px */
$font-size-ultralarge: 3.75em; /* 60px */
/* Font Type*/
$font-type: "opensans-regular";
$font-type-light: "opensans-light";
$font-type-semibold: "opensans-semibold";
$font-type-bold: "opensans-bold";
$font-type-2: "urwgeometric-regular";
$font-type-2-light: "urwgeometric-light";
$font-type-2-thin: "urwgeometric-thin";
$font-type-2-semibold: "urwgeometric-semibold";
$font-type-2-bold: "urwgeometric-bold";
$color-white: #ffffff;
$color-black: #000000;
/* Gray Color*/
$color-gray: #eeeeee;
$color-gray-1:#C8C8C8;
$color-message-gray: #999fa5;
$color-soft-gray: #aeaeae;
$color-soft-gray-2: #f3f3f3;
$color-soft-gray-3: #c1c1c1;
$color-soft-gray-4: #aaa;
$color-soft-gray-5: #777777;
$color-soft-gray-6: #969696;
$color-soft-gray-7: #f9f9f9;
$color-soft-gray-8: #dddddd;
$color-soft-gray-9: #f0f0f0;
$color-soft-gray-10: #e3e3e3;
$color-dark-gray: #666666;
$color-dark-gray-0: #333333;
$color-dark-gray-2: #434343;
$color-dark-gray-3: #535353;
$color-dark-gray-4: #626262;
$color-dark-gray-5: #d4d4d4;
$color-dark-gray-5: #c9c9c9;
$color-dark-gray-6: #a6a6a6;
$color-dark-gray-7: #555555;
$color-dark-gray-8: #303030;
$color-dark-gray-9:#d8d8d8;
/* Orange Color*/
$color-soft-orange: #f9a885;
$color-super-soft-orange: #FFF8E4;
$color-ui-orange: #ff6600;
$color-ui-orange-2: #ff5a00;
$color-ui-orange-3: #FF6800;
$color-orange: #f56122;
$color-orange-2:#ef5816;
$color-orange-3:#ed5927;
$color-orange-3: #ff7022;
$color-orange-4: #ff5d00;
$color-orange-5: #ef5411;
$color-orange-6:#ff8b1d;
$color-orange-7:#ff8400;
$color-orange-8: #FFA500;
$color-dark-orange: #da480a;
/* Red Color*/
$color-red: #e14421;
$color-red-2: #de0000;
$color-red-3 :#ff6464;
/* Blue Color*/
$color-blue: #3F525F;
$color-dark-blue: #2c4854;
/* Green Color*/
$color-green: #009a63;
$color-green-2: #009900;
$color-green-3: #00d095;
/*Yellow Colors*/
$color-soft-yellow: #fcf8e3;
$color-soft-yellow-2: #fff5d8;
$color-yellow-1: #ffbf00;
$color-yellow-2: #fad054;
/*Gradient Class Colors*/
.tn-gradient-1 {
background-image: linear-gradient(119deg, #ff6600,#ffcb00);
}
.tn-general {
.custom-checkbox {
.custom-control-indicator {
border-radius: 50%;
border: 0.15rem solid $color-soft-gray-3;
background-color: white;
width: 1.5rem;
height: 1.5rem;
}
.custom-control-description {
padding-top: 5px;
padding-left: 10px;
}
.custom-control-input:checked~.custom-control-indicator {
color: white;
background-color: $color-ui-orange;
border-color: $color-ui-orange;
background-size: 10px;
}
.custom-control-input:focus ~ .custom-control-indicator {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #fff;
}
}
.custom-checkbox-nobg {
.custom-control-indicator {
border-radius: 25%;
border: 0.05rem solid $color-soft-gray;
background-color: white;
width: 1.5rem;
height: 1.5rem;
}
.custom-control-description {
padding-top: 5px;
padding-left: 10px;
}
.custom-control-input:checked ~ .custom-control-indicator {
color: $color-dark-gray;
background-color: white;
border-color: $color-dark-gray;
background-size: 10px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.custom-control-input:focus ~ .custom-control-indicator {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #fff;
}
}
.tn-btn-main {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: $color-orange-3;
border-radius: 50px;
border: 0;
color: white;
font-family: $font-type-semibold;
font-size: $font-size-main-normal;
line-height: 1;
text-align: center;
width: 200px;
height: 42px;
padding: 0;
margin: 20px 0;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
transition-duration: 0.3s;
transition-property: color, background-color;
&.tn-mt-3 {
margin-top: 30px;
}
&:hover {
background-color: $color-orange-7;
}
&:focus {
outline: 0;
}
&.disabled {
opacity: 0.6;
color: $color-dark-gray-7;
cursor: default;
font-family: "opensans-regular";
}
}
.tn-btn-msg {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: $color-ui-orange-3;
border-radius: 5px;
border: 0;
color: white;
font-family: $font-type-semibold;
font-size: $font-size-medium;
line-height: 1;
padding: 10px 15px;
margin: 5px 0;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
transition-duration: 0.3s;
transition-property: color, background-color;
&.tn-mt-3 {
margin-top: 30px;
}
&:hover {
background-color: $color-orange-7;
}
&:focus {
outline: 0;
}
&.disabled {
opacity: 0.6;
color: $color-dark-gray-7;
cursor: default;
font-family: "opensans-regular";
}
}
.tn-btn-second {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: $color-white;
border: 2px solid $color-ui-orange;
border-radius: 50px;
color: $color-ui-orange;
font-family: $font-type-semibold;
font-size: $font-size-main-normal;
line-height: 1;
width: 200px;
height: 42px;
padding: 0;
text-align: center;
margin: 20px 0;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
transition-duration: 0.3s;
transition-property: color, background-color;
&.tn-mt-3 {
margin-top: 30px;
}
&:hover {
border: 2px solid $color-orange-7;
background-color: $color-white;
color: $color-orange-7;
}
&:focus {
outline: 0;
}
&.disabled {
opacity: 0.6;
color: $color-dark-gray-7;
cursor: default;
font-family: "opensans-regular";
}
}
.tn-btn-collapse {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: $color-orange-5;
font-size: $font-size-normal;
font-family: $font-type-semibold;
background-color: $color-soft-gray-9;
width: 100%;
border: 0 none;
padding: 0.8rem;
position: relative;
&:before {
outline: 0;
display: inline-block;
content: "";
background: url("../images/buttons/tn-arrow-collapse.png") center center no-repeat;
height: 12px;
width: 12px;
position: relative;
top: 2px;
right: 5px;
}
&:focus {
outline: 0;
box-shadow: none;
}
}
.tn-btn-collapse[aria-expanded="true"] {
&:before {
background: url("../images/buttons/tn-arrow-collapsed.png") no-repeat;
}
}
/* Black Check */
.check-icon {
list-style-type: none;
li {
background: url("../images/icons/check-small-2.png") no-repeat 0 4px;
padding-left: 20px;
margin: 5px 0;
font-family: $font-type;
line-height: 1;
color: $color-dark-gray;
}
}
.tn-form-wrapper {
p {
margin-bottom: 0;
}
}
.tn-form-title {
h1 {
color: $color-dark-gray-8;
font-family: $font-type;
font-weight: bold;
font-size: $font-size-mxxxlarge;
padding-bottom: 15px;
}
}
// Floating labels
.form-group.form-group-floating-label {
position: relative;
&:not(:first-child) {
margin-top: 40px;
}
label {
font-size: 15px;
font-weight: 600;
color: $color-soft-gray-4;
display: block;
}
.form-control {
font-family: 'urwgeometric-regular';
font-size: $font-size-xmedium;
font-weight: 600;
color: $color-dark-gray-0;
width: 100%;
border: 0;
border-bottom: 1px solid #CCC;
border-radius: 0;
padding-top: 0;
padding-left: 0;
outline: 0;
&.invalid {
border-color: $color-red-2;
}
&:focus {
border-color: $color-ui-orange;
}
&:focus + .form-control-placeholder,
&:valid + .form-control-placeholder {
font-size: $font-size-main-normal;
transform: translate3d(0, -100%, 0);
}
&:disabled + .form-control-placeholder {
font-size: $font-size-main-normal;
transform: translate3d(0, -100%, 0);
}
&:disabled + .form-control-placeholder.form-control-placeholder-no-input {
transform: none;
}
&:disabled {
background-color: transparent;
cursor: not-allowed;
border-color: $color-soft-gray-10;
}
}
.form-control-placeholder {
font-size: $font-size-xmedium;
font-weight: 600;
color: $color-soft-gray-4;
position: absolute;
top: 0;
left: 0;
padding-top: 5px;
transition: all 200ms;
cursor: text;
}
.form-invalid-message {
font-size: $font-size-normal;
font-weight: 600;
color: $color-red-2;
max-width: 100%;
margin-top: 4px;
margin-bottom: 0;
position: absolute;
&.position-relative {
position: relative;
}
}
&.form-group-single-inputs {
input {
display: inline-block;
height: 24px;
font-size: $font-size-xbig;
text-align: center;
max-width: 20px;
padding: 0;
margin-top: 17px;
margin-right: 7px;
vertical-align: bottom;
&:valid {
border-color: transparent;
}
&:invalid {
border-color: #CCC;
}
&:focus {
border-color: $color-ui-orange;
}
&.invalid {
border-color: $color-red-2;
}
}
}
// custom select dropdown
select {
display: none;
}
.custom-select {
display: block;
background: transparent;
border: 0;
padding: 6px 0;
position: relative;
.nice-select {
font-family: 'urwgeometric-regular';
font-size: $font-size-xmedium;
font-weight: 600;
color: $color-dark-gray-0;
background: url('../../Content/images/buttons/chevron-down-arrow-light-gray.png') no-repeat right;
background-size: 15px;
border-bottom: 1px solid #CCC;
padding-bottom: 7px;
cursor: pointer;
&:focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
&:active,
&:hover,
&.removeFocus {
outline: none;
}
& span.current {
color: $color-soft-gray-4;
}
&.open {
border-color: $color-ui-orange;
.list {
opacity: 1;
pointer-events: auto;
transform: scale(1) translateY(0);
}
}
&.invalid {
border-color: $color-red-2;
}
&.disabled {
border-color: $color-soft-gray-10;
pointer-events: none;
& span {
color: $color-soft-gray-10;
}
}
&.optionSelected {
background: url('../../Content/images/buttons/chevron-down-arrow-dark-gray.png') no-repeat right;
background-size: 15px;
& span.current {
color: $color-dark-gray-0;
}
}
// List and options
.list {
max-height: 400px;
font-size: $font-size-medium;
font-weight: 600;
background-color: white;
color: $color-dark-gray-0;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1;
margin-top: 8px;
border: 1px solid #e5e5e5;
border-radius: 6px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
&:hover .option:not(:hover):not(.selected) {
background-color: transparent;
}
}
.option {
font-weight: bold;
font-size: 18px;
height: 70px;
padding: 0 20px;
display: flex;
align-items: center;
cursor: pointer;
outline: none;
transition: all 0.2s;
&:hover,
&.focus,
&.selected.focus {
background-color: $color-gray;
}
&.selected {
background-color: $color-gray;
}
&.disabled {
display: none;
}
}
}
}
// Input checkbox
.form-input-checkbox {
// Remove the original ones
.styled-checkbox {
position: absolute;
opacity: 0;
// Checbox label
& + label {
display: inline;
position: relative;
padding: 0;
cursor: pointer;
// Add styled chexbox
&:before {
content: '';
display: inline-block;
width: 22px;
height: 22px;
background: white;
vertical-align: text-bottom;
margin-right: 18px;
border: 2px solid $color-dark-gray-0;
border-radius: 4px;
}
}
// Box checked
&:checked + label:before {
content: '';
background: url('../../Content/images/icons/select-checkbox-checked.png') no-repeat right;
background-size: contain;
border: 0;
border-radius: 0;
}
}
}
.custom-radio {
& .custom-control-label {
cursor: pointer;
margin-bottom: 0;
&::before {
content: '';
border-radius: 50%;
display: inline-block;
width: 24px;
height: 24px;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: url('../../Content/images/icons/radio-button-unselected.svg') center center no-repeat;
vertical-align: top;
cursor: pointer;
margin-right: 10px;
}
&::after {
content: '';
display: block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
position: absolute;
top: 0;
}
}
& .custom-control-input:not(:checked):focus ~ .custom-control-label::before {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
& .custom-control-input:checked ~ .custom-control-label::before {
background: url('../../Content/images/icons/radio-button-selected.svg') center center no-repeat;
}
& .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}
}
// input[type="radio"] {
// & + label span {
// display: inline-block;
// width: 24px;
// height: 24px;
// vertical-align: top;
// background: url('../../Content/images/icons/radio-button-unselected.svg') center center no-repeat;
// cursor: pointer;
// margin-right: 10px;
// }
//
// &:checked + label span {
// background: url('../../Content/images/icons/radio-button-selected.svg') center center no-repeat;
// }
// }
}
// General errors
.general-invalid-data {
font-size: 15px;
font-weight: 600;
line-height: 1;
color: $color-red-2;
}
// Remove box-shadow from inputs with type text
input[type="text"] {
box-shadow: none;
}
}
JS
// initialize custom select
$('select').niceSelect();
// add outline only when using TAB
let niceSelect = $('.nice-select');
niceSelect.on('click', function()
{
$(this).addClass('removeFocus');
});
niceSelect.on('blur', function()
{
if($(this).hasClass('removeFocus'))
{
$(this).removeClass('removeFocus');
}
});
// add class when choosing an option
$('.list .option:not(.disabled)').on('click keypress', function()
{
$(this).closest('.nice-select').addClass('optionSelected');
});
// remove mCustomScrollbar tabindex
setTimeout(() => {
$('.mCustomScrollBox').prop('tabindex', '-1');
}, 1000);
$('.nice-select .list').mCustomScrollbar({
theme: 'minimal-dark'
});
Thank you!

I had same task. And I did it like this
script:
$('.jsNiceSelect').niceSelect();
$(document).on('mouseenter', '.nice-select .mCSB_scrollTools', function(event) {
var $dropdown = $(this).parents('.nice-select');
$dropdown.addClass('open_scroll');
});
$(document).on('click.nice_select', function(event) {
if ($(event.target).closest('.nice-select').length === 0) {
$('.nice-select').removeClass('open_scroll');
setTimeout(function() { $('.nice-select').removeClass('open'); }, 50);
}
});
$(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
$('.nice-select').removeClass('open_scroll open');
setTimeout(function() { $('.nice-select').removeClass('open'); }, 50);
});
css:
...
&.open {
here standard styles nice select
}
here add this:
&.open_scroll{
z-index: 4;
&:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
}
...

How to change color of icons on each custom range steps

I have a custom range I have styled and modified.
For each step there is a text value displayed underneath the range in a green box, and icons at the top of each step.
I would like to know, how can I change the background color of the icons when a step has been selected? I have added some additional javascript code that is not working properly.
For instance, on the first step, the group icon will be green, and when you select the next step the person will be green and the group will change to default grey, and so on and so forth...
Thank you.
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
});
// Set active icons
$('.range-icons li').removeClass('active selected');
var icons = $('.range-icons').find('li:nth-child(' + icons + ')');
icons.addClass('active selected');
return style;
});
};
rangeSlider();
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
.range-icons .active {
color: #37adbf;
}
.range-icons .selected::before {
background: #37adbf;
}
.range-icons .active.selected::before {
display: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>

you can create classes and add the apropriate class with addClass whenever the the range input changes in range.on("input", with
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('class-'+(this.value))
since your this.value starts from 1 :
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
$('.material-icons').attr('class', 'material-icons')
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('material-icons class-'+(this.value))
});
});
};
rangeSlider();
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
/* classes with colors you want */
.class-1{
color: red;
}
.class-2{
color: blue;
}
.class-3{
color: orange;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons class-1">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>

One methos I use is using svg icons and implement the raw code. You can then manipulate this source with clases and style settings.
Look inside the svg source and finmd the path and rect tags.
document.getElementById("ranger").onchange = function(event) {
document.querySelector(".symbol.standard").style.fill = "rgb(" + event.target.value + ", 80, 160)";
}
svg {
width:200px;
.symbol.standard {
fill: #f00;
}
.symbol.other {
fill: rgb(80, 80, 160);
}
<input id="ranger" type='range' min="0" max="255">
<svg class="singleseat " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.3 63.3"> <title>seat</title>
<rect class="symbol standard" x="16.7" width="57" height="49" rx="12" ry="12"></rect>
<path class="symbol other" d="M79.9,15.8V42.3a12,12,0,0,1-12,12H22.5a12,12,0,0,1-12-12V15.8H0V51.3a12,12,0,0,0,12,12H78.3a12,12,0,0,0,12-12V15.8Z"></path>
</svg>

Getting JSON from URL and then display results in accordion using Javascript

I have created an accordion which I would like to populate using JSON from this link : http://design.propcom.co.uk/buildtest/accordion-data.json
Here is my html:
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body" >
<div class="accordion-body__contents" ></div>
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
</div><!-- end of accordion -->
I am trying to populate the accordion-header js-accordion-header div with the "heading" data from the JSON file and accordion-body__contents with the "contents" data.
This is as far as I have got with the Javascript part:
$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion-header").append("<div>" + element.heading + "</div>");
$(".accordion-body__contents").append("<div>" + element.content + "</div>");
});
}
});
Any help would be greatly appreciated as I feel like I've hit a wall with my current efforts.

There are a few issues here:
We're a bit off when handling the AJAX results
Use the data.blocks property and while looping use the element variable.
As #Danny suggested we have extra AJAX properties
Remove the callback and data properties.
Lastly your html seems over complicated
After seeing the css from your demo site, I was able to include it and remove the JQueryUI thought. Now be sure to append the entire accordion__item element.
With these problems ironed out it should look similar to this:
$.ajax({
url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion")
.append(`<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header">${element.heading}</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">${element.content}</div>
</div>
</div>`);
});
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
}
});
body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}/* CSS Document */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion js-accordion">
</div>
After skimming your demo, I've included your CSS into my example.

Why is scrolling inconsistent between Firefox, Safari and Chrome?

I'm working on this web page at http://helpir-staging.herokuapp.com. It isn't perfect but it scrolls fine on Safari. In Firefox it only scrolls using the arrow keys (no mouse scroll), and in Chrome I don't get any scroll at all.
There must be something horrifically wrong in my CSS. Any help would be really appreciated.
I'm using bootstrap, bootcards, angularjs and angular-dynamic-layout.
app.scss:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
$hero-image: "../assets/images/slider.jpg";
#import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
#import '../bower_components/bootstrap-social/bootstrap-social.scss';
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome';
// App-wide Styles
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// KAREL CSS
$heynay-background: #FAFAFA;
$heynay-peach: #f27949;
$helpir-gray: rgba(255,255,255,0.5);
html, body {
height: 100%;
width: 100%;
// background-color: blue;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.85em;
}
hr {
display: none;
}
body {
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.alert {
margin: 10px 0px;
}
.margined {
margin: 5px;
}
.navbar-default,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-text
{
color: #eeeeee;
background-color: transparent;
}
.footer > p,
.footer > p > a,
{
color: #888888;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:focus ,
.navbar-default .navbar-nav>li>a>p.active ,
.navbar-default .navbar-nav>li>a>p:focus {
border-radius: 3px;
color: #111111;
background-color: $helpir-gray;
}
#profile-button {
margin: 0px;
padding: 12px 5px;
height: 50px;
}
#profile-button:hover,
#profile-button.active {
border-radius: 3px;
color: white;
background-color: $heynay-peach;
}
.navbar-default .navbar-nav>li>a>p {
color: white;
background: none;
margin: 0px;
padding: 0px;
}
.navbar-default .navbar-nav>li>a>p>img {
height: 30px;
width: 30px;
padding: 3px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.btn-default {
color: #000;
background-color: $heynay-peach;
}
.btn-default {
color: #f00;
background-color: $heynay-peach;
}
.btn-default[disabled] {
background-color: #9B9B9B;
}
.btn-default:hover {
background-color: $heynay-background;
color: white;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 0px solid transparent;
border-radius: 4px;
}
.icon-brand {
color: $heynay-background;
}
.heynay-legal {
text-align: left;
}
.panel-default > .panel-heading {
background: $heynay-background;
}
.panel-title > a,
.panel-title > a {
text-decoration: none;
color: white;
}
.panel-title > a:hover,
.panel-title > a.active {
text-decoration: none;
color: black;
}
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
// GLOBAL STYLES
footer {
height: 60px;
text-align: center;
background-color: $heynay-background;
padding-top:20px;
padding-bottom:20px;
font-size: 0.8em;
}
#heynay-logo {
font-size: 25px;
color: #000000;
}
.navbar-toggle {
background-color: $heynay-peach;
border-color: transparent;
}
.desktop-footer {
display : none;
}
.mobile-footer {
display : inline;
}
// not sure if tyhis is used.
.general-section {
text-align: left;
padding: 50px 10px;
min-height: 75%;
font-size: 0.9em;
}
.floating-pane-holder {
display: none;
z-index:1000;
color: white;
background-color: $heynay-peach;
position: fixed;
height: 50px;
width: 90px;
top: 100px;
left: 48%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.floating-pane-content {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
position: absolute;
}
#media(min-width: 450px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 0.95em;
border-color: transparent;
}
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}
hr {
display: block;
}
}
#media(min-width:1000px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 1em;
border-color: transparent;
}
#heynay-logo {
font-size: 35px;
}
}
// TABLES
.desktop-table {
display : none;
}
.mobile-table {
display : inline;
}
// TABLES END
// MODAL BEGIN
.ngdialog.ngdialog-theme-default
.ngdialog-content {
width: 700px;
}
// MODAL END
#media(min-width:750px) {
.navbar {
padding: 20px 0;
background-color: transparent;
-webkit-transition: background .35s ease-in-out,padding .5s ease-in;
-moz-transition: background .35s ease-in-out,padding .5s ease-in;
transition: background .35s ease-in-out,padding .5s ease-in;
border-color: transparent;
}
.desktop-footer {
display : inline;
}
.mobile-footer {
display : none;
}
.top-nav-collapse {
padding: 0;
background-color: $heynay-background;
}
footer {
height: 60px;
font-size: 1em;
bottom:0;
height:2em;
}
.general-section {
padding: 100px 10px;
font-size: 1em;
}
.navbar-default .navbar-nav>li>p {
padding: 15px;
margin: 0px;
border-color: transparent;
}
}
#media(min-width: 900px) {
.desktop-table {
display : inline;
}
.floating-pane-holder {
top: 150px;
left: 10px;
transform: none;
-webkit-transform: none;
}
.mobile-table {
display : none;
}
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
// SPINNER
.spinner {
margin: 100px auto 0;
margin-bottom: 100px;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: $heynay-background;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
// Prevent first frame from flickering when animation starts
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
// Component styles are injected through grunt
// injector
#import 'admin/admin.scss';
#import 'main/main.scss';
#import '../components/category-tile/category-tile.scss';
#import '../components/footer/footer.scss';
#import '../components/modal/modal.scss';
#import '../components/oauth-buttons/oauth-buttons.scss';
// endinjector
category-tile.css
// dynamic layout bits...
#media (min-width: 1000px) {
[dynamic-layout] {
width: 1000px;
margin-top: 25px;
}
.dynanamic-layout-col-4 {
width: 250px;
margin-top: 20px;
}
.dynamic-layout-col-8 {
width: 500px;
}
}
#media (min-width: 900px) {
[dynamic-layout]{
width: 900px;
margin-top: 20px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (min-width: 600px) and (max-width: 900px){
[dynamic-layout]{
width: 600px;
margin-top: 8px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (max-width: 600px){
[dynamic-layout]{
width: 300px;
margin-top: 6px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 300px;
}
}
.dynamic-layout-item {
padding: 10px;
width: auto;
}
.move-items-animation{
transition-property: left, top;
transition-duration: .25s;
transition-timing-function: ease-in-out;
}
.dynamic-layout-item-parent.ng-enter{
transition: .25s ease-in-out;
opacity:0;
}
.dynamic-layout-item-parent.ng-enter.ng-enter-active{
opacity:1;
}
.dynamic-layout-item-parent.ng-leave{
transition: .5s ease-in-out;
opacity:1;
}
.dynamic-layout-item-parent.ng-leave.ng-leave-active{
opacity:0;
}
[dynamic-layout]{
// float: left;
position: absolute;
// overflow: hidden;
// height: 1000px;
}
.container-fluid{
position: absolute;
left: 50%;
transform: translate(-50%);
height:auto;
}
.title {
// margin-bottom: 50px;
}
main.css
.thing-form {
margin: 20px 0;
}
#banner {
border-bottom: none;
margin-top: -45px;
}
#banner h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.hero-unit {
background-image: url("#{$hero-image}");
position: relative;
# padding: 30px 15px;
color: #F5F5F5;
# background: #4393B9;
background-size:cover;
background-repeat: no-repeat;
color: #fff;
cursor: default;
padding: 1em 0 0 0;
}
.header-text {
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
cursor: default;
position: relative;
}
.navbar-text {
margin-left: 15px;
}
.privacy-terms {
margin-top: 75px;
}
.support-section {
padding-top: 150px;
text-align: center;
min-height: 85%;
}
#media(min-width: 400px) {
.intro-section {
// background: url("#{$hero-image}") no-repeat 98% 30%;
}
}
#media(min-width: 750px) {
.intro-section {
padding-top: 150px;
}
}

Your script vendor (idk what it is) is breaking it, in chrome under inspect I see this:
body, html {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
change hidden to visible and it works, at least in chrome. initialize your custom css file after the vendor script and the css property should be fixed.