Develop Reference

Modal height resizes to content, but at max-height of modal content becomes scrollable

I have a modal that contains tabs that potentially will have long content.
What I'm trying to do is get the modal to resize on content height but when the content exceeds the modals max-height of 80% the content section should become scrollable.
currently, it works that content scrolls when it gets too large. but the problem is now the modal__content container stays 100% height regardless of the content. if I remove the height from modal__content then the content scroll no longer works.
Hope this makes sense
<div class="modal">
<div class="modal__container">
<div class="modal__content">
<div class="modal__left"></div>
<div class="modal__right>lorem 200 </div>
</div>
</div>
<div>
<div class="modal-overlay"></div>
CSS
html, body {
height: 100%;
}
*, ::after, ::before {
box-sizing: border-box;
}
.modal {
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
position: fixed;
left: 0;
top: 0;
}
.modal__container {
width: 1076px;
display: flex;
align-items: center;
height: calc(100% - 3.5rem);
margin:1.75rem auto;
}
.modal__content {
background: white;
display: flex;
height: 100%;
}
.modal__left {
width: 400px;
background: #f6f6f6;
}
.modal__right {
flex: 1;
display: flex;
align-items: center;
}
.modal__inner {
padding: 2.5rem;
}
.modal__body {
padding: 0 2.5rem;
height: calc(100% - 5rem);
overflow-y: scroll;
}

Try adding
overflow-y: scroll;
to .modal__content
You could also try switching the heights from
height: calc(100% - 3.5rem);
to
height: 100vh;

How to make this code work with the rest?

So i am trying to build a scroll indicator using 3 div elements. All code (meaning the 3 div HTML,CSS,JS) seems to work by itself in codepen.io but when i am using Atom with the rest or my project it seems to stop working.
I tried putting the 3 div's first before everything else. All the way to the end. Using other divs as parents but nothing seems to work.
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow: auto;
scroll-snap-type: y mandatory;
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: ;
width: 100%;
height: 100vh;
}
#projects {
background-color: ;
width: 100%;
height: 100vh;
}
#gallery {
background-color: ;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #4caf50;
width: 8px;
<div id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll">
</div>
<div id="gallery" class="scroll">
</div>
</div>
<script src="scroll.js">
</script>
</body>
The div ID= myBar should show a progress of scrolling throughout the whole page and should be visible at all times.

Your css styling was wrong. Check out the snippet!
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow: auto;
scroll-snap-type: y mandatory;
position: fixed; // Make the bar stick to the left of the screen
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: ;
width: 100%;
height: 100vh;
}
#projects {
background-color: ;
width: 100%;
height: 100vh;
}
#gallery {
background-color: ;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
position: fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #ccc; // Set color to the actual bar that changes height
width: 8px;
<div id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll">
</div>
<div id="gallery" class="scroll">
</div>
<script src="scroll.js">
</script>

Add position: fixed to your class progress-container .
Edit : scroll-snap-type wasn't working because your elements weren't included in the container having the property scroll-snap-type: y mandatory; . So I added everything in 'containter', making that css property work again.
Had to change a bit your Javascript so the custom scrollbar should work again.
function myFunction() {
var elem = document.getElementById('containter');
var winScroll = elem.scrollTop;
var height = elem.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: red;
width: 100%;
height: 100vh;
}
#projects {
background-color: blue;
width: 100%;
height: 100vh;
}
#gallery {
background-color: pink;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
background: #ccc;
position: fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #4caf50;
width: 8px;
}
<body>
<div onscroll="myFunction()" id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll"></div>
<div id="gallery" class="scroll"></div>
</div>
<script src="scroll.js"></script>
</body>

Scroll Horizontally on hover only runs once?

I'm trying to make a simple scroll left and right div on hover. I'm really not sure what I'm doing wrong, I hover, but it only moves the 50 specified in the if statement. Do I need to add some kind of loop while I'm still hovering? Any help would be greatly appreciated.
Basically, I want to be able to hover over the two black boxes right and left and while it's hovered move right or left, when I remove the mouse it should stop.
$("#left").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos - 50
}, 1);
});
$("#right").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + 50
}, 1);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left"></div>
<div id="right"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
Link to script
jsfiddle
[also a side note, why does this work only on jsfiddle and no where else?]

Your issue is because the mouseenter and mouseleave events (which underpin the hover() logic) only fire once, when the mouse enters/leaves the targeted element. If you want to repeatedly perform an action whilst the element is over those elements you'll need to implement your own logic.
To achieve this you can use an interval within the mouseenter handler of the hover() to repeatedly shift the scroll position of the required element. Then in the mouseleave you can clear that timer.
Also note that you can DRY up your code by using a common class on both elements along with a data attribute to govern the movement increment per tick of the interval. Try this:
var timer;
$('.hover-scroll').hover(function() {
var increment = $(this).data('pos');
timer = setInterval(function() {
var leftPos = $("#wrapper").scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + increment
}, 1);
}, 50);
}, function() {
clearInterval(timer);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left" class="hover-scroll" data-pos="-50"></div>
<div id="right" class="hover-scroll" data-pos="50"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
If you want to speed up or slow down the scroll, change the delay on the interval

How can i make a box with 940px width fixed inside a scrollable div?

I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}

You need to write javascript code, where you can get cursor position and depending on that enable scroll event.

Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.

Set height of div to 100% of remaining space under header

I have 2 divs:
A header div at the top of the page with a set height of 150px.
A container div sitting under the header div.
What I would like is for the container div to be dynamic and resize to 100% of the remaining space underneath the header div.
I have tried putting in height: 100% but this makes the page need to scroll. I presume it is making the div 100% of the browser height rather than 100% of the remaining body's height.
How can I make it so that the container div simply resizes its height to the remaining body space?
Please find the relevant code below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: 100%;
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>

You can simply do that by using some math with the calc() CSS function. Subtract 150px (the header size) from 100%. This is dynamically calculated.
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
Compatibility: calc() is supported in most modern browsers and IE 9 +
Example fiddle and snippet below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>

I think the correct modern way to acomplish this without css hacks is with FlexBox, which as of the writting of this post is supported by all modern browsers. (you can check browser compatibility here)
It also gives you more flexibility. If you later decide to add new rows (or even side columns) is very easy to acomplish without any calculations.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex; /* Activates FlexBox Model */
flex-direction: column; /* Divs are spanned vertically */
width: 100%;
height: 100%;
}
#header {
background-color: #ccc;
height: 150px;
}
#content {
background-color: #888;
flex-grow: 1;
}
<div id="container">
<div id="header">My header with some stuff</div>
<div id="content">My content</div>
</div>

The outer container has to have position: relative and the div that you want to stretch to the bottom has to have position: absolute. This solution is pure css with no calls to calc().
body, html {
margin: 0;
height: 100%;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#header {
height: 150px;
width: 100%;
background-color: #999999;
}
#mainContent {
width: 760px;
top: 150px;
bottom: 0;
right: 0;
left: 0;
background-color: #CCCCCC;
margin: 0 auto;
position: absolute;
}
JSFiddle: http://jsfiddle.net/wt0k73bz/