We Keep Coding

Html Transistion lag only for the first time after reload

This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>

Div does not center in another div

I have an extremely simple issue. I have nested divs. where I am trying to center a div(.gridcontainer) in div(.main). If you run the below snippet, you can see that the div does center full in the main div. It leaves the spaces uneven on the either side horizontally and vertically.
I have tried a lot of fixes and even tried dynamically centering them on load through JS. But, somehow it does not achieve the results.
I just want it to be the exact size of the parent but have little spaces left on each sides evenly.
body {
margin: 0;
padding: 0;
}
.tops {
position: fixed;
background: rgba(0,0,0,0.70);
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 100vh;
min-width: 100vw;
height: auto;
width: auto;
overflow: hidden;
}
.top_menu {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 70px;
background-color: green;
overflow: hidden;
}
.welcome {
position: relative;
top: 0;
bottom: 0;
left: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.welcome_message {
font-family: 'Palanquin Dark', sans-serif;
font-size: calc(2.5vw + 3vh);
position: relative;
top: 30%;
left: 50%;
margin: 0;
float: left;
color: white;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -30%);
}
.app_name {
font-size: calc(1.5vw + 2vh);;
}
.gradientText {
background: -webkit-linear-gradient(#FFA07A, #8B0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.downloadButton{
position: absolute;
top: 75%;
left:50%;
background-color: white;
width: 225px;
height: 50px;
border-radius: 25px;
border-width: 0px;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -75%);
transition: all .2s ease-in-out;
}
.downloadButton:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: translate(-50%, -75%) scale(1.1);
}
.downloadText {
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 1.4em;
font-weight: bold;
color: black;
}
.iphone {
position: relative;
top: 0;
bottom: 0;
right: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.iXFrame {
position: absolute;
height: 700px;
width: 350px;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
}
.main {
position: absolute;
display: block;
margin-top: 75px;
height: auto;
overflow: hidden;
width: auto;
min-width: 100vw;
min-height: 50vh;
}
.gridcont{
position : absolute;
/*height: auto;*/
width: auto;
/*min-height: 95vh;*/
min-width: 95vw;
margin: 0;
border-radius: 20px;
display: inline-block;
background-color: whitesmoke;
/*overflow: hidden;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Montserrat|Palanquin+Dark|Paytone+One|Rubik|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<section class="mains ui">
<div
class="tops"></div>
<!--.top_menu-->
<div class="ui grid marg-reset">
<div class="doubling two column row">
<div class="ui column welcome">
<h1 class="welcome_message"><span class="app_name">Example</span><br>we will<br>rock <br>you<br><span class="gradientText">Text</span></h1>
<a class="downloadButton" type="button" href="/app">
<div class="downloadText">Download Spotmi</div>
</a>
</div>
</div>
</div>
<div class="main">
<div class="ui grid gridcont">
<div class="doubling two column row">
<div class="ui column show_text">
<h1 class="emotion_message">Hello world</h1>
</div>
<div class="ui column emotion_show"></div>
</div>
</div>
</div>
</section>
This also poses an issue in the responsive nature of the site. Below are two screenshots. one of a HiDPI Laptop screen and other is a iphone X simulator. This even poses an issue there.
iPhoneX size screen.
Laptop Screen.
How exactly can I solve this?

Have you tried giving the giving the internal div that you want to center CSS properties:
position: relative;
top: 50%;
left 50%;
transform: translate(-50%, -50%);
this usually solves my balancing issues xD

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>

how do I maintain Aspect Ratio 16/9 on a div and not have it bleed outside the container?

What I need is
x[]x
AND
x
[]
x
dynamically maintaining aspect ratio with WIDTH and HEIGHT. Think object-fit but for div.
Example of the problem: https://codepen.io/anon/pen/erRvGx?editors=1111
What I have tried without much success
.AspectRatio {
height: 0;
overflow: hidden;
padding-top: 56.25%;
background: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.video {
background: yellow;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

like this ?
.box1 { width: 200px; height: 100px; position: relative; background-color: red; margin-bottom: 20px; }
.box2 { width: 100px; height: 150px; position: relative; background-color: red; margin-bottom: 20px; }
.box3 { width: 300px; height: 300px; position: relative; background-color: red; margin-bottom: 20px; }
.video { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: yellow; }
<div class="box1">
<div class="video"></div>
</div>
<div class="box2">
<div class="video"></div>
</div>
<div class="box3">
<div class="video"></div>
</div>
top: 50%; left: 50%; transform: translate(-50%, -50%); this code solves the problem

Centering div vertically and horizontally

Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.

Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}

You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}

You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.

Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>

.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.