Develop Reference

Hide scroll and implement it with JS

I'm a beginner to HTML and JavaScript.
I'm building a tabs bar, in which I want to have the option to scroll it horizontally, not with a traditional browser scroll, but with arrow buttons that I've created.
Here is how my tabs bar looks like:
This is the best I've managed to do:
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
I manage to go to the JavaScript function, but have no idea how to scroll horizontally by JS code. Also I would like to hide the OOTB scroll.
I've also created a fiddle: https://jsfiddle.net/b40c19h6/1/

Use overflow-x: hidden to hide the scrollbar and you can use the scrollLeft or scrollBy function on your tabs element to move the content.
Here how you can do it:
const arrowLeft = document.getElementsByClassName('arrow')[0];
const arrowRight = document.getElementsByClassName('arrow')[1];
const tabs = document.getElementById('tabs_container');
console.log("here")
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
tabs.scrollLeft -= 30;
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
tabs.scrollLeft += 30;
}
body{
height:100vh;
width:100%;
margin: 0;
}
#main_container{
background-color: #3f51b5;
height:100%;
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container{
overflow-x: hidden;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>vacabulary</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

This should work by using element.scrollBy.
The scrollBy() method of the Element interface scrolls an element by the given amount.
Also, you should set overflow-x to hidden instead of auto. overflow:auto will assign scrollbar to it
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
let left = document.querySelector('#left')
let right = document.querySelector('#right')
left.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(-20,0);
});
right.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(20,0);
});
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: hidden;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<button id='left'>Left </button>
<button id='right'>Right</button>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>

on click functions being applied to all divs with same class

I have two panels which are built using the same classes, but their content is slightly different. I have to hide and toggle classes depending on the options the user selects.
I've got the functionality working for the panels, but the issue is that the jQuery its being applied to both panels at the same time on click, which then stops the panels working how I would like. I only want the functions to be applied on click to that specific panel.
I've been reading and I thought that by using (this) would help fix this problem. Same as using .each(). But I've not been able to fix it.
Updated
Here is a jsFiddle, showing how the panels currently work. - new fiddle
User clicks on option 'everyday' within the '1.choose your range' section of the first panel
This triggers option '2 . choose your style' to appear and '1.choose your range' section to hide in the first panel
However when clicking on any of these options its being applied to the second panel also, which I do not want. The second panel should only animate when the user selects the options within that panel.
The panels shouldn't animate unless the user has selected an option within that specific panel.
Here is my jQuery Code:
$('.price-colour li').on('click', function() {
$('.price-colour li').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('.style-type').on('click', function() {
$('.style-type').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('#basket-cart').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('#popup-shopping__close-icon').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('.edit-txt').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).addClass('hidden');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
$('.range-item').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('.edit-txt').removeClass('hidden');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
font-size: 14px;
line-height: 20px;
}
h1,
h2,
h3,
h4,
h5 {
font-size: 14px;
line-height: 20px;
}
.o-unlist {
list-style: none;
margin: 0;
padding: 0;
}
.price-item {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
}
.price-item-top {
background: black;
padding: 20px;
color: white;
}
.price-item-section {
padding: 15px 30px;
border-bottom: 2px solid black;
}
.price-item-section.inactive h3 {
color: #7d7d7d;
}
.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
opacity: 0;
visibility: hidden;
transform: scaleY(0);
height: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
.price-range {
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-item-three {
padding: 15px 50px 0;
border-top: 2px solid black;
margin: 10px -30px 0;
}
.price-style {
margin-top: 50px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-style p {
margin: 10px 0 0;
padding: 0;
letter-spacing: 0.15px;
}
.style-type {
opacity: 0.6;
padding: 5px;
transition-duration: 0.3s;
transition-property: all;
cursor: pointer;
}
.style-type.selected {
opacity: 1;
}
.price-detail {
margin-top: 20px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-colour {
list-style: none;
text-align: center;
margin: 0 -7px 5px;
padding: 0;
}
.price-colour li {
display: inline-block;
margin: 0 9px;
padding: 2px;
border-radius: 100px;
cursor: pointer;
border: 1px solid transparent;
transition-duration: 0.3s;
transition-property: all;
}
.price-colour li span {
border-radius: 100px;
height: 20px;
width: 20px;
display: block;
}
.price-colour li#pink span {
background: pink;
}
.price-colour li#yellow span {
background: yellow;
}
.price-colour li#black span {
background: black;
}
.price-colour li#grey span {
background: #999999;
}
.price-colour li.selected {
border-color: #999999;
}
.price-size-guide {
font-size: 1.2rem;
line-height: 2rem;
color: $monza;
text-align: center;
letter-spacing: 1px;
border: 1px solid red;
padding: 5px;
cursor: pointer;
}
.size-guide-icon {
background: url(../images/size-guide-icon.jpg) no-repeat;
width: 25px;
height: 12px;
background-size: 25px;
display: inline-block;
}
#price-select {
border: 2px solid black;
font-size: 1.3rem;
line-height: 1.8rem;
letter-spacing: 1px;
padding: 5px;
display: block;
width: 100%;
margin: 10px 0;
}
.radio-indicator {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid black;
border-radius: 100px;
transition-duration: 0.3s;
transition-property: all;
}
.radio-select {
cursor: pointer;
font-size: 1.4rem;
letter-spacing: 2px;
position: relative;
padding: 0 0 0 30px;
margin: 0;
}
.radio-select:first-child {
margin-right: 43px;
}
.radio-select input {
position: absolute;
z-index: -1;
opacity: 0;
}
.radio-select input:checked~.radio-indicator {
background: red;
}
.radio-select a {
font-size: 1.1rem;
line-height: 1.1rem;
color: $heli;
display: block;
font-family: $grotesk;
font-weight: $groreg;
letter-spacing: 1px;
}
.edit-txt {
cursor: pointer;
font-size: 1.5rem;
z-index: 10;
position: relative;
transition-duration: 0.3s;
transition-property: all;
font-size: 14px;
line-height: 20px;
}
.edit-txt.hidden {
opacity: 0;
visibility: hidden;
}
.range-item {
display: inline-block;
text-align: center;
padding: 35px 35px 20px 0;
cursor: pointer;
}
.range-item img {
width: 31px;
height: 31px;
border-radius: 100px;
padding: 2px;
border: 1px solid transparent;
}
.range-item p {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 1px;
font-family: $grotesk;
font-weight: $groreg;
}
.range-item.selected img {
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your bottoms</h3>
</div>
<div class="price-item-one price-item-section clearfix inactive">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-brief" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>brief</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-thong" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>thong</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<!-- price item-->
</div>
<!--col lg 5-->
</div>
<!-- row-->
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your top</h3>
</div>
<div class="price-item-one price-item-section clearfix">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix inactive">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-bra" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bra</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-bralette" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bralette</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<div>
<!--col lg 5-->
</div>
<!-- row-->
</section>

Your parents() selector is selecting ALL parents. Use closest() with a selector to only toggle children beneath that element.
$(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');

Animated (shrinking) Resizing Header On Scroll in bootstrap

function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
#section0{
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(
https://images7.alphacoders.com/669/thumb-1920-669739.jpg);
background-origin: padding-box;
background-repeat: no-repeat;
background-size: cover;
background-position:center top;
}
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
/*#banner{
background: url(.././img/banner/bg.jpg) no-repeat center top;
background-size: cover;
min-height: 100%;
}*/
.logo-name{
font-size: 65px;
margin-top: 140px;
color: #FFB03B;
}
.bannertext{
margin-top: 80px;
}
.bannerelements{
margin-left: 20px;
}
.mahaGov{
width: 70%;
margin-top: 70px;
margin-bottom: 80px;
}
/* button custom style */
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
margin-left:10px;
margin-right: 10px;
margin-top:25px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.logo{
margin-left: 50px;
margin-top: 20px;
}
#buildingblocks{
padding-left: 3%;
padding-right: 3%;
}
.text-color{
color :#114576;
}
.ptext-size{
font-size: 1.4em;
font-weight: bold;
}
.text-white{
color :#ffffff;
}
/* Custom font effects */
h1{
margin-top: 1px;
margin-bottom: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section align-center" id="section0">
<div class="heading">
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="http://findicons.com/files/icons/2796/metro_uinvert_dock/128/microsoft_new_logo.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate" id="donate">DONATE NOW</button>
</div>
</div>
</header>
<div class="col-md-12 home-col12">
<div class="col-md-5">
<div class="bannertext bannerelements">
<h1>45% of youth</h1>
<h1>make the wrong</h1>
<h1>career and</h1>
<h1>life choices.</h1>
</div>
<div class="bannerelements">
<br>
<p class="text-color ptext-size">The Right Education can change that</p>
</div>
<div class="row">
<button type="button" class="btn btn-danger btn-round" style="margin-left: 40px;">BE A PART OF CHANGE</button>
</div>
<div class="row bannerelements mahaGov">
<img src="assets/img/home/banner/mahaGov1.png" class="pull-left img-responsive" alt="Govt. of Maharashtra Logo">
</div>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</div>
hello this code is for the menu-bar as well as section.my website is divided in sections.each section is full page height 100% for all screen.i want to set my header fixed on top but i want to shrink my menu or Resize my menu on Scroll of Page.as in this link "http://trungk18.github.io/Resizing-Header-On-Scroll/"

Jump on slideUp jQuery

I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?

Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>

HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle

You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>

try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/