We Keep Coding

Why top div and bottom div is not getting height and width?

As you can see i used the intersection observer to change the background when the specific div comes in middle of the screen.
The issue i'm facing here is that i want to add other sections too outside of .main on top and bottom of the .main section. Stand alone the .main section is working okay. But when i add the other divs outside the main section. They don't take take height and width. I want main section works stand alone with others divs in my website page.
const bgEl = document.querySelector(".BG");
function createObserver(el) {
let observer;
let options = {
root: null,
rootMargin: "0px",
};
function handleIntersect(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const url = entry.target.getAttribute("BGurl");
bgEl.style.backgroundImage = `url(${url})`;
}
});
}
observer = new IntersectionObserver(handleIntersect, options);
observer.observe(el);
return observer;
}
(function () {
const sections = document.querySelectorAll(".main .section");
const observers = Array.from(sections).map(function (section) {
createObserver(section);
});
})();
* {
margin: 0px;
padding: 0px;
}
.section {
height: 100vh;
top: -611px;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
}
.text {
margin: auto;
}
.text p {
font-family: "Lato";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 149%;
color: #263244;
}
.text h1 {
margin-bottom: 20px;
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 0px;
color: #ffffff;
margin-bottom: 50px;
}
.text .story-detail {
width: 300px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.text .story-description {
width: 321px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.BG {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
opacity: 1;
top: 0px;
transition: opacity 10s ease-in-out;
background-size: cover;
background-repeat: no-repeat;
}
.main {
width: 100%;
height: 100vh;
}
<div style="height: 700px; width: 100%"></div>
<div class="main">
<div class="BG"></div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<h1>Our Story</h1>
<div class="story-detail">
<p>
We saw a gap between what people need and what banks offer. It
means millions of us aren't getting the banking experience we
deserve for different reasons.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
Traditional banks don’t focus on customers' experience, their
systems may be slow and outdated, they may prioritize a specific
group of people, or perhaps they lack the ability to innovate,
and so on.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/cLPLS8xW/mobile-desert.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
So since we're passionate about solving problems and bridging
gaps, we looked into and identified the challenges and
capabilities we'll need to build a bank here in the Kingdom.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/mZnqV38T/mobile-birds.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
With the best local and international expertise, we began
building an innovative digital bank designed by and for the
people. We believe that the most effective way to build a bank
for people is to do it with them. This is our philosophy. So, we
started building it with the help of people like you.
</p>
</div>
</div>
</div>
</div>
<div class="section" BGurl="https://i.postimg.cc/k513m0Fb/mountain.png">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
At D360, innovation starts with someone’s passion for improving
financial services. To that person, we say: Never stop offering
solutions to your needs. These solutions will not only benefit
you, but will significantly impact the lives of millions.
</p>
</div>
</div>
</div>
</div>
</div>
<div style="height: 700px; width: 100%"></div>
<footer style="height: 800px ;width: 100%" >
</footer>

Gradients on edges of swiper carousel

I want behavior like the one on this airbnb web page. Specifically, the one in the below image.
As you can see, at the edges of the carousel, it has a fading effect only on slide that are cut off.
This is what I have so far: https://jsfiddle.net/gpu5cafz/.
HTML (make sure to install Swiper if you aren't using the jsfiddle):
<div class="container">
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
</div>
CSS:
.swiper-slide {
width: 300px !important;
height: 200px !important;
text-decoration: none;
background-color: gray;
border-radius: 10px;
color: white;
background: rgb(203, 203, 203);
}
.container {
padding: 60px 120px 60px 120px;
}
JS:
const swiper = new Swiper('.swiper', {
slidesPerView: 'auto',
spaceBetween: 30,
freeMode: true,
freeModeSticky: false,
watchSlidesProgress: true,
watchSlidesVisibility: true,
});

Look into using gradients on the mask property.
For instance,
.container {
mask-image: linear-gradient(to right, transparent 0%, black 20% 80%, transparent 100%);
}

You are correct it was not the exact thing your looking for. Your looking for this type of soluton:
div {
background: linear-gradient(to right, white 20%, grey, white 80%);
color: white;
padding: 30px;
height: 160px;
font-family: sans-serif;
font-size: 1.5em;
}
<div>
Three color stops.
</div>
I think in the end your gonna end up in this ballpark. I am not 100% sure how to get your exact endresult (they seem to use some kind of animation feature too). But maybe someone else can supplement. This example I am giving you here is based on what I built for a customer once where they had an image in the middle and they wanted to have a background color left/right and then have it fade out as it got closer to the middle of the screen.

Horizontally "reveal" text in a container

I would like a transition like this
#my-div {
width: 20px;
transition: width 1s ease;
}
#my-div:hover {
width: 100%
}
Inside my div will be an icon that sits inside the 20px. When you mouse over the icon the width will expand to it's parent's container. Here's where I'm getting tripped up. I want the text "Auto Refresh" to be centered at the 100% width at all times. So when the container is at 20px then "Auto Refresh" text will be hidden because it's too far over (i.e it won't fit inside the 20px width). When you hover over the icon the width will expand revealing the hidden "Auto Refresh" text.
I've tried using overflow: no-wrap and overflow: hidden but hidden seems to do nothing. I'm wondering if this is even possible in CSS or if I need to use multiple layers and trigger animations on those layers with javascript. Here is the effect I'm going for.
In the absolute center of the orange div should be "Auto Refresh". I hope the gif conveys my goal well. The important part is that the text is hidden before mouse over and as the orange background slides over it slowly reveals the text as though it was always there, but was just hidden before.
Do I need multiple layers and trigger animations via javascript to accomplish this? Or is this doable in pure CSS?
Relevant HTML (Please excuse the inline style. I'm fiddling with dev tools)
<div class="col-sm-6 col-md-4 col-12 region-div us-region-div">
<div class="inner border-grey-light">
<div id="us-datasource" class="crossfade data-source-blizzard-api">
<img class="bottom" src="assets/data-source-blizzard-api-30x30.png" title="Price data from Battle.net Web API" alt="Price data from Battle.net Web API">
<img class="top" src="assets/data_source_wow_30x30.png" title="Price data from in-game" alt="Price data from in-game">
</div>
<h3 class="region-title">US</h3>
<p class="money-text"><span id="us-money-text" class="odometer">175,673</span><img src="assets/gold-transparent-compressed.png" class="gold"></p>
<div class="price-trend">
<span class="money-text-small">
<span id="us-arrow" class="crossfade down-arrow arrow">
<img class="bottom" src="assets/downarrow-resized.png">
<img class="top" src="assets/uparrow-resized.png">
</span>
<span id="us-money-text-small" class="odometer">-1,206</span>
<img src="assets/gold-transparent-compressed.png" class="gold-small">
</span>
</div>
<p id="us-last-change-text" class="last-change"> </p>
<p id="us-datetime" class="region-date"> </p>
<div class="refresh-container">
<div id="patreon">
<i class="fab fa-patreon" style="
color: white;
font-size: 1.25rem;
top: 12px;
position: absolute;
left: 12px;
"></i>
</div>
<p id="us-new-price" class="lead new-price show-price"><i id="us-price-refresh-icon" class="fas fa-sync-alt"></i> New Price!</p>
</div>
</div>

You can use clip-path to simulate the illusion of the text being revealed when the rectangular div container expands. Pure CSS, here are the relevant HTML and CSS you can apply to your code:
#my-div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
color: #FFF;
padding: 20px;
/* Relevant starting here */
width: 400px;
transition: clip-path 1s ease;
clip-path: polygon(0 0, 20% 0%, 20% 100%, 0% 100%);
}
#my-div:hover {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
<div id = "my-div">This is a test div</div>

Overlay particles.js on fullscreen div

I am using the following .js plugin:
https://github.com/VincentGarreau/particles.js/
With bootstrap 3's jumbotron, I have got the plugin working and my jumbotron is fullscreen when you get to my homepage (I think this is the issue) I am trying to run particles.js UNDER my jumbotron but for some reason the particles generate a whole viewport underneath my jumbotron. Like it is set up in it's own DIV after my jumbotron unit but I have <div id="particles-js"></div> wrapped around my jumbotron DIV. Which is where I get lost, the way I have it set up it should display underneath my jumbotron content and everything.
Here is my HTML:
<div id="particles-js">
<div class="jumbotron">
<div class="container center-vertically">
<div class="col-lg-6 col-lg-offset-3 text-center">
<h1>
A template with a bit of a different <strong>look & feel</strong>.
</h1>
<hr>
<p>Particles is a fun and multipurpose template, with clean & modern design <i>+</i> code.</p>
</div>
</div>
</div>
</div>
And the CSS for the jumbotron as well as the particles-js ID:
.jumbotron {
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
padding-top: 79px;
padding-bottom: 0;
display: table;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background: #6819e8; /* Old browsers */
background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */
}
.center-vertically {
display: table-cell;
text-align: center;
vertical-align: middle;
}
I have also uploaded a live version so it is easier to view the problem:
http://aliensix.com/company/

I think what you need to do is make your #particles-js child of .jumbotron.
#particles-js needs to be positioned absolutely relative to the .jumbotron.
HTML
<div class="jumbotron">
<div id="particles-js"></div>
</div>
CSS
.jumbotron {
position: relative;
// Other style rules ...
}

If A Radio Button is Checked Call Function Handler

http://liveweave.com/rFqNTl
Fixed by using the property selector, and triggering change on the element - http://liveweave.com/ZTirGp
I have a few radio buttons that act as a menu. When design is checked a designer div is shown, when code is checked, a textarea is shown.
One problem I ran into is when I click New I want the on function declared for #designer so that when it's checked to show that div, and hide the others.
I've added the code below along with a demo to show what I'm having trouble with.
HTML
<div id='header'>
<center>
<div class="menubtn" id='newdoc'>
<input name="opt" id="opt-1" checked="checked" type="radio">
<label for="opt-1">New</label>
</div>
<div class="menubtn" style='display:none;' id='openload'>
<input name="opt" id="opt-2" type="radio">
<label for="opt-2">Browse</label>
</div>
<div class="menubtn" onclick='saveTextAsFile()'>
<input name="opt" id="opt-3" type="radio">
<label for="opt-3">Save</label>
</div>
<div class="menubtn" id='dropbox'>
<input name="opt" id="opt-4" type="radio">
<label for="opt-4">Dropbox</label>
</div>
<div class="menubtn" id='designer'>
<input name="opt" id="opt-5" type="radio">
<label for="opt-5">Design</label>
</div>
<div class="menubtn" id='settings'>
<input name="opt" id="opt-6" type="radio">
<label for="opt-6">Settings</label>
</div>
<div class="menubtn" id='codecanvasdisplay'>
<input name="opt" id="opt-7" type="radio">
<label for="opt-7">Code</label>
</div>
<div class="menubtn" id='fullcode'>
<input name="opt" id="opt-8" type="radio">
<label for="opt-8">Full Code</label>
</div>
<div class="menubtn" style='display:none;' id='intcolorpick'>
<input name="opt" id="opt-9" type="radio">
<label for="opt-9">Color Picker</label>
</div>
</center>
</div>
CSS
#header {
color: #2234cb;
text-shadow: 0px 0px 2em #fff;
background:#e0e2f9; /* Old browsers */
background:-moz-linear-gradient(top, #e0e2f9 0%, #d7dbf8 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e2f9), color-stop(100%,#d7dbf8)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* IE10+ */
background:linear-gradient(to bottom, #e0e2f9 0%,#d7dbf8 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2f9', endColorstr='#d7dbf8',GradientType=0 ); /* IE6-9 */
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#header input[type="radio"] { display:none; }
#header div { display:inline-block; margin:0; }
#header label {
cursor: pointer;
display: inline-block;
margin:.25em;
padding:.7em;
border-radius:50em;
font: 12px arial, sans-serif;
color: #444;
text-shadow: 0px 0px .25em #fff;
background:#f6f7fd; /* Old browsers */
background:-moz-linear-gradient(top, #f6f7fd 0%, #e0e2f9 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7fd), color-stop(100%,#e0e2f9)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* IE10+ */
background:linear-gradient(to bottom, #f6f7fd 0%,#e0e2f9 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7fd', endColorstr='#e0e2f9',GradientType=0 ); /* IE6-9 */
}
#header label:hover { color: #111; background: #f6f7fd; }
#header label:active { color: #111; background: #c1c5f6;}
#header input[type="radio"]:checked + label { color: #e0e2f9; background: #666; box-shadow:inset 0 0 .25em #000; text-shadow: 0px 0px .25em #e0e2f9; }
JQuery/JavaScript
// Call New
$('#newdoc').click(function() {
$("#designer")[0].click();
code.val('');
preview.html(code.val());
});
$('#opt-1').click(function(){
if($('#opt-1').attr('checked')=="checked"){
$(this).attr('checked', false);
$('input#opt-5').attr('checked', true);
}else{
$('input#opt-5').attr('checked', false);
}
});
// Call Designer UI
$('#designer').on('change',function() {
$('#canvasbg, #canvas').show();
$('#settingsdisplay').hide();
$("#fullwebsitecode").hide();
$("#bottom, #code").hide();
return false;
});
// Call Settings
$('#settings').on('change',function() {
$('#settingsdisplay').show();
$('#canvasbg, #canvas, #bottom, #code').hide();
$("#fullwebsitecode").hide();
return false;
});
// Call Show Code
$('#codecanvasdisplay').on('change',function() {
$("#bottom, #code").show();
$('#settingsdisplay').hide();
$('#canvasbg, #canvas').hide();
$("#fullwebsitecode").hide();
return false;
});

This is what you want: $("#designer").trigger('change');
Change your "New Doc" handler to:
// Call New
$('#newdoc').click(function() {
code.val('');
preview.html(code.val());
$("#designer").trigger('change');
});

You can use trigger to trigger events bound to a given element.
$("#designer").trigger('click');
Also, much of your code uses the "change" event on a div that contains a radio element. So the change event bubbles up from the input, and you're handling it at the div level. Unless you have a good reason for it, the inputs are not really needed, and you can go with a click event on a div element. Much more straightforward.
Here is your code with the modifications to the events I mentioned:
http://liveweave.com/Lsmg7B
Documentation & Related Reading
jQuery.trigger - http://api.jquery.com/trigger/
Event bubbling on javascripter.net - http://www.javascripter.net/faq/eventbubbling.htm