Develop Reference

How can I make a smooth expanding div from the bottom up to 85% of the viewport?

I've this code here (Please open in expanded mode):
#wrapper {
position: fixed;
background: gray;
color: #fff;
bottom: 0;
left: 0;
right: 0;
border-radius: 12px 12px 0 0;
width: 100%;
}
#title {
text-align: center;
padding: 15px;
border-bottom: 1px solid white;
}
#notifications {
display: flex;
flex-direction: column;
overflow: scroll;
overflow-x: hidden;
}
.entry {
padding: 15px;
}
<div id="wrapper">
<div id="title">Notifications</div>
<div id="notifications">
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
</div>
</div>
It should be like in Google Maps when you explore the nearby. So like a slide up div from the bottom. The title should be visible when it's not expanded but not the notifications. When I click the title, I want to smoothly expand the element up to 85 percent of the viewport so that the user can scroll trough the notifications. When he clicks the title again, it should go back down to the initial state.
Is this possible? If yes, how?

To change between two states, expanded and collapsed, you'll need some kind of JavaScript.
As far as the CSS, I'd suggest for #wrapper instead of using bottom: 0, using something like top: calc(100% - 42px) (the 42px should be whatever the height you want to be visible) for the collapsed state, and then top: 15% for the expanded state.
For the "smooth" part of it, you just need to add a transition animation.
Here's a basic codepen showing what I mean: https://codepen.io/milesgrover/pen/gOpbrpd

Keep vertical scrollbar in a fixed position independent of horizontal scroll

I currently have a grid set up that looks something like this:
<div class="grid-container">
<div class="headers"> <!-- ... --></div>
<div class="row-container">
<div class="row"> <!-- ... --></div>
<!-- ... -->
</div>
</div>
Essentially what I'd like to do is place an overflow-x on the entire grid-container (so that scrolling horizontally will scroll both the headers and the rows together), but just place an overflow-y: overlay on the row-container (so that scrolling down will only scroll through the rows and keep the grid headers in a fixed position.
I was able to do that and it looks okay, however, the vertical scrollbar on the row-container is at the far right of the row-container. I'd like it to be visible and in a fixed position (similar to how it would look if you were to place an overflow-y on the entire grid-container except without affecting the headers).
Sorry I know I probably explained this poorly, but here's a JSFiddle that should hopefully illustrate the problem I'm having: https://jsfiddle.net/4xwd5yzp/
Notice in that fiddle, you can only see the vertical scrollbar when you scroll to the end of the row-container.
Thank you in advance for any help. Ideally, I'd prefer a solution using just HTML + CSS, but I'm also open to use vanilla JS + jQuery if absolutely necessary.
EDIT: Here is an example of how it currently works (not ideal):
And here is a photo of how I want it to look:

You were very close, if you take the overflow-y style off of .row-container and add it to .grid-container and also add position: sticky; and background: white; to .headers then I believe it'll work how you want it to.

Update the width in % rather than px.
`
.grid-container {
border: 1px solid black;
height: 200px;
width: 99%x;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.row-container {
height: 150px;
width: 99%x;
overflow-y: overlay;
}
.grid-cell {
display: inline-block;
width: 250px;
}
.headers {
border-bottom: 1px solid black;
height: 50px;
width: 99%;
}
.row {
border-bottom: 1px solid lightgray;
height: 30px;
width: 99%;
}
`

Black transparent overlay has some disturbance in UI - CSS

I've created a custom modal popup box. To show or hide the modal box, I've used JQuery code. Below is my CSS style code and JQuery code
CSS
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display:none;
z-index: 999
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display:none;
height: 200px;
width:600px;
top: 60px;
}
JQuery Code:
function showModal(){
$('.overlay').show();
$('.modal').fadeIn(100);
}
HTML Code:
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
Now, it's showing below output.
I want to remove this disturbance from UI. But need to know why it's appearing?
Is my code wrong? or Is there any other possibilities of this issue? How can I solve it?

This is definitely not something caused by your code, but by the browser. Confirm by trying to use other browsers too.
There unfortunately isn't much you can do. You can wait for them to fix it, or you can try a different approach which happens to not screw up with the rendering, but those are the only options as I see it.

I suppose that you want to achieve something like this:
$('.overlay').show(400, function() {
$(this).append($('.modal'));
$('.modal').fadeIn(1000)
});
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display: none;
z-index: 999;
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display: none;
height: 200px;
width:600px;
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
You should use callbaks in order to make it work consecutively like overlay -> modal. That disturbance is related to fading in your modal - it is hapenning at the same time as the overlay appeares. They overlap and get animated so we see some weird visual effect related to page rendering while animating.

Unable to get particleground javascript as background for div/section

Hi I am trying to get the background of a specific div on my website to be the particleground jquery background - http://jonathannicol.com/blog/2014/08/18/particleground-jquery-plugin-background-particle-systems/ . I followed the steps from here and copied the script correctly, but instead of the background showing up behind the text in a div, it forms another div or section right above it. Troubleshooting steps included; adding a div before the section declaration and giving it the ID="particle", adding a div after the section declaration and giving it the ID="particle". Also making the z-index of each of these divs 1. Here is the HTML for the section :
<div id="particle">
<section class="container-fluid about">
<div class="container parallax-window " data-parallax="scroll" data-image-src="/images/parallax.jpg" >
<div class="row">
<div class="col-md-12">
<p>From concept to roll out, GM Motors...</p>
</div>
</div>
</div>
</section>
</div>
Here is the CSS:
section.about {
background-size: cover;
background-color: #00a1de;
padding-top: 80px;
padding-bottom: 80px; }
Help would be appreciated.
section.about p {
font-size: 26px;
line-height: 1.5em;
color: white;
margin: 0;
text-align: center;
font-weight: 300; }

Here I've created a JSFiddle for the particleground effect you're seeking.
By making a slight change in your CSS you can easily achieve that:
section.about {
position: absolute;
left: 0;
top: 50%;
padding: 0 20px;
width: 100%;
text-align: center;
}
Since reading your que I came to realize that you're using bootstrap so I've also added bootstrap library to check it is supported by particleground or not.
Please have a look. It will do the trick for you.

Align an Image Centrally within a Div

I would like to place an image centrally within a div (fiddle). Because I want that div to inherit that div's height from another one that is floating next to it, I had to use this trick.
For that reason, the solutions described here don't seem to be working.
The requirement is that no other behavior is modified, but the code can be as long as the effect achieved is the same. I am also willing to accept solutions involving javascript, if necessary.
<div class="container">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: yellow;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.logo {
width: 100px;
}

I have modified the code so that the logo image can be center aligned horizontally as well as vertically.
JSFiddle
HTML code:
<div class="container">
<div class="image-div">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
</div>
Css code:
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: #FFFF00;
display: table-cell;
height: 100px;
text-align: center;
vertical-align: middle;
width: 150px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
}
.image-div {
float: left;
}
.logo {
width: 100px;
}
If you have further issue, please comment on the code, and modify the jsfiddle.
Regards D.

There are two ways for this. One you can set Margin property of any component to 'auto' if you want it to align at the middle. Of course you can set this property in CSS instead of using style tag.
<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>
Another is using center tag
(As 'margin:auto' may not work for images for some browsers however it works for div tag.)
<center>
<img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>

If you need just horizontal center, try:
.logo-div {text-align: center;}
img {margin: 0 auto;}
http://jsfiddle.net/yXNnd/18/
JS version
Using jQuery (I'm too lazy :))
http://jsfiddle.net/yXNnd/25/
Add this js
$(document).ready(function(){
var img = $('.logo-div img');
var top = ($('.container').height() / 2) - (img.height() / 2);
img.css('margin-top', top + 'px');
});