I'm trying to create something similar this web page, where a video is used as the background and as the user scrolls up and down the text/background video change appropriately so as to tell a story.
Right now getting the video to play is about the only thing working. The video will load, and play, as intended. However the <div> elements are simply stacked below the video one by one. When the user clicks anywhere on the page, I'd like the text to scroll up, from the bottom, and finish scrolling once they reach the same position on the page as the previous text... however I don't think I'm using the .animate() function properly.
This seems like it'd be relatively easy to do, so here's my admittedly weak first attempt.
fiddle: http://jsfiddle.net/f06w76bv/
<!DOCTYPE html>
<html>
<head>
<style>
.textConatiner{
position: absolute;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
left:10%;
}
video.bgvid{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(TurbineStill.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video autoplay loop poster="TurbineStill.png" class="bgvid">
<source src="Turbine.mp4" type="video/mp4">
</video>
<section>
<div class="textConatiner" id="one" style="top:50%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
<section>
<div class="textConatiner" id="two" style="top:150%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).click(function () {
var myDiv = $("#two");
var scrollto = myDiv.offset().top + (myDiv.height() / 2);
myDiv.animate({ scrollTop: scrollTo }, 1000);
});
});
</script>
</html>
EDIT
By adding the position to the div container I'm able to get the original div positions exactly where I want them when the page loads. However, I still cannot get the animate method to move the second div into the page from below.
Your question isn't exactly new, it's just a bunch of questions in one really.
First of all - for your positioning, you'll be able to use plain CSS like you would with any DOM element. Tutorial on that are at W3Schools for example.
Scrolling to an Element using JQuery is answered in this stackoverflow-Question.
And another stackoverflow-question about moving a video by scrolling can be found here.
Related
We have an position: fixed; alert banner which appears at the top of the page to display different alerts. We want it to have a height (or appear to have height) so that it doesn't cover up the top menu of the page, but rather pushes the page content down. When the user accepts or x's out of the banner, the page should pop back to the top. When the user scrolls down the page, the banner should float at the top of the window, remaining on screen the whole time.
The current strategy is very kluge and uses a setBannerHeight() function all over the place that gives a above our banner a set height, pushing the main page content down and allowing the banner to appear to 'take up space'.
It's proven to be non future proof and does things like prevents our iOS Smart App Banners (a totally different banner) from appearing properly.
Is there a way I can either give a fixed element a height, make a sticky element float (so far I can't, this is in a self contained alert.component.ts component so don't think I can give a parent element height), OR, perhaps a 3rd party alert library you'd recommend that already has this solved?
This may help. It's simple, using position: sticky in CSS and some vanilla JavaScript. The alert stays at the top of the page when a user scrolls. It disappears when a user clicks on it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="alert">Alert</div>
<nav>Menu</nav>
<section>
<p>Add enough content here so you can scroll the page.</p>
</section>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
#container {
width: 600px;
margin: 0 auto;
}
nav {
width: 600px;
height: 100px;
background: lightblue;
}
#alert {
width: 600px;
height: 40px;
position: sticky;
top: 0;
background: orangered;
cursor: pointer;
}
section {
width: 600px;
}
const alert = document.getElementById("alert");
alert.addEventListener("click", function() {
alert.style.position = "static";
alert.style.display = "none";
})
One way to do it is by toggling a CSS class to the <body> that matches the state of the alert (open or closed). This class affects the behavior of the body, specifically his top-padding which should equal the height of alert.
Now all you have to worry about is to toggle the class on the proper show/hide events of the alert component.
body.alert-on {
padding-top: 60px;
}
.alert {
position: fixed;
}
HI friend i have one page loader but the probelm is when load the content also than loader running don't display the loaded the content i want stop loading and load the page deatils and content
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
<div class="js"><!--this is supposed to be on the HTML element but codepen won't let me do it-->
<body>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
</body>
</div><!--END: HTML element-->
1)don't need To function(){$(this).remove();}
2)The load() method was deprecated in jQuery version 1.8 and removed in version 3.0 and occurs when a specified element has been loaded.
So,
Use $(document).ready(function(){});
This is to prevent any jQuery code from running before the document is finished loading.
read More : https://www.w3schools.com/jquery/jquery_syntax.asp
Full Code:
$(document).ready(function($) {
$('#preloader').fadeOut('slow');
});
.js div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div class="js">
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
<div id="preloader"></div>
</div>
use any one, document.ready is enough .No need to add window.onload .because both are same , (perform after document loaded)
jQuery(document).ready(function($) {
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
.js div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js">
<!--this is supposed to be on the HTML element but codepen won't let me do it-->
<body>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
</body>
</div>
<!--END: HTML element-->
Well I am working on <iframe src> tag in which i am trying to add hover effect. What really this code does is that when i put my mouse over the yellow box it changes to cyan and red colour with 50 % height each divided vertically. But then I think what about adding an image so I just putted one image url and I noticed that it is not coming fit on that particular area. I tried changing the size or making position absolute ... but nothing worked in this.
My image file is this : 'http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg
Which is not fitting on that particular area.So is there any solution by which on hover I can get full size of that image on that particular area.
WHAT I HAVE TRIED
I have tried using background-size: 100% 100%; but then also its showing image like this.
THIS IS WHAT I WANT I have just edited to show you what I want
My code is divided into three parts
framehover.html
<html>
<body>
<p style="height: 50px;">Move the mouse pointer into the yellow box, then directly into
the green box,
then out of both boxes. No red or cyan should remain, only yellow and green.</p>
<iframe src="my.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
<iframe src="my2.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
</body>
</html>
my2.html - both my.html and my2.html is same so I am putting this one only. just difference is that in my.html background-color: red; for .outer
<html>
<head>
<style>
body { margin: 0px; }
.outer {
margin: -100px;
width: 400px;
height: 500px;
background-color: green;
}
.outer:hover {
background-color: red;
}
.inner {
visibility: hidden;
width: 100%;
height: 50%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg');
}
</style>
</head>
<body>
<div class="outer"
onmouseover="firstChild.style.visibility='visible'"
onmouseout="firstChild.style.visibility='hidden'"><div class="inner"></div></div>
</body>
the iframe is independent of your website, you can not change the style of iframe, for that you must change it in the original Web. If you are in the same domain with js you can try, but you can have crossdomain error.
What I am trying to do is have different parts of a page slide up and cover up the previous part. I found what I wanted to do at http://johnpolacek.github.com/superscrollorama/, specifically the "Wipe It" portion. I tried copying some of the code and including the same javascript files.
In Firefox, it works. However, in Chrome and IE, when I try to scroll down, the scrollbar jitters and snaps back to the top of the page.
I don't have it up on a site, but I do have the files that I'm using: http://www.mediafire.com/?h28etrbr5t24qyw
Any help (or more practical alternatives) would be greatly appreciated.
Yea that looks pretty cool. I would just create the code from scratch so you can get it exactly how you want. I just created something real basic. A blue main div with a red div that wipes down. Obviously you can put whatever you want on both divs.. Heres the code:
<!doctype html>
<html>
<head>
<style type='text/css'>
body{
margin: 0px;
}
#wipeScreen{
position: fixed;
width: 100%;
background-color: red;
}
#mainScreen{
position: absolute;
background-color: blue;
height: 200%;
width: 100%;
}
</style>
<script type='text/javascript'>
var visHeight;
function loadConstants(){
visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2);
var wipeScreen = document.getElementById("wipeScreen");
wipeScreen.style.height = visHeight+"px";
wipeScreen.style.top = -visHeight+"px";
window.onscroll = runScroller;
}
function runScroller(){
document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px";
}
</script>
</head>
<body onload='loadConstants()'>
<div id='mainScreen'></div>
<div id='wipeScreen'></div>
</body>
</html>
Copy and paste it into an HTML document and you will see what I mean
I'm using jQuery to fade in an <article> element which contains a <section> element.
Outside element is display:none, position:fixed, and z-index:5. Inside element is position:absolute.
Basically the article gives a frame and the inside section holds the content and has a scrollbar.
I'm fading in the outside element and expecting the inside to follow suit.
In IE9+, FF, and Chrome it works as expected.
In IE8- it does not. The outside article doesn't fade in at all - remains invisible, and the inside section is positioned relative to the browser frame and is always visible. Other elements on the page are all skewed and the page becomes mostly non-functional.
Code samples:
article
{
display: none;
position: fixed;
z-index: 5;
}
section
{
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}
and
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<article id="contentFrame">
<section id="content">
Lorem Ipsum
</section>
</article>
</body>
</html>
and
$("#contentFrame").fadeIn(2000);
IE8 and below does not support HTML5 tags such as article and section.
HTML5 elements CSS & Javascript interaction in IE8 and below
HTML5 elements in Internet Explorer: runtime insertion