I have a great little script for highlighting links on a one page site that I found here on Stack Overflow. It works perfectly in Chrome and Edge but not in IE. Here is a snippet. Any suggestions?
<head>
<style>
html, body, header, nav, main, section, p {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
header {
background-color: #000;
height: 50px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
nav {
height: 50px;
margin: 0 auto;
max-width: 600px;
padding: 0;
position: relative;
top: 0;
}
nav a {
color: #FFF;
display: inline-block;
font-size: 24px;
height: 50px;
line-height: 50px;
margin-right: 24px;
text-decoration: none;
}
nav a:hover {
color: #666;
}
nav a.active {
color: red;
}
main {
margin: 0; padding: 0;
}
section {
box-sizing: border-box;
color: blue;
height: 100vh;
margin: 0 auto;
max-width: 600px;
padding: 50px;
}
.one {
background-color: #FFF;
}
.two {
background-color: #999;
}
.three {
background-color: #666;
}
.four {
background-color: #333;
}
.five {
background-color: #111;
}
h1 {
font-size: 48px; line-height: 1; margin: 0; padding: 0;
}
</style>
</head>
<body>
<header>
<nav>
One
Two
Three
Four
Five
</nav>
</header>
<main>
<section id="one" class="one">
<h1>Section One</h1>
</section>
<section id="two" class="two">
<h1>Section Two</h1>
</section>
<section id="three" class="three">
<h1>Section Three</h1>
</section>
<section id="four" class="four">
<h1>Section Four</h1>
</section>
<section id="five" class="five">
<h1>Section Five</h1>
</section>
</main>
<!--Navigation Highlight Script-->
<script>
const links = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');
function changeLinkState() {
let index = sections.length;
while(--index && window.scrollY + 1 < sections[index].offsetTop) {}
links.forEach((link) => link.classList.remove('active'));
links[index].classList.add('active');
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
</script>
</body>
Here is the full code. Of course I've omitted the html, title, and meta tags. Any help would be appreciated.
I assume that you are using an IE 11 browser.
The IE browser does not support the Arrow functions(=>). It can be a possible reason that why your code is not working in the IE browser.
I have tried to modify your code, you can try to make a test with this code and let us know whether it works or not.
<!doctype html>
<html>
<head>
<title>demo</title>
<style>
html, body, header, nav, main, section, p {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
header {
background-color: #000;
height: 50px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
nav {
height: 50px;
margin: 0 auto;
max-width: 600px;
padding: 0;
position: relative;
top: 0;
}
nav a {
color: #FFF;
display: inline-block;
font-size: 24px;
height: 50px;
line-height: 50px;
margin-right: 24px;
text-decoration: none;
}
nav a:hover {
color: #666;
}
nav a.active {
color: red;
}
main {
margin: 0; padding: 0;
}
section {
box-sizing: border-box;
color: blue;
height: 100vh;
margin: 0 auto;
max-width: 600px;
padding: 50px;
}
.one {
background-color: #FFF;
}
.two {
background-color: #999;
}
.three {
background-color: #666;
}
.four {
background-color: #333;
}
.five {
background-color: #111;
}
h1 {
font-size: 48px; line-height: 1; margin: 0; padding: 0;
}
</style>
</head>
<body>
<header>
<nav>
One
Two
Three
Four
Five
</nav>
</header>
<main>
<section id="one" class="one">
<h1>Section One</h1>
</section>
<section id="two" class="two">
<h1>Section Two</h1>
</section>
<section id="three" class="three">
<h1>Section Three</h1>
</section>
<section id="four" class="four">
<h1>Section Four</h1>
</section>
<section id="five" class="five">
<h1>Section Five</h1>
</section>
</main>
<!--Navigation Highlight Script-->
<script>
const links = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');
var reg = new RegExp('(^| )active($| )','g');
function changeLinkState()
{
let index = sections.length;
var scrollTop = document.documentElement.scrollTop;
while(--index && scrollTop + 1 < sections[index].offsetTop)
{
}
for (var i=0; i<links.length; i++)
{
links[i].className = links[i].className.replace(reg,' ');
}
for (var i=0; i<links.length; i++)
{
if (sections[index].getAttribute("id")==links[i].getAttribute("href").substring(1))
{
links[i].className = "active";
}
}
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
</script>
</body>
</html>
Output:
Related
I need to change follow link color as they overlap with the section that has class intro and intro2 . The follow link color should be changed one by one as they overlap not at once (basically add and remove class use-inverted-colors which I will use to change color using CSS ). Check the example here at this site https://bakery-theme-v1.myshopify.com/ (social icon color being black and white)
class BarracudaOverlapping{
constructor(){
this.setOverlaping();
window.addEventListener("scroll", this.setOverlaping.bind(this));
window.addEventListener("resize", this.setOverlaping.bind(this));
}
setOverlaping(){
document.querySelectorAll(".et_pb_social_media .et_pb_social_icon .icon").forEach(el=>{
var overlap = false;
document.querySelectorAll(".intro,.intro2").forEach(background=>{
if(this.isOverlapping(el, background))
overlap = true;
});
if(overlap)
el.classList.add("use-inverted-colors");
else
el.classList.remove("use-inverted-colors");
});
}
check(){
this.setOverlaping();
}
isOverlapping(e1, e2){
if (e1.length && e1.length > 1) {
e1 = e1[0];
}
if (e2.length && e2.length > 1){
e2 = e2[0];
}
const rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
const rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
let overlap = false;
if (rect1 && rect2) {
overlap = !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
return overlap;
}
console.warn('Not valid HTMLElement object');
return overlap;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
<section class="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li>
</ul>
have you tried mix-blend-mode? it changes the color depending on its backGround
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
ul {
mix-blend-mode: difference;
}
span {
color: red;
}
<section class="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li>
</ul>
like this
var links = document.getElementsByClassName('linkClass');
var intro = document.getElementById("intro");
var intro1 = document.getElementById("intro1");
var intro2 = document.getElementById('intro2');
var content = document.getElementById("content")
window.addEventListener("scroll",() => {
for(var i=0; i<links.length; i++) {
var elmPosition =links[i].getBoundingClientRect().top
if(elmPosition <= intro1.getBoundingClientRect().top){
links[i].classList.add("whiteClass")
} else if(elmPosition> intro1.getBoundingClientRect().top && elmPosition < intro2.getBoundingClientRect().top){
links[i].classList.remove("whiteClass")
links[i].classList.add("blackClass")
} else if(elmPosition >intro2.getBoundingClientRect().top && elmPosition < content.getBoundingClientRect().top) {
links[i].classList.remove("blackClass")
links[i].classList.add("whiteClass")
} else if(elmPosition > content.getBoundingClientRect().top){
links[i].classList.remove("whiteClass")
links[i].classList.add("blackClass")
}
}
})
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
#intro1 {
height: 90vh;
}
#intro2 {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
.whiteClass {
color: white !important;
}
span {
color: white
}
.blackClass {
color: black
}
<section class="intro" id="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1" id="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2" id="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content" id="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></li>
</ul>
I tried to do it with the .myslides-colorbox on the html/css. The background always seems to cut of at the edge of the top of the slideshow. I want the slide-show to be over a big box something like this is what I want to do with the slideshow. What do I have to add or place differently to make this happen? The controller represent my slideshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n >= x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
/* background-color: red; */
padding-left: 8%;
/* padding-right: 8%; */
box-sizing: border-box;
overflow: hidden;
}
/* Navigation bar section*/
.navbar {
width: 100%;
display: flex;
align-items: center;
}
.logo {
width: 150px;
cursor: pointer;
margin: 30px;
}
#menu-icon {
width: 25px;
cursor: pointer;
}
nav {
flex: 1;
text-align: right;
}
nav ul li {
list-style: none;
display: inline-block;
margin-right: 30px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
}
nav ul li a:hover {
color:blue
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 100px 0;
}
.col-1 {
flex-basis: 40%;
position: relative;
margin-left: 50px;
}
.col-1 h2{
font-size: 54px;
}
.col-1 h3{
font-size: 30px;
color: #707070;
font-weight: 100;
margin: 20px 0 10px;
}
.col-1 p {
font-size: 16px;
color: #b7b7b7;
font-weight: 100;
}
.col-1 h4{
margin: 30px 0;
font-size: 20px;
}
button {
width: 140px;
border: 0;
padding: 12px 10px;
outline: none;
color: white;
background: linear-gradient(to right, #fb5283, #ff3527);
border-radius: 6px;
cursor: pointer;
/* transition: width 0.5s; */
}
/* button i {
width: 30px;
display: none;
} */
button:hover {
width: 160px;
background: linear-gradient(to right, #ff3527, #fb5283);
}
.col-1::after {
content: '';
width: 10px;
height: 57%;
background: linear-gradient(#fb5283, #ff3527);
position: absolute;
left: -40px;
top: 8px;
}
.col-2 {
position: relative;
flex-basis: 60%;
display: flex;
align-items: center;
margin-left: 200px;
}
.mySlides-colorBox {
position:sticky;
top: 0;
right: 0;
background: linear-gradient(#fb5283, #ff3527);
/* border-radius: 20px 0 0 20px; */
height: 100%;
width: 80%;
z-index: -1;
transform: translate(15);
}
.mySlides {display:none;}
.box{
width: 800px;
height: 400px;
border: 5px solid blue;
margin: 20px auto;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="navbar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Auction</li>
<li>Services</li>
<li>Proceedings</li>
<li>Contact</li>
</ul>
</nav>
<i class="fa-solid fa-bars" id="menu-icon"></i>
</div>
<div class="row">
<div class="col-1">
<h2>Come see our wonderful things!</h2>
<h3>Finnspeed Oy on perustettu vuonna 1995. Se on osakeyhtiö, jonka kotipaikka on Järvenpää, ja pääasiallinen toimiala Autoliike. Yhtiön toimitusjohtaja on Keijo Tapani Lehtonen.
Yhtiön Finnspeed Oy liikevaihto oli 46 tuhatta ja tilikauden tulos 13 tuhatta. Liikevaihto nousi 58,6%. Liikevoittoprosentti oli 37%. Tiedot perustuvat yhtiön viimeisimpään tilinpäätökseen vuodelta 2021.</h3>
<p>more info....</p>
<h4>Free entry</h4>
<button type="button">Button <i class="fa-solid fa-gavel"></i></button>
</div>
<div class="col-2">
<div class="image-container">
<img class="mySlides active" src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/98/5f/b3/11/a1/b5/49/0e/b4/71/82/1e/a4/c7/18/60/985fb311-a1b5-490e-b471-821ea4c71860-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/1d/03/8b/7c/66/36/45/19/98/b2/17/1a/fc/be/b9/e5/1d038b7c-6636-4519-98b2-171afcbeb9e5-large::r:0.jpg" style="width:50%">
<button class="mySlides-leftButton" onclick="plusDivs(-1)">❮</button>
<button class="mySlides-rightButton" onclick="plusDivs(1)">❯</button>
<div class="mySlides-colorBox"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
<script src="index.js"></script>
</body>
</html>
Hello I'm new in the code and I try to stop the horizontal scroll when the div number 2 is visible in full (so that the div 3 is not visible but aund even there).
My code :
$(document).ready(function() {
$(window).scroll(function() {
var stopScroll = $('.block-2').offset().left;
if ($(window).scrollLeft() > $('.block-2').offset().left) {
$(window).scrollLeft(stopScroll);
}
});
});
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>
I was inspired in this forum to write this code.
I try test a lot of solution but that was not walk :(.
Do you know where i can try this ?
I guess, that it solve your issue. For jquery and pure javascript.
$(document).ready(function() {
$(window).scroll(function() {
var wrapWidth = $('.wrap').width();
var secondBoxWidth = $('.block-2').offset().left;
var scrollable = $('.wrap')[0].scrollWidth;
var breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if ($(window).scrollLeft() >= breakPoint) {
$(window).scrollLeft(breakPoint);
return;
}
});
});
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>
Pure JS solution
document.addEventListener('DOMContentLoaded', function () {
const scrollFunc = () => {
const wrap = document.querySelector('.wrap');
const wrapWidth = document.querySelector('.wrap').offsetWidth;
const secondBoxWidth = document.querySelector('.block-2').offsetWidth;
const scrollable = wrap.scrollWidth;
const start = Math.round(window.scrollX);
const breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if (start >= breakPoint) {
window.scrollTo(breakPoint, 0);
return;
}
};
document.addEventListener('scroll', scrollFunc);
});
I want this only with CSS-GRID
I want to fit the main element to full width if aside is not present.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-size: 2rem;
}
div.root {
height: 100%;
background-color: blueviolet;
display: grid;
grid-template-columns: 200px auto;
}
aside {
background-color: aquamarine;
}
main {
background-color: burlywood;
}
<div class="root">
<aside> aside </aside>
<main> main </main>
</div>
I've search on the SOF and found the following but It didn't work STACKOVERFLOW
What I've trid is to give the grid-template-columns as auto auto and add the width to the aside but then main doesn't stretch to its full width.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-size: 2rem;
}
div.root {
height: 100%;
background-color: blueviolet;
display: grid;
grid-template-columns: auto auto;
}
aside {
width: 200px;
background-color: aquamarine;
}
main {
background-color: burlywood;
}
<div class="root">
<!-- <aside> aside </aside> -->
<main> main </main>
</div>
You could use the + selector in CSS, though this only works if your aside is on the left.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-size: 2rem;
}
div.root {
height: 100%;
background-color: blueviolet;
display: grid;
grid-template-columns: 200px auto;
}
aside {
background-color: aquamarine;
grid-column-start: span 1;
}
main {
background-color: burlywood;
grid-column-start: span 2;
}
aside + main {
grid-column-start: span 1;
}
<div class="root">
<!--<aside> aside </aside>-->
<main> main </main>
</div>
<br/><br/>
<div class="root">
<aside> aside </aside>
<main> main </main>
</div>
Use display:flex;
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-size: 2rem;
}
div.root {
height: 100%;
background-color: blueviolet;
display:flex;
}
aside {
background-color: aquamarine;
min-width:200px;
max-width:200px;
}
main {
background-color: burlywood;
flex:1;
}
<div class="root">
<!-- <aside> aside </aside> -->
<main> main </main>
</div>
I am trying to build a navigation where nav__link shows in which section the user is currently while scrolling by using interSectionObserver .
so I tried to console.log() the index of entry.target from the sectionArr. so that way I can query select all the .nav_link and can add the active class to that index number.
I am doing this way because it is easy to target nav_link to add the class rather than adding separate id or classes on each nav__link and section.
I tried searching about this but could not find anything related. I think, it is possible to find the index of a element from an array where the element is also member of the array.
thanks.
const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');
let observer = new IntersectionObserver(detectInterSection);
observer.observe(firstSection)
function detectInterSection(entries) {
entries.forEach(entry => {
console.log(entry.target)
// console.log(sectionArr.findIndex(entry.target)); // trying to console log the index of entry.target in sectioArr
})
}
* {
box-sizing: border-box;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #fff;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
/* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
.header {
padding: 4rem 0;
background: #333;
}
.footer {
background: #333;
padding: 30px 0;
}
section {
font-size: 24px;
background: #b78ee6;
height: 48vh;
padding: 80px 0;
}
section:nth-child(even) {
background: #333e48;
height: 90vh;
}
.scroll-wrapper {
height: 100vh;
position: fixed;
display: flex;
align-items: center;
right: 0;
top: 0;
width: 12px;
z-index: 99;
cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
height: 100vh;
position: relative;
width: 100%;
}
.scroll-wrapper .scroll-thumb {
width: 16px;
background: #666;
will-change: top;
position: absolute;
left: 0;
top: 0;
}
.intersection {
position: fixed;
background: #333;
width: 300px;
right: 32px;
top: 0;
padding: 32px;
z-index: 88;
border-radius: 10px;
top: 200px;
}
.intersection a {
color: #fff;
}
.content {
position: relative;
}
.is--active {
color: #b78ee6;
}
<div class="scroll-wrapper">
<div class="scroll-thumb-wrapper">
<div class="scroll-thumb"></div>
</div>
</div>
<header class="header">
<div class="container">
header
</div>
</header>
<main class="content">
<aside class="intersection">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fiveth</li>
</ul>
</aside>
<section class="section section--first" style="position: relative">
<div class="container">
first seciton
</div>
</section>
<section id="apple " class="section">
<div class="container">
second seciton
</div>
</section>
<section class="section">
<div class="container">
third seciton
</div>
</section>
<section class="section">
<div class="container">
fourth seciton
</div>
</section>
<section id="section" class="section">
<div class="container">
fifeth seciton
</div>
</section>
<section class="section">
<div class="container">
last seciton
</div>
</section>
</main>
<footer class="footer">
<div class="container"> footer</div>
</footer>
Array.findIndex() takes a function as argument to find your element.
const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');
let observer = new IntersectionObserver(detectInterSection);
observer.observe(firstSection)
function detectInterSection(entries) {
entries.forEach(entry => {
const targetSectionIndex = sectionArr.findIndex(section => entry.target.id === section.id);
console.log('targetSectionIndex', targetSectionIndex);
const targetSection = sectionArr[targetSectionIndex];
console.log('targetSection', targetSection);
})
}
* {
box-sizing: border-box;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #fff;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
/* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
.header {
padding: 4rem 0;
background: #333;
}
.footer {
background: #333;
padding: 30px 0;
}
section {
font-size: 24px;
background: #b78ee6;
height: 48vh;
padding: 80px 0;
}
section:nth-child(even) {
background: #333e48;
height: 90vh;
}
.scroll-wrapper {
height: 100vh;
position: fixed;
display: flex;
align-items: center;
right: 0;
top: 0;
width: 12px;
z-index: 99;
cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
height: 100vh;
position: relative;
width: 100%;
}
.scroll-wrapper .scroll-thumb {
width: 16px;
background: #666;
will-change: top;
position: absolute;
left: 0;
top: 0;
}
.intersection {
position: fixed;
background: #333;
width: 300px;
right: 32px;
top: 0;
padding: 32px;
z-index: 88;
border-radius: 10px;
top: 200px;
}
.intersection a {
color: #fff;
}
.content {
position: relative;
}
.is--active {
color: #b78ee6;
}
<div class="scroll-wrapper">
<div class="scroll-thumb-wrapper">
<div class="scroll-thumb"></div>
</div>
</div>
<header class="header">
<div class="container">
header
</div>
</header>
<main class="content">
<aside class="intersection">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fiveth</li>
</ul>
</aside>
<section class="section section--first" style="position: relative">
<div class="container">
first seciton
</div>
</section>
<section id="apple " class="section">
<div class="container">
second seciton
</div>
</section>
<section class="section">
<div class="container">
third seciton
</div>
</section>
<section class="section">
<div class="container">
fourth seciton
</div>
</section>
<section id="section" class="section">
<div class="container">
fifeth seciton
</div>
</section>
<section class="section">
<div class="container">
last seciton
</div>
</section>
</main>
<footer class="footer">
<div class="container"> footer</div>
</footer>