Hey guys i am trying to make transition when the scroll it pass the first div( that is with the class name "one") height it will resize it width to 20% and the second div ( with the class name "two") will take the remaining width of the "one" class. <== when this happened it will turn the "two" class to a display as a block rather than inline-block. the problem that i have right now is that when the ".one" class it got resize to 20% the ".two" class disappear same as the below class and when the ".two" class disappear when i scroll up it only resize the ".one" class div halfway . can anyone help me how to achieve this? here's my code and some image that i made of a transition that i want to make in case still confused of what i want to achieve. thanks for the help.
in here it shown from this image to the left shown display of the page before scroll and from the right image shown when the user scroll the page that will reduce the size of the div class ".
in this section of image from the left shown when the width of the div class ".one" is have width of 20% it will not resize it again and for the right image shown when the div class ".one" have width of 20% it will change the css of div class ".two" from inline block to display block and when it scroll it will show the third div.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
height: 2000px;
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section label {
font-size: 100px;
color: white;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
top: 0;
z-index: -999;
}
.two {
background-color: yellow;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content-wrapper">
<div class="section one">
<label>one</label>
</div>
<div class="section two">
<label>two</label>
</div>
</div>
<div class="revelation" style="width: 100vw; height: 100vh; background-color: black;">
<label>Tree</label>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop() + 0,
zeroSizeHeight = $(document).height() - $(window).height(),
newSize = 1400 * (1 - (winScrollTop / zeroSizeHeight));
let box = document.querySelector('.one');
let width = box.clientWidth;
console.log(newSize)
if(newSize > 331.13772455089827 ){
$(".one").css({
"width":newSize
})
}else if(newSize <= 331.13772455089827){
$(".section").css({
"display":"block"
})
}
});
</script>
</body>
</html>
Related
HTML Code:
<div id="screenLeft" class="screen"></div>
<div id="screenTop" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
</div>
</div>
CSS code:
.screen {
position: fixed;
background: black;
}
#screenTop {
height: 100px;
width: 100%;
background: green;
}
#screenLeft {
height: 100%;
width: 100px;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#content {
margin: 100px;
}
I have two Questions
how can I bring black sidebar on top of header while both is fixed?
How can I show content div in whole screen if sidebar & header display is none?
enter image description here
First question:
How can I show sidebar on top of header while both are positioned fixed?
simple answer, you can use z-index = number (z-index = 100 for example),
reference: MDN
The z-index CSS property sets the order of a positioned element and its descendants. Overlapping elements with a larger z-index cover those with a smaller one.
example code:
.screen {
position: fixed;
start: 0;
}
#screenTop {
height: 100px;
width: 100%;
top: 0;
z-index:10;
}
#screenLeft {
height: 100%;
width: 100px;
top:100px; /*To Prevent Overlapping*/
z-index:9;
}
#content{
margin: 50px;
}
Second question:
How can I show content div in whole screen if sidebar & header display is none?
You will need to use a little javascript to perform this,
Add the following code before the end of your <body> tag,
then modify it for your needs.
<script>
function ToggleContent()
{
let screenTopDisplay = document.getElementById("screenTop").style.display;
let screenLeftDisplay = document.getElementById("screenLeft").style.display;
let toggleMargin =
(screenTopDisplay = "" || screenTopDisplay = "block") && (screenLeftDisplay = "" || screenLeftDisplay = "block");
let container = document.getElementById("container");
if(toggleMargin)
{
container.style.margin = "100px 0px 0px 100px";
}
else
{
container.style.margin = "0px";
}
}
</script>
*remember to call the function when you show/hide the .screen ToggleContent()
For your first Question add these 2 properties top:0px;(to start form to 0 of screen) and z-index:99; (to stack over the topbar) to sidebar id #screenLeft
For your 2nd Question after removing sidebar and top bar add this css
#content { margin-left: 0; margin-top: 0; }
it will remove margin form content div.
.screen {
position: fixed;
background: black;
}
#screenTop {
height: 100px;
width: 100%;
background: green;
}
#screenLeft {
height: 100%;
width: 100px;
top:0;
z-index:99;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#content {
margin: 100px;
}
<div id="screenLeft" class="screen"></div>
<div id="screenTop" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
</div>
</div>
I'm trying to do an effect that hide a div behind other like this page: Canalla Agency. I use two divs and the last one with position fixed, and it's worked, but the div lost the height.
Sorry for my explanation but I'm not good in CSS positioning and Javascript. I hope you can help me and see you soon. Thanks.
Solution with three <div>'s:
The only tricky bit is the "viewer" div creates the scrolling space to see the background div.
No JS required!
Also remember to specify position when using z-index.
<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>
I am creating a portfolio for the freecodecamp course. I want my portfolio page to have a slide out navigation menu, that slides out once you click on the menu button. I also want to have an image covering the body completely and when the menu slides into the page the picture would move with the body. I already have the slide out menu and the body moves along with the menu as it slides into the viewport, now I just need to figure out a way to add an image to the body that also responds to the slide out menu. Any help would be greatly appreciated!
This is my HTML and JS code that I have written so far.
<!DOCTYTPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="menu menu-open">
<header>
Menu
<nav class="menu-side">
This is a side menu
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function() {
var body = $('body');
$('.menu-toggle') .bind('click', function(){
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
$(".menu").css({"height":$(window).height() + "px"});
});
</script>
</body>
</html>
This is my CSS.
.menu{
overflow-x: hidden;
position: relative;
left:0;
}
.menu-open{
left:231px;
}
.menu-open .menu-side{
left: 0;
}
.menu-side,
.menu{
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left:-231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-toggle{
z-index: 1;
}
I think all you need to do is add a background image to the class you add to the body when the menu is open if I understand the question correctly.
.menu-open {
background-image: url('your-image.jpg');
}
You can simply add a div into a body (so you can have more flexibility to manipulate with the content):
<body>
<nav></nav>
<div>
<p>Menu</p>
</div>
</body>
Then use CSS to fill the window with the background and set style of your navigation:
html,
body {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100vh; /* Relative to 100% of the height of the viewport (browser
automatically recognizes height of the window) */
box-sizing: border-box;
}
/* Adjust body size to the html */
body {
width: 100%;
height: 100%;
display: flex;
}
nav {
width: 200px;
height: 100%;
}
div {
width: 100%;
height: 100%;
/* Background resizes automatically when menu appears */
background-image: url('yourimage.jpg');
background-size: cover;
background-repeat: no-repeat;
}
And animate navigation with jQuery:
$("p").click(function() {
$("nav").animate({width:'toggle'}, 350);
});
Im creating a page where my footer is growing on a certain event.
My problem is to make the footer grow according to how much space i got.
See my code or jsFiddle. I want the gray footer to grow all the way up to the colored elements with dynamic height (instead of like now, to 20%).
I guess i could count all the elements height above but that doesn't sound like a good solution.
jsFiddle here
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
position: relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 {
width: 100%;
height: 100px;
background: blue;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 {
width: 100%;
height: 120px;
background: green;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 {
width: 100%;
height: 60px;
background: red;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 10%;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#btn").click(function () {
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%');
});
</script>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<button type="button" id="btn">Click Me!</button>
<div class="div1">I have a dynamic height</div>
<div class="div2">I have a dynamic height</div>
<div class="div3">I have a dynamic height</div>
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
Instead of calculating the space of all the elements before, you can simply calculate the height of the most previous one and find the offset().top of that element. Using this approach I calculated the space (you have to make sure in your HTML the footer is directly after the previous element or slightly restructure my jQuery) and essentially you just toggle it between the default value and the default value + the space. Updated jsFiddle
$("#btn").click(function (e) {
var prev = $('.footer').prev(),
winHeight = $(window).height(),
calcTop = $('.footer').height() == Math.round(winHeight / 10) ?
(winHeight - prev.offset().top - prev.height()) : "10%";
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css({
'height': calcTop
});
});
On a side note I used CSS transitions to "animate" the change, not jQuery for performance issues and for ease of editablity
If you just want the position to change, not the height, you can do it by toggling the bottom value instead. Demo of that here
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.