Develop Reference

Mouse hover over button (Auto Hide & Auto Expand)

I have the code for my html button with CSS everything looks fine, just wanted to modify the button code because it should auto hide when user move away cursor from the button and same when it hover over the button should auto expand, basically it should auto expand and auto reduce and dropdown arrow would add value to it.
I already have code little confusion about adding the above points
The Dropdown arrow key to button,
Auto Expand & reduce on mouse cursor movement over the button),
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

Use onmouseover and onmouseout.
I guess you would like to keep myDropdown open, when you hover it, so I added the onmouseover/onmouseout effect also there.
And JS code is simple:
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onmouseover="show()" onmouseout="hide()" class="dropbtn">SURAH</button>
<div onmouseover="show()" onmouseout="hide()" id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

For the hovering part, you can achiveve it with CSS only:
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
Working example:
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

How to add in the array an element toggled as active?

In this page a bunch of buttons (anchor element) has it own number (id), I have to select them and put into an array when they are toggled as active.
I've already created an array, the id from buttons are adding and they are all being printed, but I can't use this class ".active" instead of my normal class "btn_reservas".
How can I add / remove in my array only the selected numbers?
var controller = (function () {
var ctrlAddItem = function (event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
};
document.querySelectorAll(".btn_reservas").forEach(function () {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function (event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
var sum = 0;
var x = document.getElementsByClassName("btn_reservas");
// var x = document.getElementsByClassName("btn_reservas.active");
var numbers = [];
for (i=0; i < x.length; i++){
x[i].id;
numbers.push(', ' + x[i].id);
}
numbers.forEach(myFunction);
function myFunction(item) {
sum += item;
document.getElementById("demo").innerHTML = sum;
}
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li{
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color:rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font:bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul >
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>

You can still refer to .btn_reservas.active you just have to use querySelectorAll instead of getElementsByClassName.
This will still calculate sum, but it doesn't worry about the array as it just looks for elements with .btn_reservas.active.
var controller = (function() {
function calcSum(){
toggled = document.querySelectorAll(".btn_reservas.active");
sel =[];
toggled.forEach(function(el){
sel.push(el.getAttribute("id"));
});
document.getElementById("demo").innerHTML = sel.join(", ");
}
var ctrlAddItem = function(event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
calcSum();
};
document.querySelectorAll(".btn_reservas").forEach(function() {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function(event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li {
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color: rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font: bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul>
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>

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.

(De-)activating navbar items in Bootstrap

I'm trying to change the background colour of a navbar item upon click by setting it active. The menu item corresponding to the left page should be deactivated, i.e. its background colour should be set back to normal.
There are two problems:
When using data-toggle="pill", the href does not work anymore (therefore I left it out)
Remembering the previous page is not working because the global variable previousID is not overwritten. As a consequence, the previously selected menu item is not deactivated.
Here's the code:
var previousID = "navbar-index";
$("li").click(function() {
var currentID = $(this).attr("id");
alert("current ID: " + currentID);
document.getElementById(currentID).setAttribute('class', 'active');
alert("previous ID: " + previousID);
document.getElementById(previousID).removeAttribute('class', 'active');
previousID = currentID;
});
/*.dropdown:hover .dropdown-menu {
display: block;
}*/
h4,
h5,
h6,
h1,
h2,
h3 {
margin-top: 0;
}
ul,
ol {
margin: 0;
}
p {
margin: 0;
font-weight: 300;
}
html,
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
background-color: #FFF;
color: #777;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.header {
background: #fff;
padding: 2em 0;
border-top: 3px solid #2ABB9B;
border-bottom: 3px solid #2ABB9B;
}
.navbar-brand {
font-size: 32px;
font-weight: 700;
color: #444;
letter-spacing: -1px;
padding: 5px;
}
.navbar-brand:hover {
color: #3e897a;
}
.navbar-brand .fa {
color: #2abb9b;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
display: block;
font-size: 1em;
color: #777;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
#nav .current a {
color: #2ABB9B;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu li a:hover {
/*color: #94ddcd;*/
color: #104a3e;
/*background: #fff !important;*/
background: #a9e3d7 !important;
}
.menu li.active a {
color: #000000;
/*background: #fff !important;*/
background: #ff0000 !important;
}
.toggleMenu {
display: none;
padding: 4px 5px 0px 5px;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-o-border-radius: 2em;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
}
#media screen and (max-width: 800px) {
.menu {
margin: 10px 0;
}
.active {
display: block;
}
.menu li a {
text-align: left;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.nav {
list-style: none;
*zoom: 1;
width: 95%;
position: absolute;
right: 10px;
background: #051619;
top: 86px;
z-index: 9999;
border: 1px solid #B11D1D;
}
.menu li a span {
text-align: center;
top: 15px;
}
.nav li ul {
width: 100%;
}
.menu ul {
margin: 0;
}
.nav > li.hover > ul {
width: 100%;
}
.nav > li {
float: none;
display: block;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
.nav li a {
border-top: 1px solid #B11D1D;
background: #fff;
}
.nav li:first-child a {
border-top: none;
}
}
.banner {
background: url(../images/banner.jpg) no-repeat center;
min-height: 500px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 100px;
}
.banner-info {
margin-top: 8em;
}
.banner-info h1 {
font-size: 3em;
color: #eee;
line-height: 1.4em;
margin: 0em;
font-weight: 500;
}
.banner-info p {
color: #ddd;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.8em;
margin-top: 1em;
}
.content_white {
text-align: center;
padding: 3em 0;
}
.content_white h2 {
font-size: 2em;
font-weight: 500;
}
.content_white p {
color: #777;
font-size: 1.2em;
font-weight: 300;
line-height: 0.6em;
}
.featured_content {
background: #2ABB9B;
}
.feature_grid1 {
width: 23.5%;
margin-right: 2em;
border-right: 1px solid #5fccb4;
padding: 4em 2em 4em 0;
}
.feature_grid2 {
width: 21%;
padding: 4em 0;
}
.feature_grid1 .fa,
.feature_grid2 .fa {
color: #e5e52d;
}
h3.m_1 {
padding: 0.8em 0;
margin: 0;
}
h3.m_1 a {
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #4ca390;
}
h3.m_1 a:hover {
color: #e5e52d;
}
p.m_2 {
color: #e9f8f5;
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1em;
font-weight: 300;
}
.banner_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #2ABB9B;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 30px;
border-radius: 5px;
}
.banner_btn:hover {
background: #22967c;
color: #fff;
text-decoration: none;
}
.feature_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #5fccb4;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 10px;
border-radius: 5px;
}
.feature_btn:hover {
background: #e5e52d;
color: #555;
text-decoration: none;
}
.nbs-flexisel-container {
position: relative;
max-width: 100%;
}
.nbs-flexisel-ul {
position: relative;
width: 9999px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
.nbs-flexisel-inner {
overflow: hidden;
margin: 3em 0;
}
.nbs-flexisel-item {
float: left;
margin: 0px;
padding: 0px;
cursor: pointer;
position: relative;
line-height: 0px;
padding-right: 30px;
}
.nbs-flexisel-item > img {
cursor: pointer;
position: relative;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 30px;
height: 30px;
position: absolute;
cursor: pointer;
z-index: 100;
margin-top: -8.6em;
}
.nbs-flexisel-nav-left {
left: 32.5em;
background: url(../images/img-sprite.png) no-repeat -99px -101px;
}
.nbs-flexisel-nav-right {
right: 35em;
background: url(../images/img-sprite.png) no-repeat -133px -102px;
}
a:focus {
outline: 0px;
}
.fa {
color: #2ABB9B;
}
.footer_bottom {
padding: 2em 0;
background: #2ABB9B;
}
.copy {
text-align: center;
}
.copy p {
font-size: 1em;
color: #fff;
}
.copy p a {
color: #fff;
border-bottom: 1px dotted;
}
.copy p a:hover {
color: #e5e52d;
border-bottom: 1px solid;
text-decoration: none;
}
.about {
background: #555;
margin-bottom: 4em;
background: url(../images/title-bg.jpg) center no-repeat;
background-size: cover;
height: 180px;
}
.title-section {
position: relative;
padding-top: 60px;
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
}
.title-section h1 {
margin: 0 0 5px 0;
line-height: 58px;
font-size: 34px;
font-weight: 500;
color: #555;
}
.title-section ul {
background: none;
position: relative;
margin: 0;
padding: 9px 0 10px 0;
border-top: 1px solid #597275;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.title-section ul li {
line-height: 18px;
font-size: 13px;
color: #5f6775;
}
.title-section ul li a {
color: #fff;
}
h3.m_2 {
font-size: 1.7em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.service_box {
padding-bottom: 50px;
}
.service_box .fa {
color: #2ABB9B;
}
.service_box h2 {
font-size: 1.6em;
color: #5d5f60;
padding-top: 0.3em;
padding-right: 0;
padding-left: 0;
padding-bottom: 0.5em;
}
.service_box h5 a {
font-size: 16px;
color: #555;
margin-bottom: 1em;
line-height: 1.5em;
}
.service_box h5 a:hover {
text-decoration: none;
color: #e4551d;
}
.service_box p {
font-size: 1em;
color: #777;
margin-bottom: 1.4em;
line-height: 1.6em;
text-align: left;
}
.about-info {
padding: 4em 0;
}
.about-info h2 {
padding-bottom: 20px;
}
.about-info h3,
.about_content h3 {
padding-bottom: 20px;
}
.about_content {
padding: 1em 0 4em 0;
}
.about_content img {
padding: 0 20px 20px 0;
float: left;
}
.highlight-info {
background: url(../images/lab.jpg) center fixed;
background-size: cover;
color: #fff;
padding: 6em 0;
}
.highlight-info h4 {
color: #fff;
margin: 0.5em 0 0 0;
}
.testimonial-solid {
padding-top: 50px;
padding-right: 0;
padding-left: 0;
padding-bottom: 70px;
margin: 0 0 0 0;
background: #fff;
text-align: center;
}
.carousel-indicators {
bottom: -40px;
}
.carousel-indicators li {
border: 1px solid #ccc;
}
.carousel-indicators .active {
background-color: #ccc;
margin-right: 4px;
}
.testimonial-solid h2 {
font-size: 2em;
font-weight: 500;
padding-bottom: 20px;
}
.testimonial-solid p {
font-size: 1em;
line-height: 30px;
}
#accordion-alt3 .panel-heading h4 {
font-size: 14px;
line-height: 28px;
}
.panel .panel-heading h4 {
font-weight: 400;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
color: inherit;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 2px;
}
.panel {
margin-bottom: 18px;
background-color: #F4F4F4;
border: 1px solid transparent;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#accordion-alt3 .panel-heading h4 a i {
font-size: 16px;
line-height: 18px;
width: 18px;
height: 18px;
margin-right: 5px;
color: #2ABB9B;
text-align: center;
border-radius: 50%;
margin-left: 6px;
}
.follow-us {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
}
.social-icon {
padding-top: 6px;
font-size: 16px;
text-align: center;
width: 32px;
height: 32px;
border: 2px solid #d5f1eb;
border-radius: 50%;
color: #d5f1eb;
margin: 5px;
}
a.social-icon:hover,
a.social-icon:active,
a.social-icon:focus {
text-decoration: none;
color: #e5e52d;
border-color: #e5e52d;
}
.contact {
padding-top: 1em;
padding-right: 0;
padding-left: 0;
padding-bottom: 4em;
}
.contact_top {
margin-right: 0;
margin-left: 0;
margin-bottom: 4em;
}
.contact_details {
background-color: #f6f6f6;
padding: 20px;
border-left: 2px solid #fff;
}
.contact_details h5 {
font-size: 1.2em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.contact_address,
.contact_mail {
overflow: hidden;
font-size: 1em;
color: #777;
line-height: 1.5em;
}
.contact_bottom h3 {
font-size: 1.5em;
font-weight: 500;
color: #666;
}
.contact_bottom p {
font-size: 1em;
line-height: 1.8em;
color: #888;
margin: 1em 0;
}
.contact-to input[type="text"] {
padding: 10px 10px;
width: 32.5%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
background: #FFF;
float: left;
outline: none;
font-size: 0.85em;
}
.text2 input[type="text"],
.text2 textarea {
width: 99%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
outline: none;
margin-bottom: 25px;
height: 150px;
padding: 10px 10px;
font-size: 0.85em;
resize: none;
}
.submit {
margin-top: 2em;
display: inline-block;
padding: 8px 20px;
font-size: 1em;
cursor: pointer;
border: none;
background: #2ABB9B;
color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
-o-transition: all 0.3s;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
}
.submit:hover {
text-decoration: none;
background: #22967c;
color: #fff;
}
#media (max-width: 1024px) {
.feature_grid1 {
width: 23%;
}
.banner {
min-height: 450px;
}
.banner-info {
margin-top: 4em;
}
.nbs-flexisel-nav-right {
right: 30em;
}
.nbs-flexisel-nav-left {
left: 29em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -7.6em;
}
}
#media (max-width: 800px) {
.header {
padding: 1em 0;
}
.feature_grid1 {
width: 100%;
padding: 4em 0em 0em 0;
}
.banner-info h1 {
font-size: 2em;
}
.banner {
min-height: 400px;
}
.feature_grid2 {
width: 100%;
}
.nbs-flexisel-nav-right {
right: 23em;
}
.nbs-flexisel-nav-left {
left: 22em;
}
.banner-info p {
font-size: 0.85em;
}
.toggleMenu {
padding: 0;
}
.service_box {
margin-bottom: 2em;
}
.contact_details {
margin-bottom: 2em;
}
.contact-to input[type="text"] {
width: 32%;
}
}
#media (max-width: 640px) {
.content_white p {
font-size: 1.3em;
}
.nbs-flexisel-nav-left {
left: 18.5em;
}
.nbs-flexisel-nav-right {
right: 18.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5.8em;
}
.service_box h2 {
margin-bottom: 0.5em;
}
}
#media (max-width: 480px) {
.banner {
min-height: 250px;
}
.banner-info h1 {
font-size: 1.5em;
}
.banner-info p {
font-size: 0.8125em;
}
.banner-info {
margin-top: 2em;
}
.header {
padding: 0.5em 0;
}
.content_white h2 {
font-size: 1.5em;
}
.content_white p {
font-size: 1em;
}
.nbs-flexisel-nav-right {
right: 13.5em;
}
.nbs-flexisel-nav-left {
left: 13.5em;
}
.contact-to input[type="text"] {
width: 31%;
}
.nav {
top: 70px;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5em;
}
}
#media (max-width: 320px) {
.banner-info h1 {
font-size: 1.2em;
}
.banner-info p {
font-size: 12px;
}
.banner {
min-height: 150px;
}
.content_white p {
font-size: 0.95em;
line-height: 1em;
padding: 0 10px;
}
.content_white h2 {
font-size: 1.3em;
}
.nbs-flexisel-nav-right {
right: 8.5em;
}
.nbs-flexisel-nav-left {
left: 8.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -4.2em;
}
h3.m_1 {
padding: 0.5em 0;
}
.contact-to input[type="text"] {
width: 99%;
}
input.text {
margin-left: 0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="container">
<a class="navbar-brand" href="index.html">
BRAND
</a>
<div class="menu">
<a class="toggleMenu" href="#">
<img src="images/nav_icon.png" alt="" />
</a>
<ul class="nav" id="nav">
<li id="navbar-home" class="current">Home
</li>
<!--<li id="navbar-services">Services</li>-->
<li id="navbar-services">Services
</li>
<li id="navbar-photos">Photos
</li>
<li id="navbar-services">
<a href="test.html" </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>

I have solved this problem by generating and inserting javascript code by using a tiny python script.
Each html file now features the lines below to set its corresponding navbar element active. The ID refers to the ID which I have assigned to an li element
inside the list of navbar elements (check the code above).
<script type="text/javascript">
document.getElementById('navbar-services').setAttribute('class', 'active');
</script>
However, I don' manually add these lines to each file, but instead wrote a python script to automatically insert recurring elements such as the menu bar, a footer, imports etc. by detecting instructions such as
<!-- #REPLACEWITH imports.html -->
<!-- #REPLACEWITH navbar.html -->
My script uses the processed file's name and autogenerates the javascript code for the specific context.
The critical lines for this particular problem are:
comment = (line[4:len(line)-4]).strip(); # detects an assignment to insert/generate code
if comment.startswith(token):
path = SRC_INCL+'/'+(comment[len(token):]).strip();
with open(path, 'r') as f:
lineArr=f.read().splitlines();
for repLine in lineArr:
print repLine
if path[path.rfind('/')+1:path.find(".html")] == 'navbar':
name = file[file.rfind(os.sep)+1:file.find(".html")];
print "<script type=\"text/javascript\">"
print "document.getElementById('navbar-"+name+"').setAttribute('class', 'active');"
print "</script>"
It works like a charm for my purpose and is easily extendible