We Keep Coding

Avoid vertical scrollbar shift in container

In html, I have a panel with a fixed height which contains cards. It can contain one card or many cards. Hence, because the panel has a fixed height, it can be needed to have a scrollbar displayed in order to visualize all cards. This works properly with the property overflow: auto.
However, when the scrollbar is displayed, cards are shift. I would like to avoid that or at least hide this shift with a trick. I checked a lot of similar questions that suggests to use padding-left: calc(100vw - 100%); but it did not work since it is not the body scrollbar. The width of the card needs to be responsive according to the container's width.
Something that could work is to set the overflow: overlay and add a padding-right. However, this is not a standard and not compatible with firefox.
Here, you can find a reproduce example:
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 20px 0;
background-color: blue;
overflow: auto;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>

In fact, it was quite simple. Just play with the margin and set the overflow to scroll.
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 12px 0 20px;
background-color: blue;
overflow: scroll;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>

Show/Hide Transition for multiple elements

I am trying to implement a show/hide function on one of my web pages. basically, there is a page on my website which shows 'Jargon' and the definitions. the user clicks on the title and the definition should then be displayed.
I have tried 2 different techniques, one works but is very harsh with no transition, it is basically open or closed:
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
The other I like but when one opens, they all open:
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Ideally, I would like a combination of the 2... where all elements open individually and the use the transition effect that the second code uses...
any help combining the 2 would be amazing

To to achieve both the transition and only moving one element at a time, you can use the this keyword. When a function is called, in this case the function() inside of your click listener, it will bind this to that context. This allows you to select the element that was clicked by simply using $(this).
This may not be the most detailed explanation, so here is a bit more information on the topic.
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>

Make progress bars responsive

I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!

I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.

How can I put these buttons side by side

How can I put these buttons side by side and centered?
The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.
$(document).ready(function() {
/*getting random quote on button click*/
$('#getMessage').on("click", function() {
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {
console.log(json[0].content)
console.log(json[0].title)
// var quoteArr = json.contents.quotes[0])
$("#quote-content").html(json[0].content);
$("#quote-author").html("--"+json[0].title);
$(".social-button").toggle();
});
});
});
body {
background-color: #334551;
}
.container {
padding-top: 50px;
}
.header_text {
font-family: 'Allura';font-size: 50px;
color: green;
}
.sub_text {
font-family: 'Allura';font-size: 30px;
}
#getMessage {
font-size: 18px;
}
.social-button {
with: 120px;
margin: 10px;
visibility: block;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: green;
border-width: 5px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 18px;
}
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
<div class="row col-lg-12 text-centered">
<img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
</div>
<div class="row">
<p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
</div>
<div class="col-md-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-lg-8 offset-lg-2">
<div id="quote-content" class="row col-lg-12 text center"></div>
<div id="quote-author" class="row col-lg-12 text center"></div>
</div>
<div class="col-xs-6 social-button center">
<a class="btn btn-info btn-block btn-social btn-twitter">
<i class="fa fa-twitter"> Twitter</i>
</a>
<a class="btn-primary btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"> Facebook</i>
</a>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
-- this is your row with text
</div>
<div class="row">
<div class="col-xs-6">
-- this is half the next row for button 1
</div>
<div class="col-xs-6">
-- this is half the next row for button 2
</div>
</div>
</div>
</div>
this is just basic bootstrap classes
on row will be col-xs-12 that will take up the entire screen for the text
then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen

Head div with four sub div

Goodmorning developers,
I am new in frontend development. I'm stuck with the following problem:
I want to have a head div with 4 sub divs inside the head one. How can I do it with fitting the screen? (see sketch)
Kind regards

I think you need this please check:
See Fiddle Demo
.container {
border: 3px solid;
float: left;
width: 100%;
}
.custom_box {
float: left;
width: 100%;
}
.custom_box1 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 35%;
}
.custom_box2 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 55%;
}
<div class="container">
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
</div>

Here is the fiddle: https://jsfiddle.net/9Lum94me/
There are other ways as well with CSS floats, flexbox and table-cell which you can explore.
HTML:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
CSS:
.container{
border: 1px solid gray;
}
.row{
padding: 10px;
}
.row .column{
display: inline-block;
min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0;
}
EDIT:
You will have to manage the widths of the columns as per needs.

A bootstrap responsive example without any style...(Except bordering).
Fiddle example
.content{
border:2px solid green;
height:100px;
width:92%;
margin:20px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row no-gutter-2">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header2</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header4</div>
</div>
</div>
</div>
</div>
To test the responsiveness, plz re-size the browser window.
Above example is responsive on small, medium and large scale.
Please run the snippet on full page.