Background does not spans entirely - javascript

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;
}

Related

Invisible div to the browser

I need to make a div invisible to the browser. I mean, i have a div which it's something like a mark and i have another div that contain a google maps.
I put the next code for better understanding.
<div id="marc" class="marco"></div>
<div id="canvas-map"></div>
Style:
.marco{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 10;
background: url("vintaje-montaje.png") no-repeat;
background-size: 100% 100%;
}
The problem is the next: the div than works us a mark ("#marc") works fine. It's look fine. But as is ahead of the other div, i can't use the google maps.
I thought use jQuery and use e.preventDefault() when the mouse is over the div what not work.
Help me please.
Thanks and forgive me for my bad English.
pointer-evens: none will allow your mouse / touch events to pass through .marco to the underlying elements:
.marco{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 10;
background: url("vintaje-montaje.png") no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
See browser support.

How do I set animation to div behind image?

I have a jsfiddle animation that I want to set to use as a background div of a png image. I can set the height and width of the animation and I tried setting it to the div using
document.getElementByID('progress').appendChild(canvas);
However, instead of the canvas displaying where it should it shows up under the image with the functioning animation. Here is the jsFiddle.
The canvas will be placed underneath the #progressbar because the default css of this element is. position:static;.
When applying position:absolute; on the canvas it will be place on top of the #progressbar.
To be more precise:
#progress{
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
Depending on the exact placement in the z-dimension, you can use z-index:-1; or z-index:1;. By doing this the canvas will be in front or behind the #progressbar.
Example code: http://jsfiddle.net/u4cLxjrg/1/
http://jsfiddle.net/3qc2p1va/
I added some CSS styles to the canvas element, made it absolute and positioned relatively to its parent.
canvas {
display: inline;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
}
Apply this css. Z-index will put the canvas under others div.
#progress {
position: relative;
}
canvas {
top: 0;
left: 0;
z-index: -1;
position: absolute;
}

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/

Cover entire page with layer

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;
}

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

Categories