I have a to slow fadeIn effect when I tring to show simple popup by clicking on button. Without video all of it works fine.
Video on my page have a 100% size and fixed position
video#bgvid{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Also, there is a popup html code
<div class="blackpopup">
<div class="container">
</div>
</div>
And css:
.blackpopup{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.58);
}
Javascript code is simple:
var popUpThank = jQuery(".blackpopup");
var submitButton = jQuery("#submit");
submitButton.click(function(e){
e.preventDefault();
popUpThank.fadeIn();
});
So, how to make it not so slow and where is the problem?
The answer is: not saturating the browser's memory with a hell of a heavy video.
Try doing the same removing the video tag it will work.
Compress it better, or with low quality as it's a background object.
I can point you to sorenson squeeze app for that.
Related
I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/
The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.
I have a div that I want to completely cover a page. I don't want anything on the page to be showing. The div should overlay on the page and hide everything on it. To create such an overlay I use the following CSS:
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
But if the page that the overlay is over is too long, some parts of the page still shows. How can I make it so that the div completely covers the page? Setting the position to fixed doesn't help because the overlay is multi pages long and the scrollbars get wracked.
The CSS that you're going to want to use for the overlay div is this.
.overlay {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
}
This should completely cover the page with a black div.
This question already has answers here:
Full-screen iframe with a height of 100%
(20 answers)
Closed 7 years ago.
I going to make a website that has a video as a background.
I want to load the video from vimeo but I havent found the best way to put it fullscreen.
i´m trying to add a css to the iframe but it doesn´t work at all:
iframe{
width: 100%;
height: 100%;
}
Do any of you know the best way to embed it as a background without using plugins or html5 to avoid problems with IE.
thank you!
Here you go: Demo
Wrap it in a div and set that also to 100%, 100%
iframe, div {
width: 100%;
height: 100%;
}
HTML:
<iframe src="vimeo.path"></iframe>
<div id="container"></div>
CSS:
body {
overflow: hidden;
}
iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
DEMO:
http://jsbin.com/utezov/4/embed?live
<iframe src="http://player.vimeo.com/video/47922974" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>Jape 'Scorpio' from Fergal Brennan on Vimeo.</p>
Now i just took a video from vimeo.
maybe set a class to the iframe like
<iframe class="fullvideo">
and set the css like:
iframe.fullvideo {
width: 100%;
height: 100%;
}
Try to use an ID to identify this bg iframe:
<iframe id="bgiframe">...</iframe>
and redefine this iframe in this way:
html, body, p, div, span, table, td
/* Add other elements... These are explicit defined since ie6/7 doesn't support * selector */
{
z-index: inherit;
background: transparent; /* this is important to see-through normal elements */
}
#bgiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding 0;
margin: 0;
border: 0;
width: 100%; height: 100%;
z-index: -1;
}
z-index: -1; is for take this element under every other elements.
background: transparent; for every other elements is to see through and see video as background.
This can be an example:
http://jsfiddle.net/4KHET/2/
I'm trying to implement Stellar.js (http://markdalgleish.com/projects/stellar.js/) to a site that I'm developing. I realised that I need to enclose the parallax scrolling inside a container instead of using window/body in order for it to work on an iPad (considering the viewport) and that's where I run into a problem; the script doesn't seem to initiate correctly.
Here's the structure I've setup on the site -
HTML
<header></header>
<!-- keeping this content outside of #content because of a prefixed alignment -->
<div id="content">
<section id="example" data-stellar-background-ratio="1">
<img src="example-1.png" data-stellar-ratio="2" data-stellar-offset="-25">
<img src="example-2.png" data-stellar-ratio="3" data-stellar-offset="-50">
<img src="example-3.png" data-stellar-ratio="4" data-stellar-offset="0">
</section>
</div>
CSS
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section {
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
}
img:first-child {
position: absolute;
top: 0;
left: 300px;
}
img:nth-child(2) {
position: absolute;
z-index: 99;
top: 0;
right: 150px;
}
img:nth-child(3) {
position: absolute;
z-index: 99;
top: 0;
left: 100px;
}
JavaScript
$('#content').stellar({
horizontalScrolling: false
});
I can see that the parallax images inside the section get display: none, but other than that the script doesn't seem to be running. I get no JS errors.
I'm thinking it might have something to do with you using position: absolute and not giving the div any with.
Did you check the size of your #content div? Or does stellar handle this too?
I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but only for when the videobox is on.
I have no idea where to start though.
You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.
You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)
The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?
in videobox.js
replace line 80
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
with this:
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});
Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.