We Keep Coding

how to make container unsticky after some point

Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>

Alignment of item using flexbox

Following is the code which is working fine with position: relative and position: absolute. However I am trying to achieve similar effect using Flexbox and though the item is adjusted in the center but it is not overlapping like the one achieved using position. Let me know how can I achieve the similar effect using Flexbox.
Code -
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; }
.box4 { width: 40px; height: 40px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>

You can use negative margins to adjust the overlapping. Add margin-left: -50px; to box4 to achieve the desired output.
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; }
.box4 { width: 40px; height: 40px; margin-left: -50px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>

You should change HTML and put the blue box inside the green one. Then,
add css for green box:
.box3 { display: flex; align-items: center; justify-content: center; }
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.box4 { width: 40px; height: 40px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green">
<div class="box4 blue"></div>
</div>
</div>

if you want to make the same effect but using flexbox only, I don't think you can do that but you need to use position with flexbox like code below:
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
.green {
background: #2a9d8f;
}
.blue {
background: #333366;
}
/* Position CSS */
.position-container {
position: relative;
}
.box1,
.box2 {
position: absolute;
}
.box1 {
width: 60px;
height: 60px;
left: 120px;
top: 120px;
}
.box2 {
width: 40px;
height: 40px;
left: 130px;
top: 130px;
}
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 {
width: 60px;
height: 60px;
position: absolute;
}
.box4 {
width: 40px;
height: 40px;
position: absolute;
}
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>

Custom JQuery Slider doesn't work as expected

I tried to make a custom slider for my projects on my website.
It's important for me to use div tags to slide, because I want to include more information on it, like text and buttons.
It has a "next"- and "previous" button. The problem is that it doesn't slide back and it doesn't start at the beginning after it reached the last slide.
What's going wrong?
$(document).ready(function() {
projectSlider($('.projects').children('.project').first());
function projectSlider(projects) {
$(projects).show(function() {
$('.next').click(function() {
if (projects.next().hasClass('project')) {
projectSlider(projects.next());
} else {
projectSlider($('.projects').children('.project').first());
}
});
$('.previous').click(function() {
if (projects.prev().hasClass('project')) {
projectSlider(projects.prev());
} else {
projectSlider($('.projects').children('.project').first());
}
});
});
}
});
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}
/* */
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
}
.inline-list {
list-style-type: none;
padding: 0;
}
.inline-list>li {
display: inline-block;
}
/* */
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 35%;
height: 100vh;
background: #fff;
}
.profile {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.avatar {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: url("../img/avatar.jpg") no-repeat center center;
background-size: cover;
border-radius: 100%;
}
.socialmedia>li {
padding: 0 5px 0 0;
}
.socialmedia>li>a {
color: #212121;
}
/* */
main {
display: block;
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
display: block;
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
display: inline-block;
position: absolute;
width: 36px;
height: 36px;
margin: 0 20px 0 20px;
background: #f5f5f5;
color: #212121;
border-radius: 100%;
cursor: pointer;
}
.backward {
left: 0;
float: left;
text-align: center;
}
.backward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/left-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/right-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward {
right: 0;
float: right;
}
.projects {
display: block;
position: relative;
width: 100%;
height: 100vh;
}
.project {
display: none;
position: absolute;
width: 100%;
height: 100vh;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
/* */
footer {
display: block;
position: relative;
bottom: 0;
padding: 0;
width: 100%;
height: 36px;
background: #fff;
}
.made {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
.made>p {
display: inline-block;
}
.legal {
display: inline-block;
position: absolute;
float: right;
right: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
/* */
.envelope {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/envelope.svg") no-repeat center center;
background-size: cover;
}
.twitter {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/twitter.svg") no-repeat center center;
background-size: cover;
}
.dribbble {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
background-size: cover;
}
.github {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/github.svg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<div class="control previous">
<div class="backward-arrow"><-</div>
</div>
<div class="control forward next">
<div class="forward-arrow">-></div>
</div>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
JSFiddle

Your code seems to be unnecessarily recursive. Each time you click an arrow, the click handlers are bound again. Also, if you click "next", the object passed to projectSlider contains only a single project element, so there will be no "next" or "previous" in that object.
I suggest a different approach. In my example below, for each click, the appropriate project (based on a numeric index) is hidden, then appended to the project container (which stacks it on top of the others), and then re-shown (for animation purposes).
function refreshProjects(project_holder, projects, project_index) {
project_index = (project_index + projects.length) % projects.length;
var thisProject = projects.eq(project_index);
thisProject.hide().appendTo(project_holder).show(250);
}
$(function() {
var project_holder = $('.projects');
var projects = project_holder.children('.project');
var project_index = 0;
$('.control-next').click(function() {
refreshProjects(project_holder, projects, ++project_index);
});
$('.control-previous').click(function() {
refreshProjects(project_holder, projects, --project_index);
});
});
body {
padding: 0;
margin: 0;
font-size: 10px;
}
main {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
position: absolute;
background: #f5f5f5;
border: none;
color: #212121;
border-radius: 50%;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: .5em;
box-sizing: content-box;
font-size: 1.4em;
outline: 0;
}
.control-previous {
left: 1em;
}
.control-next {
right: 1em;
}
.projects {
width: 100%;
height: 100vh;
}
.project {
position: absolute;
width: 100%;
height: 100%;
}
.project:not(:first-child) {
display: none;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<button type="button" class="control control-previous"><-</button>
<button type="button" class="control control-next">-></button>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>

Multiple div carousel functionality using HTML/CSS/jQuery

How to achieve the carousel of multiple divs after clicking on add button? For each loop will repeat the div for every click of Add button. After click, multiple divs to be placed side by side and when it is overflow we need to do the carousel functionality for it with arrow marks as next and prev. Any Ideas on how to solve this?
.small-header {
min-height: 124px;
background-position: center right;
text-align: center;
display: table;
width: 100%;
padding: 22px 20px 0;
background: #fff;
box-sizing: border-box;
}
.small-header .vertical-align {
display: table-cell;
vertical-align: middle;
}
.component-carousel {
width: 530px;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
}
.component-carousel:before {
left: 0;
}
.component-carousel:after, .component-carousel:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 1;
}
.component-carousel .outer-content {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.component-carousel .items {
position: relative;
height: 190px;
left: 145px;
}
.component-carousel .items .item {
top: 0;
left: -50px;
height: 190px;
box-sizing: border-box;
float: left;
margin: 0 20px 0 0;
position: relative;
display: table;
}
.your {
display: block;
height: 290px;
border: 2px solid #5e6a71;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 0 0 0;
width: 244px;
position: relative;
background: #fff;
}
.component-carousel .bullets {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
z-index: 3;
}
.component-carousel .bullets li {
transition: all .15s ease-out;
display: inline-block;
margin: 0 3px;
}
.your>p.card-number {
margin-top: 95px;
margin-bottom: 10px;
position: relative;
color: #5e6a71;
}
.your .infonumber {
display: block;
}
.your p.card-number:after {
content: "";
display: block;
width: 70%;
height: 1px;
background: #bec3c6;
margin: 0 auto;
margin-top: 7px;
}
.card-left:after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 95px;
background: #cecfd1;
right: -15px;
top: 0;
}
.card-detail-container {
display: block;
position: absolute;
width: 100%;
height: 80px;
left: 0;
top: 180px;
color: #5e6a71;
}
.card-left {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 18px;
}
.card-right {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 35px;
}
.card-detail-container p {
line-height: 14px !important;
}
.component-carousel.show-two .controls {
display: none;
}
.component-carousel .controls {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
}
.component-carousel .controls li.disabled {
opacity: .2;
cursor: pointer;
}
.component-carousel .controls li:first-child {
left: 0;
}
.component-carousel .controls li {
transition: all .15s ease-out;
position: absolute;
top: 0;
cursor: pointer;
background: url(/image/component/carousel/arrows.png) no-repeat center left;
height: 100%;
width: 19px;
}
.component-carousel .controls li:last-child {
right: 0;
background-position: center right;
}
.button {
border: 1px solid #a8a8a8;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
position: relative;
text-decoration: none;
white-space: normal;
cursor: pointer;
color: #292929;
}
.btn {
position: relative;
color: #4f4f4f;
left: 38%;
width: 25% !important;
max-width: 580px;
text-transform: capitalize;
}
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-horizontal" }))
{
if (Model.Details != null && Model.Details.Count() > 0)
{
<div class="small-header">
<div class="vertical-align">
<div class="component-carousel">
<div class="outer-content">
<div class="mask">
<ul class="items" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<li class="item">
#foreach (var item in Model)
{
<div class="your">
<p class="card-number">
<span class="infonumber">123456</span>
</p>
<div class="card-detail-container">
<div class="card-left">
<p class="card-shape-title">Circle</p>
<p class="card-barcode-title">24242</p>
</div>
<div class="card-right">
<p class="card-carat-title">222</p>
<p class="card-certificate-title"></p>
</div>
</div>
</div>
}
</li>
</ul>
</div>
</div>
<ul class="controls">
<li class="prev disabled"></li>
<li class="next"></li>
</ul>
</div>
</div>
</div>
}
<div class="btns">
<button type="submit" id="addinfo" class="btn button" value="Add">Add<span></span><span></span></button>
</div>
}

Make 2 divs displayed vertically to fill it's parent if one of the divs is autoresize

I have 2 divs displayed vertically inside another div with height: 100%. The bottom div is automatically resizing it's height.
It's there a way that the first div will fill the parent in it's height?
#my_app {
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
#top_container {
display: table-cell;
background-color: #00ff00;
height:auto;
width:100%;
margin-bottom: auto;
}
#container {
position: absolute;
bottom: 0;
left: 5%;
width: 90%;
background-color: #d8d8d8;
display: table-cell;
}
#edit_container {
margin: 20px;
min-height: 44px;
max-height: 80px;
width: 70%;
height: auto;
overflow: hidden;
background-color: #484040;
display: flex;
align-items: center;
}
#edit {
width: 100%;
margin: 0px 20px;
min-height: 20px;
max-height: 80px;
overflow: scroll;
line-height: 20px;
background-color: #ff5e2d;
}
#test {
position: absolute;
top: 0;
right: 20px;
bottom: 0;
width: 30%;
background-color: #ff0;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text);
}
[contentEditable=true]:empty:focus:before {
content: attr(data-text);
}
[contenteditable]:focus:after {
content: '';
}
<div id="my_app">
<div id="top_container">
NEW TEST
</div>
<div id="container">
<div id="edit_container">
<form>
<div id="edit" contenteditable="true" data-text="Insert text"></div>
</form>
</div>
<div id="test">
ACTION
</div>
</div>
</div>
And here is the jsfiddle: https://jsfiddle.net/RoxanaCristea/4460up4s/
Thank you in advance!

You need to specify "height: 100%;" to your body element.
Have a look at this question: How to fill 100% of remaining height?