We Keep Coding

Element to stick to bottom of other element

So what Im trying to achieve is to make a div element stick onscroll to nav header element bottom but they are not in the same parent, also the header dissappear onscroll down and re-appear onscroll up
this is the link to codepen
https://codepen.io/snake220/pen/VwdwpwJ
.red-div {
background-color: red;
width: 100%;
height: 50px;
position: sticky;
top: 0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color: blue;
width: 100%;
height: 30px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
so like showin in the code I want the blue div to stick under the red div onscroll.

So, you need to set position: sticky and top equal to the red nav height which equal to 50px like top: 50px;
.red-div {
background-color: red;
width: 100%;
height: 50px;
position:sticky;
top:0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color:blue;
width: 100%;
height: 30px;
position: sticky;
top: 50px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>

Navigation bar : position Absolute and Sticky

I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>

You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>

HTML/CSS Animation - JavaScript

I've been trying to animate a sliding door that is triggered on the click of a button.
Here is my fiddle
I've got two sides of the sliding door. Left side is blue, right side is red. The left side should slide to the left and the right door should slide to the right.
First of all, I'm trying to position the button to the middle of the door. I'm using
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
but still the button appears kind of sideways
But secondly when the button is clicked, both sides of the door should slide out at the same time, but unfortunately only the red door functions correctly.
The blue door is stuck. What am I doing wrong?

You can use simple JQuery animation to do what you require.
FIDDLE
Here is the code:
$("button").click(function() {
$(".one").animate({
left: '0'
});
$(".three").animate({
left: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" style="background:#98bf21;height:100px;width:100px;position:absolute;left:100px;"></div>
<div class="two" style="background:blue;height:100px;width:100px;position:absolute;left:100px;">
</div>
<div class="three" style="background:red;height:100px;width:100px;position:absolute;left:100px;"></div>
<button style="position:absolute;left:110px;top:50px;">
CLICK ME
</button>

It should be like this
function myMove() {
var elem = document.getElementById("myAnimationRight");
var elem_l = document.getElementById("myAnimationLeft");
var elem_R = document.getElementById("myAnimationRight");
elem_l.className += " opened";
elem_R.className += " opened";
}
#container {
width: 800px;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
#wrapper {
z-index: 1;
position: absolute;
display:inline-block;
width: 810px;
overflow:hidden;
}
#left {
display:inline-block;
width: 400px;
}
#right {
display:inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
transition:linear all 0.5s;
left:0;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
transition:linear all 0.5s;
right:0;
}
#myAnimationRight.opened{
right:-100%;
transition:linear all 0.5s;
}
#myAnimationLeft.opened{
left:-100%;
transition:linear all 0.5s;
}
<div id="container">
<div id ="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id ="left">
<div id ="myContainer">
<div id ="myAnimationLeft"></div>
</div>
</div>
<div id ="right">
<div id ="myContainer">
<div id ="myAnimationRight"></div>
</div>
</div>
</div>
</div>
You can handle animation via CSS and just add class opened to elements on button click.

You need to minus half the button width and height to bring it to the center.
If button's width is fixed, its correct to use calc(50% - 50px) as Icewine's answer.
For elements with dynamic widths and heights u can always use:
position: absolute;
top: 50%;
left: 50%;
transform:translateX(-50%) translateY(-50%);
The above code will center the element even if you dont know the height and width of the element.
Example:
body {
padding: 0px;
margin: 0px;
}
div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: red;
}
<div></div>
As for animation, why not use classes and let the CSS handle the animation?
function myMove() {
document.getElementById("myAnimationLeft").className = "DoorOpenLeft";
document.getElementById("myAnimationRight").className = "DoorOpenRight";
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#container {
width: 100%;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}
#wrapper {
z-index: 1;
position: absolute;
width: 100%;
overflow-x: hidden;
clear: both;
}
#left {
display: inline-block;
width: 50%;
float: left;
}
#right {
display: inline-block;
width: 50%;
float: right;
}
#myContainer {
width: 100%;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 100%;
height: 300px;
left: 0px;
position: absolute;
background-color: blue;
transition: all 1s ease;
}
#myAnimationRight {
width: 100%;
height: 300px;
left: auto;
right: 0px;
position: absolute;
background-color: red;
transition: all 1s ease;
}
.DoorOpenLeft {
left: -100% !important;
}
.DoorOpenRight {
right: -100% !important;
}
<div id="container">
<div id="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>

Defining same vars causing issues and for the left door you need to decrease value _pos--
Solution for button
left: calc(50% - 38px);
#container {
width: 810px;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
#wrapper {
z-index: 1;
position: absolute;
display: inline-block;
width: 810px;
}
#left {
display: inline-block;
width: 400px;
}
#right {
display: inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
}
<div id="container">
<div id="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>
<script>
function myMove() {
var _elem = document.getElementById("myAnimationLeft");
var _pos = 0;
var _id = setInterval(_frame, 5);
function _frame() {
if (_pos == 410) {
clearInterval(_id);
} else {
_pos--;
_elem.style.right = _pos + 'px';
_elem.style.left = _pos + 'px';
}
}
var elem = document.getElementById("myAnimationRight");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 410) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
elem.style.right = pos + 'px';
}
}
}
</script>
JQuery Solution created on #shubhamagrawal's answer.
$(document).ready(function() {
$('button').click(function() {
$("#myAnimationLeft").offset({
left: 0
})
$("#myAnimationRight").offset({
left: $("#myAnimationRight").width()
})
$("#myAnimationLeft").animate({
left: -$("#myAnimationLeft").width()
}, 2000);
$("#myAnimationRight").animate({
left: $("#myAnimationRight").width()
}, 2000);
})
})
body,
html {
margin: 0;
padding: 0;
}
#container {
width: 810px;
position:relative;
overflow:hidden;
height:300px;
}
#button {
z-index: 2;
position: absolute;
top: calc(50% - 11px);
left: calc(50% - 34px);
}
#wrapper {
z-index: 1;
position: absolute;
display: inline-block;
width: 810px;
}
#left {
display: inline-block;
width: 400px;
}
#right {
display: inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="button">
<button>Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>

For the button, you need to minus the width and height of the button to center it.
left: calc(50% - 50px); if button width is 100px;
Also, you need to set the parent div above button to position: relative; or the absolute wont work. You should also set a height of the parent div while you are at it.

Scrollbar handles not visible

The scroll-bar handles aren't visible in my page. I've tried setting overflow-x to auto and scroll for both the #cust1 and #cust2 div's.
I also need five div's to have their horizontal scrolling controlled from just one scroll-bar at the bottom of the page. (Div's #one, #two, #three, #four and #custTimeline)I don't want scroll-bars for each customer div.
Please help. https://jsfiddle.net/c71ytuxz/1/
var c = document.getElementById("custTimeline");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.save();
ctx.rotate(-90*Math.PI/180);
var baseLoc = 130;
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"];
for(i = 0; i < hours.length; i++) {
if (i == 0) {
ctx.fillText(hours[i], -120, baseLoc);
}
else {
baseLoc += 90;
ctx.fillText(hours[i], -120, baseLoc);
}
}
ctx.restore();
#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background: lightgrey;
}
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#one {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#two {
margin-left: 25%;
width: 35px;
height: 150px;
background: green;
}
#cust2 {
position: fixed;
top: 320px;
left: 0px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
}
#three {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#four {
margin-left: 15%;
width: 35px;
height: 150px;
background: green;
}
<canvas id="custTimeline"
width = "1900"
height = "130"
style = "border:3px solid #aaaaaa;">
</canvas>
<div id="cust1">
<div id="one"><p>
Customer 1
</p></div>
<div id="two"></div>
</div>
<div id="cust2">
<div id="three"><p>
Customer 2
</p></div>
<div id="four"></div>
</div>

Since the #cust1 has a width of 1500px, the scroll will only appear when its content gets wider than that, and at the moment it is only 8% (#one) + 25% + 35px (#two) in total.
If you want it to scroll, change this
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 100vw; /* changed property */
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#two {
margin-left: 25%;
width: 1000px; /* changed property */
height: 150px;
background: green;
}
Updated fiddle
Updated based on a comment
To have one scroll update another, here is one way, using jQuery.
$(document).ready(function(){
$( window ).scroll(function(){
var position = $( this ).scrollLeft();
$("#first").scrollLeft(position);
$("#second").scrollLeft(position);
});
});

Positioning z-index does not work as expected

I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>

It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.

Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.

Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}

I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.