Asmodeus Comments - Answer Overflow

Asmodeus

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

literally if i manually add backdrop-filter: blur(16px) saturate(100%); to the navbar in developer mode in my browser, and not even with the class "scrolled" it will undo the blur of the extended area.

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

if you re UNSCROLLED and you open the hamburger button, the extended zone WILL blur, but if you ARE scrolled and you open it, the extended area will NOT blur.

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

when you scroll down the navbar should blur, which it does... but also when you open the hamburger button (which is only displayed when your width is less than 1000) it is supposed to blur that zone as well.

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

here is a codepen of the thing

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

https://codepen.io/Coffee-Nerd/pen/xxmdPGb

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

so you can confirm this is weird, right

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

there, i removed it from the example

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

im using .navbar.scrolled

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

yeah thats because i was testing things

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

the thinking behind adding scrolled to the navbar when adding show is also because if you open the hamburger button the navbar should be blurred along with the new menu area (collapse)

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

im not getting how that's working @pi3639

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

and yet they can't exist at the same time somehow

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

which should add a blur to the navbar using .navbar.scrolled, and a blur to the navbarcollapse using .navbar-collapse.show

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

if show is added, remove it.. if not... add it.. and add scrolled to the navbar

36 replies

KPCKevin Powell - Community

•Created by Asmodeus on 9/12/2023 in #front-end

Can't blur two elements at once. No idea how this is working.

document.getElementById("navbar-toggler-hamburger").addEventListener("click", function() {
  const navbarCollapse = document.getElementById("navbar-collapse");
  const navbar = document.getElementById("navbar");

  if (navbarCollapse.classList.contains("show")) {
    navbarCollapse.classList.remove("show");
  } else {
    navbarCollapse.classList.add("show");
    navbar.classList.add("scrolled");
  }
});

document.getElementById("navbar-toggler-hamburger").addEventListener("click", function() {
  const navbarCollapse = document.getElementById("navbar-collapse");
  const navbar = document.getElementById("navbar");

  if (navbarCollapse.classList.contains("show")) {
    navbarCollapse.classList.remove("show");
  } else {
    navbarCollapse.classList.add("show");
    navbar.classList.add("scrolled");
  }
});