css position sticky wont stay at top - javascript

I'm having this strange behaviour, when i scroll down yellow box goes on top of blue box, i have set position sticky to both yellow box and blue box so when i scroll down those two should stay there and should not go on top of another. When i scroll down blue and yellow box should stay but only orange box should be scrollable, any help ?
code to try:
https://codesandbox.io/s/example-react-hooks-usestate-forked-69suro?file=/src/index.js
code:
import React from "react";
import ReactDOM from "react-dom";
import "./app.css";
function App() {
return (
<div className="box-container">
<div className="box"></div>
<div className="both">
<div className="left__side"></div>
<div className="right__side">
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<div className="oikea__box"></div>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.box {
height: 100px;
border: 1px solid black;
width: 100%;
background-color: blue;
position: sticky;
top: 0;
}
.both {
display: flex;
}
.left__side {
height: 200px;
border: 1px solid black;
width: 100px;
background-color: yellow;
position: sticky;
top: 0;
}
.right__side {
border: 1px solid black;
width: 100%;
background-color: white;
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.oikea__box {
height: 100px;
width: 100px;
border: 1px solid red;
background-color: orange;
}


for yellow box you cannot put top:0 bcs it will stay 0px from top, if u want to put it under blue box, u can put top: (blue height in px) which is 100px.
.left__side: {
top: 100px;
}


Do:
top: 100px;
For .left__side in your css file.


Your "both" class is overlap with the blue box. You don't need to put "sticky" to the yellow box because flex will put yellow box position after blue box.
Try this:
.box {
height: 100px;
border: 1px solid black;
width: 100%;
background-color: blue;
}
.both {
display: flex;
flex-direction: row;
overflow: scroll;
}
.left__side {
height: 200px;
border: 1px solid black;
width: 100px;
background-color: yellow;
}
.right__side {
border: 1px solid black;
width: 100%;
background-color: white;
display: flex;
flex-wrap: wrap;
gap: 2px;
height: 200px;
overflow-y: scroll;
}
.oikea__box {
height: 100px;
width: 100px;
border: 1px solid red;
background-color: orange;
}

Related

How can I create a simple 3x3 grid inside an article that keeps aspect ratio?

I want to make a 3x3 grid of squares in CSS/HTML that doesn't pass the height of the page and is responsive.
I've tried changing the width and height of the article to make it smaller percentage wise but it makes it too small when on mobile and too big when on desktop.
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
box-sizing: border-box;
background: tomato;
font-size: 9vw;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article1 {
border-style: solid;
border-width: 5px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.h1 {
font-size: 3vw;
text-align: center;
}
<article class="article1">
<div>
<h1 class="h1">Text 1</h1>
</div>
<div class="square-container">
<div class="square">
<div class="content">0</div>
</div>
<div class="square">
<div class="content">1</div>
</div>
<div class="square">
<div class="content">2</div>
</div>
<div class="square">
<div class="content">3</div>
</div>
<div class="square">
<div class="content">4</div>
</div>
<div class="square">
<div class="content">5</div>
</div>
<div class="square">
<div class="content">6</div>
</div>
<div class="square">
<div class="content">7</div>
</div>
<div class="square">
<div class="content">8</div>
</div>
</div>
<div>
<h1 class="h1">Text 2</h1>
</div>
</article>
I want it to resize so that it's width and height are responsive and the height never exceeds the display (never have to scroll).

Making a container appear with a button after making it disappear

I click on a div container (it disappears) and another one appears with a button. Then, I want to go back to the previous div container using a button made-up of a div container (keep in mind that I only want to perform this action in the currentTarget).
I only want to do this to the current container or the one clicked on!
$(document).ready(() => {
$('.shown').on('click', event => {
$(event.currentTarget).next('.tab').show();
$(event.currentTarget).hide();
});
$('.button').on('click', event => {
/*i want to hide the container with class tab and show the container with class shown*/
});
});
.shown {
width: 400px;
height: 100px;
background-color: green;
}
.con {
width: auto;
height: auto;
border: 1px solid black;
}
.main {
width: auto;
height: 170px;
background-color: red;
margin-top: 10px;
padding: 5px 10px;
}
.tab {
width: 400px;
height: 100px;
background-color: blue;
display: none;
}
p {
display: inline-block;
}
.button {
width: 50px;
background-color: white;
border: 5px dotted white;
padding: 3px 5px;
margin: 0px 10px;
}
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>One</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Two</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Three</p>
<div class="button">Show</div>
</div>
</div>
</div>

Something like this?
$(document).ready(()=>{
$('.shown').on('click',event=>{
$(event.currentTarget).next('.tab').show();
$(event.currentTarget).hide();
});
$('.button').on('click',event=>{
/*i want to hide the container with class tab and show the container with class shown*/
$('.tab').hide();
$('.shown').show();
});
});
.shown{
width: 400px;
height: 100px;
background-color: green;
}
.con{
width: auto;
height: auto;
border: 1px solid black;
}
.main{
width: auto;
height: 170px;
background-color: red;
margin-top: 10px;
padding: 5px 10px;
}
.tab{
width: 400px;
height: 100px;
background-color: blue;
display: none;
}
p{
display: inline-block;
}
.button{
width: 50px;
background-color: white;
border: 5px dotted white;
padding: 3px 5px;
margin: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab"><p>One</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab"><p>Two</p>
<div class="button">Show</div>
</div>
</div>
</div>
<div class="main">
<div class="con">
<div class="shown">
</div>
<div class="tab">
<p>Three</p>
<div class="button">Show</div>
</div>
</div>
</div>

Showing elements below overflow:hidden

Here's deal, I have divs that placed below overflow: hidden and need somehow manage to show them.
.body {
display:flex;
width: 100%;
height: 100%;
}
.main-container {
background-color: #eee;
width: 560px;
height: 500px;
}
.sidebar-container {
width: 270px;
height: 100px;
}
.sidebar-container_hidden-scroll {
width: 100%;
height: 100%;
}
.sidebar-element {
width: 250px;
height: 44px;
position: relative;
box-sizing: border-box;
margin: 10px 5px;
padding: 5px;
border: 1px solid red
}
.sidebar-element__linked-div {
position: absolute;
height: 100%;
width: 500px;
border: 1px dotted red;
top: 0px;
left: calc(250px + 30px);
}
<div class="body">
<div class="sidebar-container">
<div class="sidebar-container_hidden-scroll">
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
</div>
</div>
<div class="main-container">
</div>
</div>
After Adding parent:: overflow: hidden, children:: overflow: scroll
.body {
display:flex;
width: 100%;
height: 100%;
}
.main-container {
background-color: #eee;
width: 560px;
height: 500px;
}
.sidebar-container {
width: 270px;
height: 100px;
overflow-y: hidden;
overflow-x: hidden;
}
.sidebar-container_hidden-scroll {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 20px;
}
.sidebar-element {
width: 250px;
height: 44px;
position: relative;
box-sizing: border-box;
margin: 10px 5px;
padding: 5px;
border: 1px solid red
}
.sidebar-element__linked-div {
position: absolute;
height: 100%;
width: 500px;
border: 1px dotted red;
top: 0px;
left: calc(250px + 30px);
}
<div class="body">
<div class="sidebar-container">
<div class="sidebar-container_hidden-scroll">
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
</div>
</div>
<div class="main-container">
</div>
</div>
The reason that I added those lines it's to scroll content and hide scroll bar. My goal here is to make "scrollable" content, hide scrollbar and still be able to see dotted rectangles. How can I do this? (z-index didn't help)

You will need to position one of them as absolute in my opinion.
If you already using flex with the parent, then you can use flex-direction:reverse to make the .main-container stick to the right.
.body {
display:flex;
flex-direction: row-reverse;
width: 100%;
height: 100%;
}
.main-container {
background-color: #eee;
width: 560px;
height: 500px;
}
.sidebar-container {
width: 100%;
height: 100px;
overflow-y: hidden;
overflow-x: hidden;
position:absolute;
left: 0;
}
.sidebar-container_hidden-scroll {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 20px;
}
.sidebar-element {
width: 250px;
height: 44px;
position: relative;
box-sizing: border-box;
margin: 10px 5px;
padding: 5px;
border: 1px solid red
}
.sidebar-element__linked-div {
position: absolute;
height: 100%;
width: 500px;
border: 1px dotted red;
top: 0px;
left: calc(250px + 30px);
}
<div class="body">
<div class="sidebar-container">
<div class="sidebar-container_hidden-scroll">
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
</div>
</div>
<div class="main-container">
</div>
</div>

How to hide a flexbox element with smoth effect

I need to center divs and hide them on each click, the problem is when I use hide() and flexbox it makes a rude effect after dissapear, but if you just simply float elements to left it makes fine, how can I achieve this?
I need to apply exactly the same disappearing effect that is in the
first example to the second one (with flexbox).
Here is the example:
$(".example1, .example2").click(function(){
$(this).hide("slow")
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

Use flex-start for justify content instead of center. Now it has the same effect as with float. You can also use fadeOut instead of hide to achieve effect you want.
$(".example1, .example2").click(function(){
$(this).fadeOut("slow")
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
display: flex;
justify-content: flex-start;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

First, you can notice that this issue doesn't happen when you try to remove an item from the last row (excluding the first one in the last row). The issue appears when the first element of the row n suddenly go to the row n-1 because of 2 things :
You are trying to remove this first element so its width is going to 0 then for sure he will be able to fit into the previous row.
You are trying to remove any element so its width is going to 0 and you are creating enough space for the first element of next row to jump on it.
And this is simply due to center alignment as there is no difference if you do it with float, inline-block or flex. What is happening is that during the transition all the elements are moving to the center and when the new element comes (the first one of the next row) all the elements are re-placed again to keep the center alignement and then you have the rude effect !
With left alignment all the elements will move to the left during the transition and they won't move again at the end of transition (when the new element comes) so we don't have any rude effect.
Here is a snippet that shows inline-block and flex working fine with left alignment :
$(".example2, .example1").click(function() {
$(this).hide("slow");
});
.main {
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1 {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
display:inline-block;
margin: 8px;
transition:margin 0.6s;
}
.example2 {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
float:left;
display:inline-block;
margin: 8px;
transition:margin 0.6s;
}
.first {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
.second {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
inline-block
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div class="example1">14</div>
<div class="example1">15</div>
<div class="example1">16</div>
<div class="example1">17</div>
<div class="example1">18</div>
<div class="example1">19</div>
</div>
flex solution
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
<div class="example2">15</div>
<div class="example2">16</div>
<div class="example2">17</div>
<div class="example2">18</div>
<div class="example2">19</div>
</div>
</div>
Unfortunately, I don't have a solution to this if you want to only use the hide() of jQuery. Maybe some ideas of solution is to make a more complex code that will avoid the centered elements to move in two directions (you may for example change margin property at the same time to cancel the movement) or you can keep the left alignment and find some trick to simulate the centering (dynamically add some margin when window resize for example).
Hope this will help you to investigate more (even if I didn't really give a solution).

Well as pointed out already it would require some kind of "physics engine" moving the other blocks up smoothly etc.
But I made an attempt anyway which looks a bit more smooth at least.
$(".example1, .example2").click(function(){
var time = 600;
var $parent = $(this).parent();
$parent.animate({'width': '90%'}, time/2, function() {
$parent.animate({'width': '100%'}, time/2);
});
$(this).hide(time);
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

You can achieve the above without flex by making the children div's as inline-block with the parent being set with text-align:center, please take a look at this.
$(".example1, .example2").click(function(){
$(this).fadeOut("slow");
});
.main{
border: 2px dotted black;
height: 100%;
width: 100%;
}
.example1{
display: inline-block;
background-color: steelblue;
color: #FFF;
cursor: pointer;
margin: 10px;
padding: 15px 20px;
}
.first{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="main">
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
</div>
</div>

My idea is: fade the whole parent container during reordering.
The effect will not so rude.
$(".second div").click(function() {
$(this).hide("slow");
var p = $(this).parent();
p.addClass("hidden");
setTimeout(function() {
p.removeClass("hidden")
}, 300);
});
p {
clear: both;
}
.second {
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 2px solid black;
transition: 200ms;
}
.second div {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
}
.hidden {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="second">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>

Instead of justify-content: center I changed it to justify-content: space-evenly (in your case, looks somewhat similar to center only) also updated the function from simply hiding to .animate and then .hide. Will it do?
$(".example1, .example2").click(function(){
var _this = this;
$(_this).animate({width: "0"}, 500, function(){ $(_this).hide(500) })
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
overflow: hidden;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-evenly;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

Loading screen coverd by the footer

I made a loading screen on my personal website. I found that the footer will cover my loading screen when I go into the website.
I want my loading screen can cover the entire screen when I go into the website. How can I do that?
This is my code, css and js.
<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by User</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
</div>
</footer>
#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}
img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}
$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})

add z-index: 999; to div.load_screen

Add #cfooter {z-index: 1}
and add top and left 0.
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left:0;
}
Here is the working example. I have added red background just to test it:
https://jsfiddle.net/o7wd4mfp/4/

Categories