Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [Java][CSS][JavaScript]Dodanie klasy do body przy rozwiniętym menu
zafon
post 15.02.2018, 16:29:22
Post #1





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 14.07.2017

Ostrzeżenie: (0%)
-----


Witam jak w temacie, chciałbym dodać do body klasę która zablokuje przewijanie strony, dodałem taki kod, ale niestety nie działa ;/

CODE
$(document).ready(function(){
if ( $('.navbar-collapse.justify-content-end.collapse').hasClass('show') ) {
$('body').addClass('blokowaniestrony');
}
});


tak wygląda klasa z rozwiniętym menu :
<div class="navbar-collapse justify-content-end collapse show">
a tak ze zwiniętym
<div class="navbar-collapse justify-content-end collapse ">

chciałbym aby w

body
pojawił sie element
overflow: hidden;

a kiedy toggler się zwinie klasa znikneła lub została nadpisana
visible

Dzięki za pomoc
Go to the top of the page
+Quote Post
trueblue
post 15.02.2018, 16:33:27
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


To tam gdzie zwijasz/rozwijasz toggler, nadawaj/odejmuj klasę dla <body>.


--------------------
Go to the top of the page
+Quote Post
zafon
post 15.02.2018, 18:31:44
Post #3





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 14.07.2017

Ostrzeżenie: (0%)
-----


Kurcze nie bardzo wiem jak to wykonać - czy mógłbyś pokazać kod jak powinien wyglądać?
Go to the top of the page
+Quote Post
trueblue
post 15.02.2018, 18:43:06
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


http://api.jquery.com/toggleclass/
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/


--------------------
Go to the top of the page
+Quote Post
zafon
post 16.02.2018, 13:22:46
Post #5





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 14.07.2017

Ostrzeżenie: (0%)
-----


Kurcze dodałem taki skrypt ale wogóle nie jest on wczytywany ;/

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. $("button.navbar-toggler").click(function(){
  3. $("page-template").css({"overflow":"hidden"});
  4. });
  5. });
[JAVASCRIPT] pobierz, plaintext


Powinno zadziałać tak,że kiedy klikniemy na button navbar-toggler to <body class="page-template"> dostaje overflow:hidden

Dlaczego skrypt się nie wczytuje?
Go to the top of the page
+Quote Post
trueblue
post 16.02.2018, 13:27:09
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Bo selektor klasy to .klasa, a nie klasa.


--------------------
Go to the top of the page
+Quote Post
zafon
post 17.02.2018, 13:45:42
Post #7





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 14.07.2017

Ostrzeżenie: (0%)
-----


Ok udało się zrobić a kod prezentuje się tak
[JAVASCRIPT] pobierz, plaintext
  1. jQuery(document).ready(function( $ ){
  2. $(".navbar-toggler").click(function() {
  3. $('body').toggleClass('modal-open');
  4. });
  5. });
[JAVASCRIPT] pobierz, plaintext


Musiałem użyć
[JAVASCRIPT] pobierz, plaintext
  1. jQuery(document).ready(function( $ ){
[JAVASCRIPT] pobierz, plaintext

Wykorzystałem klase modal-open, która wykonuje dokładnie to czego potrzebowałem a czy można dodać do toggleClass style css?
aby zadziałał on w Wordpresie.
Pozdrawiam.

Ten post edytował zafon 17.02.2018, 13:46:47
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.03.2024 - 07:36