Develop Reference

Creating Responsive Slide Up Menu

Hoping for a little guidance. I'm making a "slide up" menu for a site i'm using and I have it working, except it's not responsive. Ideally, i'd like to have it so whatever I put in the content under "Book Now" would be hidden no matter the size, while keeping "Book Now" shown.
The way I have it set up now, I have to be very verbose about heights, and it doesn't seem to really want to work on mobile.
Hoping you kind folks could point me in the right direction of what CSS I actually need to make this work!
Here is the JSFiddle:
https://jsfiddle.net/yg13exft/
<style>
/* footer fixed Menu stuff */
.bottomNav{
overflow: hidden;
position: fixed;
bottom: -210px;
width: 100%;
transition: all .7s ease-in-out;
z-index: 9999;
}
.tipBar{
text-align: center;
transition: all .7s ease-in-out;
}
.tipBar a{
color: #6c0505;
background: orange;
display: inline-block;
padding: 5px 15px 5px 15px;
}
.menuBar{
background-color: #6c0505;
display: grid;
grid-template-columns: auto auto;
justify-content: center;
padding-top: 10px;
height: 100%;
}
.bottomNav p{
color: black;
}
.displayNone{
display: none;
}
.tipToggleAnim{
bottom: 46px;
}
.bottomMenuAnim{
bottom: 0;
}
.rightCol img{
max-height: 200px;
}
</style>
<div class="bottomNav" id="bottomNav">
<div class="tipBar" id="tipBar">
<a id="bookNowButton" class="animate__animated animate__backInUp">
Book Now!
</a>
</div>
<div id="dialog" class="menuBar" >
<div class="leftCol">
<p>
TEST TEXT HERE! :)
</p>
</div>
<div class="rightCol">
<img src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat">
</div>
</div>
</div>
<script>
let toggledVar = false;
function popupMenu(){
let menuToggle = document.getElementById("bottomNav");
let divButton = document.getElementById("tipBar");
if (toggledVar == true){
toggledVar = !toggledVar;
menuToggle.classList.remove('bottomMenuAnim');
}
else {
toggledVar = !toggledVar;
menuToggle.classList.add('bottomMenuAnim');
}
}
let buttonTest = document.getElementById("bookNowButton");
buttonTest.addEventListener("click", popupMenu, false);
</script>
Thank you.

I would use clientHeight to get the height of the dialog section and then set that as the bottom attribute so it will always be hidden. That way no matter what the height of the content, it will always know how many pixels to set bottom to and hide the div, but keep the Book Now showing.
There is a window load event because we need the DOM to fully load before we retrieve dialog div height.
Then, we use animate to smooth the change of the bottom attribute. Animate takes two parameters, the keyframes and the options. In the options, fill makes the animation run and stay in its end state. You can adjust the duration to fit your liking.
// We wait for the page to fully load, then we can grab the height of the div
window.addEventListener('load', function() {
// Toggle boolean
let toggledVar = false;
// Set toggle to Book now button
let menuToggle = document.getElementById("bookNowButton");
// Get bottomNav section
let bottomNav = document.getElementById("bottomNav");
// Get the height of the div
let hiddenSection = document.getElementById("dialog").clientHeight;
// Set bottom css attribute
bottomNav.style.bottom = `-${hiddenSection}px`;
function popupMenu(){
if (toggledVar == false) {
// Set bottom css attribute to 0px to reveal it
bottomNav.animate([
// keyframes
{ bottom: `-${hiddenSection}px` },
{ bottom: '0px' }
], {
duration: 1000,
fill: 'forwards'
});
toggledVar = true;
} else {
// Set bottom css attribute to hide it
bottomNav.animate([
// keyframes
{ bottom: '0px' },
{ bottom: `-${hiddenSection}px` }
], {
duration: 1000,
fill: 'forwards'
});
toggledVar = false;
}
}
menuToggle.addEventListener('click', popupMenu);
});
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
min-height: 100vh;
}
#bottomNav {
max-width: 100%;
position: fixed;
overflow: hidden;
left: 0px;
}
#bookNowButton {
display: block;
margin: 0 auto;
text-align: center;
padding: 1rem;
max-width: 200px;
background-color: yellow;
cursor: pointer;
}
#dialog {
background-color: #6c0505;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
padding: 1rem;
}
.rightCol img {
max-width: 100%;
}
<div id="bottomNav">
<span id="bookNowButton">Book Now!</span>
<div id="dialog">
<div class="leftCol">
<p>
TEST TEXT HERE! :)
</p>
</div>
<div class="rightCol">
<img src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat">
</div>
</div>
</div>

Overlay img with css - visualization issues from different devices

I am looking to make digital wedding invitations, even though I'm not a web developer.
I'm trying to create a page with a very simple animation where there is an envelope that shows the invitation. I have three simple images overlapped using html and css:
the front envelope - https://i.ibb.co/HBZsxLt/optipng.png
the invitation - https://i.ibb.co/h7SfR5L/part.png
the opend envelope - https://i.ibb.co/HtkgNPy/all.png
I was able to create the code (listed below) for what I want to achieve.
There are the three images overlapped and I'm able to shift the envelope with two simple lines of JavaScript. The overlapping works perfectly when I open it with Chrome. However, my issues came with the following point:
When I open the website with Firefox some pixels of the invitation come out the envelope
When I open the website from any smartphone in addition to the envelope-invitation dimension problems all the images are zoomed or moved on the left.
I tried to search if there is any way to overlap the images in an adaptive way (from the device/browser point of view), maybe using only JavaScript but I didn't find anything. I found only the css and html approach the I implemented already below. The simplest thing that I found for solving the issues was to insert a gif in the body but I don't like it very much.
My simple code is:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Invitation wedding</title>
<style>
body {
margin: 0;
background-color: white;
}
#container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
img {
height: 50%;
padding: 80px 0;
overflow: visible; /* For Firefox */
}
.env {
position: absolute;
}
.partecipazione{
height: 130%;
padding-top: 20%;
position: absolute;
padding-right: 22px;
}
.allEnvelope{
padding-top: 20%;
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div class="allEnvelope">
<img id="allEnv" src="all.png"></img>
</div>
<div class="partecipazione">
<img id="part" src="part.png"></img>
</div>
<div class="env">
<img id="envelope" src="optipng.png"></img>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script>
var timeline = new TimelineMax();
timeline.to('#envelope, #allEnv', .6, {y:290}, '+=.7');
</script>
</body>
</html>

Here I changed some things:
I removed
img {
height: 50%;
padding: 80px 0;
overflow: visible; /* For Firefox */
}
Then added a extra container around all divs inside the envelope for placement:
<div id="container">
<div class="envelopeWrapper">
<div class="allEnvelope">
<img id="allEnv" src="all.png"></img>
</div>
<div class="partecipazione">
<img id="part" src="part.png"></img>
</div>
<div class="env">
<img id="envelope" src="optipng.png"></img>
</div>
</div>
</div>
The styles:
.envelopeWrapper{
width: 603px;
max-width: 95%;
height: 500px;
position: relative;
}
the height here is just to place it in the middle of the screen.
The max-width is for mobile devices o if its smaller than the width of 603px it will adapt. Also added position: relative to adjust the div's within.
Added the styles for all divs/images inside the new wrapper:
.env, .partecipazione, .allEnvelope {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
.envelopeWrapper img{
max-width: 100%;
height: auto;
}
.partecipazione{
padding-left: 2%;
padding-right: 6%;
padding-bottom: 7%;
}
With position absolute I placed it at the corners of the bottom of the new wrapper-div.
I needed to add padding with percent for .partecipazione because the images wherent properly cut out. It's in percent so it will scale right for mobile devices.
Heres your changed code:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Invitation wedding</title>
<style>
body {
margin: 0;
background-color: white;
}
#container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.envelopeWrapper{
width: 603px;
max-width: 95%;
height: 500px;
position: relative;
}
.env, .partecipazione, .allEnvelope {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
.envelopeWrapper img{
max-width: 100%;
height: auto;
}
.partecipazione{
padding-left: 2%;
padding-right: 6%;
padding-bottom: 7%;
}
</style>
</head>
<body>
<div id="container">
<div class="envelopeWrapper">
<div class="allEnvelope">
<img id="allEnv" src="all.png"></img>
</div>
<div class="partecipazione">
<img id="part" src="part.png"></img>
</div>
<div class="env">
<img id="envelope" src="optipng.png"></img>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script>
var timeline = new TimelineMax();
timeline.to('#envelope, #allEnv', .6, {y:290}, '+=.7');
</script>
</body>
</html>
But I think now you jsut have to adjust the script for the animation a little bit.

You can add browser prefix with your CSS. Here is new CSS code.
<style type="text/css">
body {
margin: 0;
background-color: white;
}
#container {
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
img {
height: 50%;
padding: 80px 0;
overflow: visible; /* For Firefox */
}
.env {
position: absolute;
}
.partecipazione{
height: 130%;
padding-top: 20%;
position: absolute;
padding-right: 22px;
}
.allEnvelope{
padding-top: 20%;
position: absolute;
}
</style>

Elements can overlap for a variety of reasons, by using the property z-index we can make sure that the Letter stays in the vertical order we want it. It is the same as Layers in Photoshop if you have used that.
Using the above example by Puschi, we can add z-index to the following classes:
.partecipazione {
z-index: 1
}
.env {
z-index: 2;
}
The .env class will stay in the default layer at the bottom, placing the letter above it, then the open envelope above that again. This makes sure that the elements don't overlap.
Here is a Codesandbox using CSS & Javascript
https://codesandbox.io/s/sparkling-resonance-49b2w?file=/index.html:591-627
By using JavaScript we can fire off the animations after the browser is done loading all the images, making sure that it plays well.
Or we could add interactivity so that when the user clicks or hovers the Envelope it opens.

Focus DOM above overlay

Am trying to make a whole screen overlay, and just pop a single DOM above it, it is kind of web game tutorial which tell the user which button he should press.
Like the above image illustrate, am trying to hide everything under the overlay and only pop the red icon above it
What I've tried so far
I've added a div directly under the body tag (this will be the overlay) that will have a z-index greater that other elements in the page, and only the focused DOM will have a greater z-index than the overlay
Issue
This didn't work because am having a translate for the opts-container element, and remove this style is not an option for me because am using it all over the elements.
code (to illustrate)
$("#veil").hide();
$('.icons-group-s div').on('mouseenter',function(){
console.log("hovered");
$("#veil").show();
})
$("#veil").on('mouseleave', function(){
console.log("hide");
$("#veil").hide();
});
#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
#veil {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
#policy {
z-index: 102;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="veil">
</div>
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>
possible solutions in my mind
1- make clipped overlay
2- clone the focused object to be inside the veil div
3- focus the parent of the object and reduce opacity of child elements (workaround)
how can I pop an element over an overlay even if it has a transform style ?
maybe a hack around ?

Consider a big box-shadow on the element instead of an overlay:
#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
/* Make sure the stacking context is also on the top */
#opts-container:hover {
z-index:9999;
}
/* make the element on the top and add a big shadow
100vw + 100vh will make sure that you will cover all the screen
Or use any other big value
*/
#opts-container:hover #policy {
position:relative;
z-index:9999;
box-shadow:0 0 0 calc(100vw + 100vh) rgba(0,0,0,0.5);
}
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>

Content becomes disabled when I apply an overlay color on the background image div

I have a div with a background image, and at the center of the div, I have text and a button.
The problem is, when I apply an overlay color over the background image the text and button become unclickable, like they're disabled.
I need to be able to click the Read More button and make the content visible and selectable.
jsFiddle https://jsfiddle.net/yzce0vLt/8/
HTML
<div class="col-md-12 dynamic-height">
<div class="item dynamic-height">
<div class="item-container dynamic-height content-center overlay-x dark" style="background: url('http://placehold.it/1920x1280') center center; background-size: cover;">
Read More
</div>
</div>
</div>
CSS
.col-md-12, .item, .item-container {
height: 600px;
}
/* Align Content */
.content-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Background Overlay */
.overlay-x {
position: relative;
}
.overlay-x:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
}
.overlay-x:before{
display: block;
}
.dark:before {
background-color: rgba(0,0,0,0.5);
}
.light:before {
background-color: rgba(255,255,255,0.5);
}
JS
$(document).ready(function() {
// Dynamic Height
$('.dynamic-height').css({'height':($(window).height())+'px'});
$(window).resize(function(){
$('.dynamic-height').css({'height':($(window).height())+'px'});
});
});

Add this to your css
.btn {
z-index: 100;
}
This will move the button over your overlay.

How to center an image created in Javascript?

I have this very simple code, the problem is it doesn't give the same output using Firefox and IE: in Firefox, the images are superposed but right-aligned, and in IE they are superposed and left aligned.
What I want is that the images will be centered and superposed.
I have to create images using Javascript to use a special library in creating the images.
Thank you for your help.
HTML
<body>
<div id="Container">
<script type="text/javascript">
document.write('<img id="image1" src="image1.jpg">')
document.write('<img id="image1" src="image2.jpg">')
</script>
</div>
</body>
CSS
body {
text-align: center;
background-color: #e8e6e7;
margin-left: auto;
margin-right: auto;
}
#Container {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image1 {
position : absolute;
margin-left: auto;
margin-right: auto;
}
#image2 {
position : absolute;
margin-left: auto;
margin-right: auto;
}

Since you are making #image1 and #image2 be absolutely positionined, they will not adjust the width/height of the #Container. This means you can't center it, because it doesn't have the proportions to center.
The code below makes only one image be absolutely positioned. This lets your other image act as expected. You can do whatever you want with the "overlay" image.
I also included z-index, which can let you change the order of the images. This isn't necessary for this example, but if you add more images, it may be useful.
HTML
<div id="Container">
<div class="image-wrap">
<img id="image1" src="http://dummyimage.com/200x200/fa00fa/fff.png"/>
<img id="image2" src="http://dummyimage.com/200x200/00ff33/000000.png"/>
</div>
</div>
CSS
#Container .image-wrap {
position: relative;
display: inline-block;
}
#image1 {
position : relative;
z-index: 10;
}
#image2 {
position : absolute; /* Different than #image1 */
z-index: 20; /* On top of #image2 */
top: 0;
left: 0;
/* Assuming width/height of both images are the same */
}
JS Fiddle
http://jsfiddle.net/n496j/1/

First change second image id to image2.
2 tricks for centering your images is:
add one of these classes to your images:
.center {
display: block; /*can remove this line*/
margin: 0 auto;
left: 0;
right: 0;
}
.center {
left: 50%;
margin-left: -[your image width / 2]
}

Use the css
img{ display:block; margin: auto; }

well, it will help if the images would sit in some container with text-align:center;.
something like this:
// body can be be replaced with any element which contains the images
body{ text-align:center; }
body > img{ display:inline-block; max-width:49%; }
Demo page:
http://jsbin.com/hehot/1/edit