Develop Reference

How can I create a curtains fade-out effect in Jquery?

I want to add a preloader to my website and I have this code:
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.elementor-element-edit-mode .loader{
display: none;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;
}
</style>
Instead of this simple fadeout effect, I want it to look like curtains closing, just like the following example:
Any idea how to achieve this unique fadeout effect based on the code I have?
Thank you!

Cover the background with a centered white box and let it collapse to 0 width.
setTimeout(() => {
$("#loader .logo").animate({ opacity: 0 }, 1000);
$("#loader .cover").animate({ width: "0%" }, 1000, () => {
$("#loader").hide(); // When animation is complete hide the element.
});
}, 1500);
#bg {
background: url('http://placekitten.com/630/195');
width: 630px;
height: 195px;
position: absolute;
}
#loader {
position: fixed;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loader .logo {
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 150px;
height: 150px;
}
#loader .cover {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
}
body { margin: 0 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>
<div id="loader">
<div class="cover"></div>
<div class="logo"></div>
</div>

How to make this code work with the rest?

So i am trying to build a scroll indicator using 3 div elements. All code (meaning the 3 div HTML,CSS,JS) seems to work by itself in codepen.io but when i am using Atom with the rest or my project it seems to stop working.
I tried putting the 3 div's first before everything else. All the way to the end. Using other divs as parents but nothing seems to work.
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow: auto;
scroll-snap-type: y mandatory;
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: ;
width: 100%;
height: 100vh;
}
#projects {
background-color: ;
width: 100%;
height: 100vh;
}
#gallery {
background-color: ;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #4caf50;
width: 8px;
<div id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll">
</div>
<div id="gallery" class="scroll">
</div>
</div>
<script src="scroll.js">
</script>
</body>
The div ID= myBar should show a progress of scrolling throughout the whole page and should be visible at all times.

Your css styling was wrong. Check out the snippet!
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow: auto;
scroll-snap-type: y mandatory;
position: fixed; // Make the bar stick to the left of the screen
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: ;
width: 100%;
height: 100vh;
}
#projects {
background-color: ;
width: 100%;
height: 100vh;
}
#gallery {
background-color: ;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
position: fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #ccc; // Set color to the actual bar that changes height
width: 8px;
<div id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll">
</div>
<div id="gallery" class="scroll">
</div>
<script src="scroll.js">
</script>

Add position: fixed to your class progress-container .
Edit : scroll-snap-type wasn't working because your elements weren't included in the container having the property scroll-snap-type: y mandatory; . So I added everything in 'containter', making that css property work again.
Had to change a bit your Javascript so the custom scrollbar should work again.
function myFunction() {
var elem = document.getElementById('containter');
var winScroll = elem.scrollTop;
var height = elem.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
*{
padding: 0;
margin: 0
}
/* Global Stylings */
/* ID and Class Stylings */
#containter {
width: 100%;
height: 100vh;
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
#Landing{
display: flex;
justify-content: space-around;
align-items: center;
background-color: red;
width: 100%;
height: 100vh;
}
#projects {
background-color: blue;
width: 100%;
height: 100vh;
}
#gallery {
background-color: pink;
width: 100%;
height: 100vh;
}
#logo{
width: 30em;
height: 30em;
}
.scroll {
scroll-snap-align: start;
}
.scrollindicator {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f1f1f1;
}
.progress-container {
width: 8px;
height: 100%;
background: #ccc;
position: fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 0%;
background: #4caf50;
width: 8px;
}
<body>
<div onscroll="myFunction()" id="containter" class="snap">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div id="Landing" class="scroll">
<img id="logo" src="AC-Logo.png" alt="Logo">
</div>
<div id="projects" class="scroll"></div>
<div id="gallery" class="scroll"></div>
</div>
<script src="scroll.js"></script>
</body>

Scroll Horizontally on hover only runs once?

I'm trying to make a simple scroll left and right div on hover. I'm really not sure what I'm doing wrong, I hover, but it only moves the 50 specified in the if statement. Do I need to add some kind of loop while I'm still hovering? Any help would be greatly appreciated.
Basically, I want to be able to hover over the two black boxes right and left and while it's hovered move right or left, when I remove the mouse it should stop.
$("#left").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos - 50
}, 1);
});
$("#right").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + 50
}, 1);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left"></div>
<div id="right"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
Link to script
jsfiddle
[also a side note, why does this work only on jsfiddle and no where else?]

Your issue is because the mouseenter and mouseleave events (which underpin the hover() logic) only fire once, when the mouse enters/leaves the targeted element. If you want to repeatedly perform an action whilst the element is over those elements you'll need to implement your own logic.
To achieve this you can use an interval within the mouseenter handler of the hover() to repeatedly shift the scroll position of the required element. Then in the mouseleave you can clear that timer.
Also note that you can DRY up your code by using a common class on both elements along with a data attribute to govern the movement increment per tick of the interval. Try this:
var timer;
$('.hover-scroll').hover(function() {
var increment = $(this).data('pos');
timer = setInterval(function() {
var leftPos = $("#wrapper").scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + increment
}, 1);
}, 50);
}, function() {
clearInterval(timer);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left" class="hover-scroll" data-pos="-50"></div>
<div id="right" class="hover-scroll" data-pos="50"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
If you want to speed up or slow down the scroll, change the delay on the interval

How to set height of a div to height of the screen dynamically till the scrollbar reach bottom of the screen

I am trying to have a vertical line for a news feed and i am looking for a solution to make its height equal to the screen when scrollbar reach bottom of the screen dynamically as items in the news feed will be loaded dynamically on scroll.
I tried using 100vh and 100% but then height is fixed to the height of the viewport.
Here is the div :
<div class="verticalLineFeed">
</div>
CSS for the div :
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
margin-top: 65px;
}
Any idea for doing this in css3 or jquery will be helpful
Code Snippet :
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="verticalLineFeed">
</div>
<div class="main">
</div>

Use a wrapper and set it to position: relative
.wrapper {
position: relative;
}
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="wrapper">
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
</div>
Or set position: relative to the body (haven't tested this on all browsers though)
body {
position: relative;
}
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="verticalLineFeed">
</div>
<div class="main">
</div>

I have got a way to do this
$(document).ready(function() {
function setHeight() {
windowHeight = $('.main').innerHeight();
$('.verticalLineFeed').css('height', windowHeight);
};
setHeight();
$('.main').resize(function() {
setHeight();
});
});
Code Snippet :
$(document).ready(function() {
function setHeight() {
windowHeight = $('.main').innerHeight();
$('.verticalLineFeed').css('height', windowHeight);
};
setHeight();
$('.main').resize(function() {
setHeight();
});
});
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalLineFeed">
</div>
<div class="main">
</div>

How to get nested div container height

I have two nested vertical layout containers each container can have a top and a bottom ratio content where the bottom one also has a nested splitter. How can I get the height of the middle one (number 3). BoundingClientRect gives the same height as the browser inspection which is not the visible height. See the attached pic. Here the top neighboring splitter height is also included. It also could be a question how to change this layout for getting right heights with the browser inspection?
<style>
html, body {
height: 100%;
}
.container {
background: rgba(221, 221, 221, 0.41);
width: 100%;
height: 100%;
}
.verticalContainer {
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
}
.topContent {
width: 100%;
margin: auto;
overflow: hidden;
}
.bottomContent {
width: 100%;
margin: auto;
overflow: hidden;
}
.splitter {
background: rgba(31, 37, 37, 0.41);
margin-top: 10px;
margin-bottom: 10px;
height: 10px;
width: 100%;
cursor: n-resize;
}
</style>
<div class="verticalContainer">
<div class="topContent" style="height:65%;">
<!--nested container-->
<div class="verticalContainer">
<div class="topContent" style="height:65%;">
<div class="container">2</div>
</div>
<div class="bottomContent" style="height:35%;">
<div class="splitter"></div>
<div class="container">3</div>
</div>
</div>
<!------------>
</div>
<div class="bottomContent" style="height:35%;">
<div class="splitter"></div>
<div class="container">1</div>
</div>
</div>

Try this. It might help you get height of container number 3
$(document).ready( function() {
alert($(".verticalContainer .bottomContent .container").height());
});
html, body {
height: 100%;
}
.container {
background: rgba(221, 221, 221, 0.41);
width: 100%;
height: 100%;
}
.verticalContainer {
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
}
.topContent {
width: 100%;
margin: auto;
overflow: hidden;
}
.bottomContent {
width: 100%;
margin: auto;
overflow: hidden;
}
.splitter {
background: rgba(31, 37, 37, 0.41);
margin-top: 10px;
margin-bottom: 10px;
height: 10px;
width: 100%;
cursor: n-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalContainer">
<div class="topContent" style="height:65%;">
<!--nested container-->
<div class="verticalContainer">
<div class="topContent" style="height:65%;">
<div class="container">2</div>
</div>
<div class="bottomContent" style="height:35%;">
<div class="splitter"></div>
<div class="container" id="third">3</div>
</div>
</div>
<!------------>
</div>
<div class="bottomContent" style="height:35%;">
<div class="splitter"></div>
<div class="container">1</div>
</div>
</div>