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/
Related
I have implemented the peeking effect into my website.
Here it is http://jsfiddle.net/7yrWL/1/
Now this is working and peeks when ever I hover over the image, Now what I simply want is this effect work only if we scroll to this section. Means the container peeks out over scroll only but a click.
Any idea anyone?
Thank you
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
$(window).scroll(function() {
scrollEffect();
});
function scrollEffect() {
$('.main').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$(this).addClass('effect');
}
});
}
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
Add an .main.effect .peek class for main, which has the same effect as .main:hover .peek, and then add an effect class to each main div that enters the visible area in the scroll event.
I want to implement the effect below:
I try to set the footer part (yellow part in the picture):
<style>
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>
</body>
but it will cover the inner box (green part in the picture), so how to make the yellow part under the green part. The height of the green part is not fixed.
Add position: relative + z-index: 1 to list-container
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
z-index: 1;
position: relative;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>
I am trying to use z-index to overlap in this scenario, but I cannot achieve the results I am looking for.
Here is my code: https://jsfiddle.net/mx0zdpvm/.
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -100px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
This is the result I am trying to achieve:
A CSS solution is preferred.
First change:
#redStripes{
position: relative;
top:60px;
right:280px;
z-index: 2;
}
If you want to overlap elements, divs, you need to specify position absolute or relative to something, otherwise the z-index will not work.
https://jsfiddle.net/scorpio777/mx0zdpvm/3/
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: relative;
top:50px;
right:280px;
z-index: 2;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -150px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
You cannot overlap elements if you don't set the position to absolute or relative.
This will sort the overlapping out. I set the position to relative and a z-index of 1 to the blue triangle, and 2 to the red strips, then adjusted the positioning with top and right. I will leave you to sort out the rest :)
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: relative;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
right: 0px;
top:-100px;
z-index:1;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
z-index:2;
left: -100px;
}
EDIT: Alignment fixed by adding floats. Height still doesn't fill 100% though. Updated look: https://gyazo.com/4030d76c62c106fae5fbbb07f062efdd
I have a footer container in which I want to have 3 columns (I have made them green, white and red for now so it's easier for you to see). Currently they're stacking vertically but I want them to be beside eachother and have a height of 100% to fill the height of whatever the container's height is. Here is an image of what it looks liek at the moment, please ignore the large black boxes, these are just so I can see where stuff is on the page but will evenutally be transparent etc. https://gyazo.com/12d0642e5fd9518a663606668ec06311
They each have a width of 33% because I want to follow responsive practices and I've currently tried removing all padding and margins etc from every div.
Any help would be greatly appreciated, thank you.
HTML:
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
CSS:
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
max-height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
height: 100%;
float: left;
background-color: darkolivegreen;
padding: 0;
}
#footerCenter {
width: 33%;
height: 100%;
float: left;
background-color: white;
padding: 0;
}
#footerRight {
width: 33%;
height: 100%;
float: left;
background-color: firebrick;
padding: 0;
}
Add display: flex to the #footerContainer rule, and change max-height: 100%; to height: 100%; in #footerContainer
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: flex;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
background-color: darkolivegreen;
}
#footerCenter {
width: 33%;
background-color: white;
}
#footerRight {
width: 33%;
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
Here is a version where I simplified both markup and CSS
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
display: flex;
justify-content: center;
}
#footer > div {
width: 20%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- Footer -->
</div>
<!-- Page -->
One for older browsers, using display: table
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: table;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerContainer > div {
display: table-cell;
width: 33%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
<!-- Footer -->
</div>
<!-- Page -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#div1 {
width:33%;
display:inline-block;
float:left;
height:100%;
}
#div2 {
width:33%;
display:inline-block;
height:100%;
}
#div3 {
width:33%;
display:inline-block;
float:right;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>
If the second div isn't perfectly aligned, try setting #container text-align to center. Is very important to use the comments to delete the space between the divs.
Add float: left to the 3 elements.
Don't repeat the properties, combine the selectors with comma.
To stretch the elements you will need to change max-height to height on #footerContainer.
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft,
#footerCenter,
#footerRight {
float: left;
width: 33%;
height: 100%;
padding: 0;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
</div>
<!-- Page -->
I want to make collapsible top boxes. but somehow I was not successful. I want to make objects such as cards on the links page materialize. but also bootstrap
card subject at this link: materializecss.com/cards.html
.card3 {
padding: 20px;
position: absolute;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 92%;
z-index: 1;
overflow: hidden;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="card3" class="card3">
.......
</div>
<div class="panel panel-default">
<div class="row">
<div class="col-md-6">
......
</div>
<div class="col-md-6">
.......
</div>
</div>
</div>
</div>
</div>
</div>
Have you tried styling the other divs? Because right now only one of the divs has styling, and that usually doesn't end up with a properly styled product.
you can try this one:
.container
{
background:gray;
padding: 20px;
}
.col-md-12 {
padding: 10px;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 12%;
z-index: 1;
overflow: hidden;
}
.wrong
{
float:right;
top:0px;
margin-top:-70px;
cursor:pointer;
}
DEMO HERE