two divs inside a container ovelayed - javascript

I have a container DIV that has two DIVs inside. The first DIV (my-canvas) needs to be positioned absoulte at 0 0 inside the container. I want the second DIV to take up the remaining 50% of space below. The finished product needs to be responsive. I am stuck on how to position the second DIV.
I have the following HTML:
<div class="container map-container">
#include('maps.world-map')
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>
My CSS is:
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
}
I am trying to figure out the CSS for the canvas below
#their-canvas {
????
}
Thanks!

You can set second div using botton:0px, height: 50%;. check updated snippet below
$('.map-container').height($(window).height()-55);
$(window).resize(function(){
$('.map-container').height($(window).height()-55);
})
body {
padding: 0px;
margin: 0px;
}
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
background: red;
}
#their-canvas {
height: 50%;
bottom: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container map-container">
<div id="my-canvas">my-canvas</div>
<div id="their-canvas">their-canvas</div>
</div>

It is unclear what you mean by "it needs to be responsive".
But if you want to put your second canvas below, you can set a top: 50%; property. Since you are using relative values for the height and top of your canvas, its parent needs to have a defined height or min-height
See https://jsfiddle.net/NotANumber/3k2go0qf/

Try following code, Using CSS itself you can achieve,
*{
padding:0px;
margin:0px;
}
.map-container {
position: absolute;
display: block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
height:100%;
}
#my-canvas,
#their-canvas {
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
background: red;
}
#their-canvas {
bottom: 0px;
background: green;
}
<div class="container map-container">
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>

Related

div sliding from right to full width

Currently, I am building a style guide and I have a question about the transition of an element. Imagine you have a container with two elements besides each other. Both have 50% width. The left element should always be visible, but the right element slides from the right into its 50% width. How can I achieve something like this? I am a bit overwhelmed with the top, bottom, left, right, position:absolute properties.
The html would look like this:
<div class="module-container">
<div class="first-element">
<div class="second-element">
</div>
and the css like this:
.module-container {
display: flex;
}
.first-element {
width: 50%;
}
.second-element {
width: 50%;
}
which properties does the second Element need in the first place? And which should I add via JavaScript after pressing, for instance, a button?
try using jQuery and transitions
$('#btn').click(function() {
$('.secondElement').toggleClass("slide");
});
.moduleContainer {
display: flex;
height: 100px;
overflow: hidden;
}
.firstElement {
position: relative;
width: 50%;
border: 1px solid #000;
}
.secondElement {
position: relative;
width: 50%;
border: 1px solid #000;
left: 100%;
transition: left 1s;
}
.secondElement.slide {
left: 0;
}
#btn {
display: block;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduleContainer">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
<button id="btn">Click Here</button>
.moduleContainer {
display: flex;
height:100px;
}
.moduleContainer > * {
border:1px solid red;
box-sizing:border-box;
overflow:hidden;
}
.firstElement {
height: 100%;
width: 50%;
}
.secondElement {
height: 100%;
width: 0%;
transition:width 0.3s ease;
}
.moduleContainer:hover .secondElement {
width:50%;
}
<div class="moduleContainer">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I have achieved it with pure CSS.I think it's good to have a bar, so the user can hover it and expand.I hope it will help you.
.moduleContainer{ display: flex;flex-flow: row nowrap; }
.firstElement{ background-color:blueviolet;flex:1;height:100px;position:relative;max-width: 50%; }
.secondElement{ background-color:aqua;height:100px;flex:1;max-width:1%;position:relative;transition:1s ease;left:48%; }
.secondElement:hover{ background-color: chartreuse;left:0px;max-width:50%; }
<div class="moduleContainer">
<div class="firstElement">First Element</div>
<div class="secondElement"></div>
</div>
You can use a negative value for margin-left of the .second-element.
.module-container {
display: flex;
height: 50px;
overflow: hidden;
}
.module-container:hover .second-element {
right: 0;
}
.first-element {
flex: 0 0 50%;
background: #f90;
}
.second-element {
flex: 0 0 50%;
background: #0f9;
right: -50%;
transition: all .6s ease;
position: relative;
}
<div class="module-container">
<div class="first-element"></div>
<div class="second-element"></div>
</div>
Or you can use position: absolute and animate the left property
.module-container {
position: relative;
height: 50px;
overflow: hidden;
}
.module-container:hover .second-element {
right: 0;
}
.first-element {
width: 50%;
background: #f90;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.second-element {
background: #0f9;
width: 50%;
position: absolute;
right: -50%;
top: 0;
bottom: 0;
transition: all .6s ease;
}
<div class="module-container">
<div class="first-element"></div>
<div class="second-element"></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>

How to make opacity gradually scale

I have a div, imgCover that overlaps an image. imgCover has a background set at rgba(255,255,255,.7), but I am wanting the opacity to gradually go from 0.0 - 1.0.
Is there anyway that I can get the imgCover's opacity to be at 0.0 at the far left and then at the far right 1.0?
jsfiddle
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background-color: rgba(255,255,255,.7);
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>
Use linear gradient instead of background-color:
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>

How to move images slightly up on scroll using Jquery?

I'm trying to create a simple parallax effect using Jquery (without plugins). Basically I have a few different images layered on-top of each-other and need them to move slightly upwards at different speeds when a user scrolls down, similar to a parallax scrolling effect.
Here's the layout so far (excuse the sloppy code):
body {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
background-color: #ededed;
z-index: 4;
display: table;
}
.header {
position: relative;
width: 100%;
background-color: #ffde15;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.headertopimg {
position: absolute;
width: 100%;
z-index: 10;
}
.headerbehindimg {
position: absolute;
width: 100%;
z-index: 9;
top:0%;
}
.headerbehindbehindimg {
position: absolute;
width: 100%;
z-index: 8;
margin-top: 8%;
}
.headerbgimg {
position: absolute;
width: 70%;
z-index: 7;
left: 50%;
margin-left: -35%;
}
<body>
<div class="header">
<div class="headertop"><img src="http://i.imgur.com/z2DORfA.png" class="headertopimg"> </div>
<div class="headerbehind"><img src="http://i.imgur.com/o1Yl0PD.png" class="headerbehindimg"></div>
<div class="headerbehindbehind"><img src="http://i.imgur.com/VQxs9LD.png" class="headerbehindbehindimg"></div>
<div class="headerbg"><img src="http://i.imgur.com/t5fTRZe.png" class="headerbgimg"></div>
</div>
</body>
Any help would be much appreciated!

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.

Categories