Avatar billede Kast20 Seniormester
01. juni 2020 - 01:55 Der er 7 kommentarer

jQuery script

Hej,

Har brug for lidt hjælp til en lille jQuery funktion.

Det skal tjekke om klassen .mobile_nav.opened:before er synlig i kildekoden og hvis den er, så skal det ikke være muligt for brugeren, at scrolle på siden. Hverken på desktop eller mobile enheder.

F.eks. ved at funktionen tilføjer en klasse .noscroll til <body> tagget, som så blokerer for scroll sålænge .mobile_nav.opened:before er synlig i kildekoden - eller hvad du ser som den bedste løsning.
Avatar billede Slater Ekspert
01. juni 2020 - 07:45 #1
Hvad mener du med synlig? Snakker vi css display eller visibility, eller om den er i viewport, eller om den overhovedet findes i DOM'en?

Og hvornår skal den tjekke? Kun ved page load, eller kan synligheden skifte? I hvilken forbindelse?
Avatar billede Kast20 Seniormester
01. juni 2020 - 12:29 #2
Hej,

Jeg tænker at der løbende skal tjekkes om .mobile_nav.opened:before findes i DOM.

Der er tale om en baggrund bagved en mobilmenu. Når brugeren åbner mobilmenuen ved at klikke på "hamburger ikonet", så bliver .mobile_nav.opened:before sat i DOM.

Hvis mobilmenuen er lukket, så hedder den bare .mobile_nav.closed:before. Det hele sker altså dynamisk og uden refresh af siden.

Her CSS til den DIV der er tale om, når klassen er aktiv:

.mobile_nav.opened:before {
visibility: visible;
background: rgba(0,0,0,.5);
opacity: 1;
}
Avatar billede Kast20 Seniormester
01. juni 2020 - 13:16 #3
- Det skal iøvrigt nævnes, at jeg har forsøgt at løse det med ren CSS men uden held. Hvis det kan løses med ren CSS så helt fint.

Det jeg ønsker er som sagt, at brugeren ikke kan scrolle ned på siden når .mobile_nav.opened:before bliver sat i DOM.
Avatar billede keysersoze Guru
01. juni 2020 - 13:51 #4
Der må være noget JavaScript, der sætter opened på mobile_nav og også tilsvarende fjerner den igen - kan du ikke sætte din noscroll her også?
Avatar billede keysersoze Guru
01. juni 2020 - 13:53 #5
Hvis det ikke er din egen js og det du benytter er lavet korrekt må der næsten være nogle events du kan lytte på.
Avatar billede Kast20 Seniormester
01. juni 2020 - 15:19 #6
Ja der er noget javascript i WordPress forældretemaet der skifter imellem mobile_nav.opened og mobile_nav.closed, alt efter om mobilmenuen er åben eller lukket.

Men hvis jeg sætter noget ind i denne fil, hvor alt er komprimeret (minified) og total uoverskuelig, så bliver det overskrevet ved næste opdatering af forældretemaet, med mindre jeg kopierer filen over i mit childtheme-bibliotek. Og en masse andet bliver også "styret" fra denne fil, hvorfor jeg havde håbet at der ikke skulle rodes med den.
Avatar billede keysersoze Guru
01. juni 2020 - 20:20 #7
Det kan stadig godt være at der bliver sendt nogle events afsted du kan lytte på - ellers kan du prøve at kigge på https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





CIO
Årets CIO 2022: Nu skal Danmarks dygtigste CIO findes - er det dig? Eller kender du en, du vil indstille?