Cover entire page with layer - javascript

I have pretty complicated one page application, which loads abot 20 seconds.
During loaiding I would not like to show page to user.
So, I have created a layer with 100% height and 100% width, maximum z-index and position absolute. I append this layer before loading starts to the body.
$(loaderHTML).appendTo('body');
#mainLoader {
z-index: 1000;
width: 100%;
height: 100%;
background: rgb(32, 35, 42);
position: absolute;
top: 40px;
}
Layer does the job - it covers the whole page in the beginning, but then, when new elements are created on the page and height of the page becomes bigger, users see not covered elements at the bottom.
How can I make layer that covers whole page even if page changes it's height?

EDIT: absolute position doent't work, but fixed does. Dont't know why
#mainLoader {
z-index:1000 ;
width:100 %;
height:100 %;
background: rgb(32 ,35 ,42 );
position: fixed;
top: 0%;
left: 0%;
overflow: hidden;
}

try this
#mainLoader {
z-index: 9999;
background: rgb(32, 35, 42);
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}

Related

Background does not spans entirely

I had made css pre-loader which has a some-colored background and a bouncing ball. The background however doesn't spans the window entirely.The page before which the preloader appears is scrollable, and when I try to reload the page, the preloader background doesn't cover the entire page, but only till the window size from the top.
The preloader code was mentioned in this question: Preloader does not fade out online
Help appreciated.
Change position: absolute; to position: fixed; and add width: 100%;.
If it doesn't fill the whole page use height: 100vh; instead of a percentage value.
So #loader should look something like this:
#loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: #0f2338;
z-index: 99;
}

Wordpress page lagging

Im currently in the process of fixing a wordpress site for a client, unfortunately I am having tons of issues with scrolling on one of the pages. I have tried time and time again to remove any scroll assist js that could be causing it but I still cant seem to get it to work.
Here is the URL for the page giving me trouble: http://www.bombaygrilloh.com/home/menu/
Any help is greatly appreciated!
You issue is background-attachment
Chris Ruppel writes:
[...] using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.
The culprit is your header background image.
it is fixed and is consistently getting repainted on scroll behind your page content.
In you CSS file you have this
.section-parallax {
background-attachment: fixed;
}
If you remove that then you smooth scrolling without trouble but you loose the parallax effect.
If you must have the parallax effect then you need to either use a more efficent method for the effect or hack your way to it.
for more efficiency use jQuery. I found a pen by Marcel Schulz and copied it below for reference:
/*
See https://codepen.io/MarcelSchulz/full/lCvwq
The effect doens't appear as nice when viewing in split view :-)
Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).
*/
jQuery(document).ready(function() {
$(window).scroll(function(e) {
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
$('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
$('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
$('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
}
});
body {
background: rgba(230, 231, 232, 1);
height: 4600px;
}
/* foreground (balloons/landscape)*/
div#parallax-bg-1 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 2;
}
/* background layer */
div#parallax-bg-3 {
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -470px;
z-index: 3;
}
/* foreground */
div#parallax-bg-3 div {
background-repeat: no-repeat;
position: absolute;
display: block;
overflow: hidden;
}
div#bg-3-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
width: 529px;
height: 757px;
top: -100px;
right: 100px;
}
div#bg-3-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
width: 603px;
height: 583px;
top: 1050px;
right: 70px;
}
div#bg-3-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
width: 446px;
height: 713px;
top: 1800px;
right: 140px;
}
div#bg-3-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
width: 1104px;
height: 684px;
top: 2800px;
right: 0px;
}
/* middle layer clouds */
div#parallax-bg-2 div {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-2-1 {
top: 100px;
left: -310px;
}
div#bg-2-2 {
top: 270px;
right: -70px;
}
div#bg-2-3 {
top: 870px;
left: -300px;
}
div#bg-2-4 {
top: 1120px;
right: -130px;
}
div#bg-2-5 {
top: 1620px;
left: 140px;
}
div#bg-2-6 {
top: 720px;
left: 340px;
}
/*background layer clouds */
div#parallax-bg-1 div {
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-1-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 200px;
right: 450px;
}
div#bg-1-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 420px;
left: 0px;
}
div#bg-1-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 850px;
right: -290px;
}
div#bg-1-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 1350px;
left: 200px;
}
div#bg-1-5 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 1200px;
left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="parallax-bg-3" class="parallax-bg">
<div id="bg-3-1"></div>
<div id="bg-3-2"></div>
<div id="bg-3-3"></div>
<div id="bg-3-4"></div>
</div>
<div id="parallax-bg-2" class="parallax-bg">
<div id="bg-2-1"></div>
<div id="bg-2-2"></div>
<div id="bg-2-3"></div>
<div id="bg-2-4"></div>
<div id="bg-2-5"></div>
<div id="bg-2-6"></div>
</div>
<div id="parallax-bg-1" class="parallax-bg">
<div id="bg-1-1"></div>
<div id="bg-1-2"></div>
<div id="bg-1-3"></div>
<div id="bg-1-4"></div>
<div id="bg-1-5"></div>
</div>
</body>
</html>
In the same article I quoted above, there is a tutorial for how to fix the issue with CSS. Instead of using background-attachment: fixed you add the background to a pseudo-element and give it postion fixed like so
.element {
position: relative;
}
.elemnt:before {
content: ' ';
position: fixed; /* instead of background-attachment */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/img/front/strategy.jpg') no-repeat center center;
background-size: cover;
will-change: transform; /* creates a new paint layer */
z-index: -1;
}
And this will essentially limit the impact on scrolling as the "background" would have it's own independent element.
Note: If you run into issues which you cannot debug, open the dev tools and start deleting elements from the page one by one until you find the issue.
Resources:
https://www.w3.org/TR/css-will-change-1/
http://caniuse.com/#feat=will-change
https://www.youtube.com/watch?v=QU1JAW5LRKU
https://developers.google.com/web/tools/chrome-devtools/
From looking at your site, there are a few parts of it that are slowing down the rest. Here are a few easy ways to speed it up.
Use a CDN
A CDN (Content Distribution Network) ensures that everything is loaded faster because it doesn't depend on your own Wordpress server and will allow access times to be consistent across the world. There are a few good ones out there like CloudFlare and Incapsula. Here is an article listing a few more.
In addition, you can host your images (I see that one is coming from Wikipedia) on a slightly faster
Compress images
This step is as easy as converting photos to a .jpg. JPEG automatically compresses the data by getting rid of unnecessary information in the photos. You can also use compression software to get the file size down.
Leverage caching
Use a caching plugin (there are tons of great ones for Wordpress) to cache data on your server and can really speed up things for your site.
Search for more ways to optimize
Use tools like Pingdom and Google PageSpeed Insights to identify bottlenecks and resolve them.
Hope this helps you!

I have a video background on my bootstrap page - how can I make it "fixed"?

I have the following code http://jsfiddle.net/Leytgm3L/22/ and as you can see here on first "section" I have the video background. Now, when user scrolls the webpage down, so far the whole video goes up. I would like to achieve the effect that the webpage overlaps it, so the video and its section is fixed to the page. I have the following CSS code:
.video-container2 {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video-container2 video {
position: absolute;
z-index: -1;
width: 100%;
}
and I tried to add:
position: fixed
instead of absolute, but it didn't do the trick...
How can I do that?
position: fixed will do the trick, but you need to set the top/left/bottom/right with 0 instead of 0%:
.video-container2 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
With bottom and right set, you don't need height and width anymore.
jsfiddle: http://jsfiddle.net/Leytgm3L/23/
In the comments, we talked about centering the video, even with oversize, and having it fill the viewport no matter the size of the screen. The only way to properly achieve that was with JavaScript. Using jQuery:
$(document).ready(function() {
setVideoSize();
});
$(window).resize(function() {
setVideoSize();
});
function setVideoSize() {
// ratio of video in pixels, width/height
var videoRatio = 320 / 176;
// ratio of window in pixels, width/height
var screenRatio = $(window).width() / $(window).height();
if (videoRatio < screenRatio) {
$('.video-container2 video').width($(window).width());
$('.video-container2 video').height('auto');
} else {
$('.video-container2 video').height($(window).height());
$('.video-container2 video').width('auto');
}
}
And to center it, we can use this sort of hacky CSS:
.video-container2 video {
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
jsfiddle: http://jsfiddle.net/Leytgm3L/28/
Change your top/left values to 0 instead of 0%.
.video-container2{
position: fixed;
top: 0;
left: 0;
http://jsfiddle.net/Leytgm3L/25/

Repeating images followed by another image inside a DIV

Just wanted to say thanks in advance.
First I have a single div that is Height: 100% and Width: 130px I have a 130x5px image that i want to repeat vertically until i get to 75% of the screen height. Then i want to place another image directly underneath it. I know how to repeat the image vertically. But i am not sure how to attach another image directly below it.
P.S. I want it to all be in the same div so that i can use JQuery to control the div and not just the individual elements inside of it.
How about something like this:
div.snocavotia {
background: url(http://lorempixel.com/130/5/) repeat;
z-index: 100;
height: 100%;
width: 130px;
position: relative;
}
div.snocavotia:after {
background: url(http://lorempixel.com/130/30/) repeat;
z-index: 1;
content: '';
position: absolute;
top: 75%;
right: 0;
bottom: 0;
left: 0;
}
Example: http://cssdesk.com/h2XGc

Centered div with a transparent background with jQuery

How to center a div across all browsers and behind this div there should be a transparent background layer covering entire screen of browser like lightbox.
If you give the div a fixed width, it's easy to use negative margins:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
z-index: 20;
}
Without a fixed height, you cannot center the div vertically without JavaScript. With a dynamic height, you can vertically center the div using a snippet like this (in jQuery):
$(function() {
var mydiv = $('div');
mydiv.css({
top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
});
});
As for the transparent overlay, just give it an absolute position and a full width and height:
div#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 10;
}
If you can ditch IE6 support, you can simply use position: fixed instead of absolute, that way the divs will be centered even if the user scrolls the page, and even when JavaScript is turned off.

Categories