We Keep Coding

CSS transform scale fit to window size

I have tried lot, but didn't get any proper solution.
Here is my code:
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
$(".img").toggleClass("active", 1000);
});
});
body {
background: red;
width: 100%;
margin: 0;
}
.col {
width: 30%;
}
.img {
display: block;
transition: all 0.5s ease;
position: relative;
transition: all 0.5s ease;
-webkit-transition: 1s
}
.img img {
width: 100%;
}
.img.active {
position: absolute;
left: 0;
top: 0;
transform: scale(2.5);
-webkit-transform-origin: top left;
transition: all 0.5s ease;
}
.img.active img {
transition: all 0.5s ease;
}
.zoom-close {
position: absolute;
right: 10px;
bottom: 10px;
background: #eee;
border: 0;
width: 32px;
height: 32px;
padding: 8px 8px 15px;
cursor: pointer;
outline: 0;
border-radius: 0;
transition: all 0.5s ease;
}
.zoom-close.transform {
border-radius: 100%;
transition: all 0.5s ease;
z-index: 10;
background: #fff;
position: absolute;
right: 5px;
top: 18px;
}
.zoom-close.transform .zoom-inner {
opacity: 0;
transition: all 0.5s ease;
}
.zoom-close.transform .zoom {
border: 0;
}
.zoom-close.transform .zoom:before {
width: 2px;
height: 17px;
top: 1px;
left: 7px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom-close.transform .zoom:after {
height: 2px;
width: 17px;
top: 9px;
left: -1px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom {
width: 10px;
height: 10px;
border-radius: 8px;
position: relative;
border: 2px solid #000;
}
.zoom:before {
content: '';
width: 2px;
height: 8px;
background: #000;
display: block;
top: 1px;
left: 4px;
position: absolute;
transition: all 0.5s ease;
}
.zoom-inner {
width: 8px;
height: 3px;
display: block;
background: #000;
position: absolute;
top: 10px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom:after {
content: '';
height: 2px;
width: 8px;
background: #000;
display: block;
top: 4px;
left: 1px;
position: absolute;
transition: all 0.5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250">
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
</div>
Could anyone help me in the below case:
<div class="img"> should be fit in to the window size (100% width), when we click on the <button class="zoom-close"> with the same transform effect.
(Please note: CSS transform property is not compulsory but I need the similar effect as it is..)

You need to get the screen sizes like width and height on zoom event
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250" >
</div>
<br><br><br>
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
JS
var flag=0;
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
// $(".img").toggleClass("active", 1000);
var height= window.screen.height;
var width = window.screen.width;
if(flag == 0){
$("img").css("width", "15vw");
$("img").css("height", "15vw");
flag=1;
}
else{
$("img").css("width", "100vw");
$("img").css("height", "100vw");
flag=0;
}
});
});

hide nav based on scroll removing adding classes

I found a nav layout I would like to use but I seem to have run into 2 problems.
problem #1 the transitions in the css do not seem to be transitioning smooth when scrolling up or down.
problem #2 if the scroll position is not zero I do not want mainnav to shrink and i want the top nav to show or hide when i scroll up or down.. thats hard to word so what I am trying to accomplish exactly is the following
https://www.battlefield.com/games/battlefield-4/classes
now when you scroll down it hides the top nav but if you scroll just a little each way it will show or hide thats what I am trying to do.. but I dont want the 2nd nav to scale down unless the top is 0
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition-duration: .4s;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: transform .3s, width .3s;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: transform .3s, width .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

Demo
http://jsfiddle.net/gos4hwp9/52/
Explanation
Added transition: all ease-in-out .4s for smooth transitions of all properties
If scrollTop > 0 added margin: 0px and border-radius: 0px to bottom (primary) nav, Else made margin and border-radius same as initial state
If scrollDir == "down" added translateY(-50px) to header, Else removed translateY
Moving the whole header will move both navs which is nice as compared to moving them individually

I've slightly changed your transitions and added transitions to the classes which you toggle.
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
transition: .3s all;
}
.netnav.show-nav {
top: 0;
transition: .3s all;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition: .3s all;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: .3s all;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: .3s all;
}

I followed the link you provided and edit the JavaScript and CSS.
Fixed the transitions in the CSS that does not seem smooth in transitioning when scrolling up or down using JavaScript.
You may visit this pen that I edited based on your snippet, and play around with it.
$(window).scroll(function(){
if ($(this).scrollTop() > 15) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('RemoveTop');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('RemoveTop');
$('.mainnav').removeClass('scrolled');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap{
display:block;
position: fixed;
width: 100%;
}
.netnav{
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
transition: all .3s;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0,-40px,0);
transition-duration: .4s;
}
.mainnav{
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: all .3s,width .3s;
width: calc(100% - 60px);
}
.mainnav.RemoveTop {
top: 0px;
}
.mainnav.scrolled {
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

Keyframes CSS Animation

Hello I'm trying to simulate flip countdown timer But when I wrote the code I discovered that there was a difference between:
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
and:
#keyframes zindex {
0% {
z-index: 2;
}
100% {
z-index: 4;
}
}
That when I remove 5% the problem will occurred so I'd like to know why this problem ocurres.
Here my code:
body {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
}
.wrap {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -25px;
}
ul#initial {
list-style-type: none;
width: 100%;
height: 100%;
padding: 0px;
position: relative;
}
ul#initial li {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
.first {
z-index: 3;
}
.second {
-webkit-animation: zindex 1s 1s linear both;
}
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.flipthis {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: #bbb;
transform-origin: 50% 100%;
color: #fff;
animation: flipthis 1s linear;
}
.flipthis-down {
height: 50px;
width: 50px;
background: #0034ff;
color: #fff;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
}
.digit {
height: 200%;
font-size: 80px;
position: absolute;
width: 50px;
text-align: center;
text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}
.flipthis-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
.flipthis2 {
height: 50px;
width: 50px;
background: #00ff82;
color: #fff;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.flipthis2-down {
height: 50px;
width: 50px;
background: #00f760;
color: #fff;
-webkit-transform-origin: 50% 0%;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
animation: flipthis-down 1s 1s linear;
}
.flipthis2-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis-down {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
a.derp {
-webkit-perspective: 2000px;
display: block;
width: 50px;
height: 100px;
}
<div class="wrap">
<ul id="initial">
<li class="first">
<a class="derp">
<div class="flipthis">
<div class="digit">1</div>
</div>
<div class="flipthis-down">
<div class="digit">1</div>
</div>
</a>
</li>
<li class="second">
<a class="derp">
<div class="flipthis2">
<div class="digit">2</div>
</div>
<div class="flipthis2-down">
<div class="digit">2</div>
</div>
</a>
</li>
</ul>
</div>

The first example reaches the final value of '4' after only 5% of the animation is done, the second example increases the z-index linearly over the specified animation duration.
Adding multiple '%' values tells your browser at what point in time what value should be reached, so your first animation is basically already finished after 5% of the time has passed.

Fail in Firefox

Hi i want to put this code in my website, but when i try to click on the menu button in Firefox it pops up then the background changes from the normal color to white (or is gone).
http://jsfiddle.net/Xroad/3pn2pkt6/19/
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu');
$('.circle').toggleClass('Opacity');
$('#overlay-menu').delay(5000).toggleClass('Opacity');
$('.circle').toggleClass('open');
});
html, body {
height: 100%;
}
body {
background: #fffdee;
}
.circle {
position: fixed;
top: -50%;
left: -50%;
height: 50%;
width: 50%;
border-radius: 50%;
background: #98694d;
opacity: 0;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.open {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#overlay-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
color: black;
opacity: 0;
z-index: 4;
}
h4.toggle-menu {
position: fixed;
top: 20px;
right: 70px;
color: black;
cursor: pointer;
z-index: 5;
}
.Opacity {
opacity: 1 !important;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>
<nav id="home-menu" class="menu">
<h4 class="toggle-menu">Menu</h4>
</nav>
<div id="overlay-menu"><p>MY CONTENT</p></div>

This works: (small change in the .open-class (added the opacity to it)), and removal of one line in the JS. Tested in Firefox and Chrome
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu');
//$('.circle').toggleClass('Opacity');
$('#overlay-menu').delay(5000).toggleClass('Opacity');
$('.circle').toggleClass('open');
});
html, body {
height: 100%;
}
body {
background: #fffdee;
}
.circle {
position: fixed;
top: -50%;
left: -50%;
height: 50%;
width: 50%;
border-radius: 50%;
background: #98694d;
opacity: 0;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.open {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
opacity: 1;
}
#overlay-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
color: black;
opacity: 0;
z-index: 4;
}
h4.toggle-menu {
position: fixed;
top: 20px;
right: 70px;
color: black;
cursor: pointer;
z-index: 5;
}
.Opacity {
opacity: 1 !important;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>
<nav id="home-menu" class="menu">
<h4 class="toggle-menu">Menu</h4>
</nav>
<div id="overlay-menu"><p>MY CONTENT</p></div>

Sliding a div left to right only partially working with jquery

here I am trying to move a div left to right with jquery. The js I have written is partially working. I can move the div as intended (left to right) in some pages in Chrome, Opera and Yandex browser, but it does not work at all in firefox, so I believe the implementation is not up to the par and there must be some more concrete and efficient ways of doing it. With the following code snippet, a div (a fb like pop-up) shows up followed by page load a few seconds later and the effect is sliding the div from left to right. There is a close button. Upon clicking the close button, the div shrinks back (now right to left effect). I have given full code with style for the ease of full understanding. Any insights you offer to me will be of great help. Thank you. (the js code is given at the end)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class = "modal-prompt modal-prompt-shown" id = "fb_like" style = "display: none; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<style>
.modal-overlay {
/* overflow-y: scroll; */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.5);
/* dim the background */
cursor: pointer;
}
.modal-close-half-page {
background: none;
color: white;
font-weight: bold;
position: fixed;
right: 50px;
font-size: 14px;
}
.modal-prompt-half-page {
display: block;
height: 100%;
position: fixed;
width: 50%;
background-color: #1fc2ff;
top: 0;
left: 0;
z-index: 1000000;
}
.modal-prompt-half-page-arrow {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #1fc2ff;
position: absolute;
top: 50%;
right: -30px;
margin-top: -30px;
}
.modal-prompt-half-page-header {
font-weight: bold;
font-size: 57px;
padding: 0 40px;
text-align: right;
line-height: 58px;
color: white;
text-transform: inherit;
top: 50%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-bottom: 0;
}
.social-prompt-button-facebook {
width: 101px;
height: 101px;
-moz-border-radius: 101px;
-webkit-border-radius: 101px;
border-radius: 101px;
background-color: white;
position: absolute;
left: 110%;
top: 50%;
margin-top: -51px;
}
.social-prompt-button-facebook .fb-like {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -24px;
}
.modal-prompt-half-page {
left: calc(-40% - 30px);
transition: left 0.4s ease;
width: 40%;
min-width: 450px;
}
.modal-overlay {
opacity: 0;
transition: opacity 0.4s ease;
top: 0;
}
.social-prompt-button-facebook {
overflow: hidden;
position: fixed;
top: 0;
bottom: 0;
left: calc(40% + 60px);
margin: auto 0;
width: 101px;
height: 101px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transition: height 0.4s ease, width 0.4s ease, transform 0.4s ease;
}
.modal-copy-container{
font-size: 5vw;
line-height: 5vw;
margin-top: 0;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.modal-prompt-shown .modal-overlay {
opacity: 1;
}
.modal-prompt-shown .social-prompt-button-facebook {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#media (max-width: 1125px) {
.modal-prompt-half-page {
width: 450px;
left: -480px;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.social-prompt-button-facebook {
left: 510px;
}
.modal-copy-container {
font-size: 800 normal 3.125rem / 3.125rem WorkSans, sans-serif;
/* line-height: 56px; */
}
}
</style>
<div class = "modal-overlay"></div>
<div class = "modal-prompt-half-page">
<div class = "modal-close modal-close-half-page" onclick = "closeFB();">Close</div>
<h6 class = "modal-prompt-half-page-header modal-copy-container">If you liked reading this story, then Like our page!</h6>
<div class = "modal-prompt-half-page-arrow"></div>
<div class = "modal-prompt-half-page-cont clearfix">
<div class = "social-prompt-button-facebook">
<div class = "fb-like fb_iframe_widget" data-href = "#" data-layout = "button" data-action = "like" data-show-faces = "false" data-callback-id = "genmodalfb" data-keen-tracking-name = "newUserModalV1" data-keen-social-channel = "facebook" data-keen-custom = "Halfpage 1.32" fb-xfbml-state = "rendered" fb-iframe-plugin-query = "action=like&app_id=141861192518680&container_width=0&href=https%3A%2F%2Fwww.facebook.com%2FMicMedia&layout=button&locale=en_US&sdk=joey&show_faces=false">
<span style = "vertical-align: bottom; width: 49px; height: 20px;">
<iframe name = "f1be53ad29d6424" width = "1000px" height = "1000px" frameborder = "0" allowtransparency = "true" allowfullscreen = "true" scrolling = "no" title = "fb:like Facebook Social Plugin" src = "#" class = "" style = "border: none; visibility: visible; width: 49px; height: 20px;"></iframe>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
// $('.modal-prompt').css('display', 'block').fadeIn("slow", function () {});
$('.modal-prompt').animate({width: 'show'});
}, 5000);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-close").click(function () {
$(".modal-prompt").animate({
width: "hide"
});
});
});
</script>

Toggling 'hide' defaults to right-to-left

It doesn't work at all. I'm not sure why you're using so much code, but all you have to do for sliding to the left is use the JQuery animate function, like so:
$('#elementId').animate({
left: '50%',
}, 500 );
You can do this in sequence as to make it left to right and vice versa. No CSS is needed for animations or anything, just the basic stylings.