Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript] Przechwycenie wartości zmiennej, po zdarzeniu
stellatus
post 29.03.2020, 12:47:00
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

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


Na stronie https://www.freuciv.com/ po naciśnięciu na przycisk "Tags" wysuwa się flyout z suwakiem. Chciałym, żeby po wykryciu suwaka szerokość flyouta została zwiększona o 300px. Napisałem więc taki skrypt:

Kod
function changeFlyoutSize() {
    const flyoutWrap = document.querySelector("div.facetwp-flyout-wrap")
    let a = flyoutWrap.offsetHeight
    let b = flyoutWrap.scrollHeight
    let widthStep = 300
    if (b > a) {
        let flyoutWidth = 300 + widthStep + "px"
        document.querySelector(".facetwp-flyout.active").style.width = flyoutWidth
        widthStep = widthStep + 300
    }
    console.log(b)
}
changeFlyoutSize()


Działa dobrze, ale interesuje mnie jeszcze przechwycenie wartości zmiennej "b" po zwiększeniu szerokości flyouta. Skrypt przechwytuje wartość przed zmianą szerokości. Nie wiem dlaczego tak się dzieje. Przecież console.log jest wpisany po warunku. Gdy uruchamiam skrypt ponownie, przechwytywana jest porządana wartość. To jest chyba dobry trop, ale i tak nie mam pomysłu co tu dalej wykombinować.
Go to the top of the page
+Quote Post
trueblue
post 29.03.2020, 12:56:40
Post #2





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

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


A dlaczego miałby przechwytywać po? Przecież do zmiennej "b" zapisałeś wartość przed zmianą szerokości.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 29.03.2020, 13:05:20
Post #3





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

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


Dzięki, racja! Więc wprowadziłem nową zmienną po warunku i efekt jest ten sam:

Kod
function changeFlyoutSize() {
    const flyoutWrap = document.querySelector("div.facetwp-flyout-wrap")
    let a = flyoutWrap.offsetHeight
    let b = flyoutWrap.scrollHeight
    let widthStep = 300
    if (b > a) {
        let flyoutWidth = 300 + widthStep + "px"
        document.querySelector(".facetwp-flyout.active").style.width = flyoutWidth
        widthStep = widthStep + 300
    }
    let bAfterSizeChange = flyoutWrap.scrollHeight
  console.log(bAfterSizeChange)
}
changeFlyoutSize()
Go to the top of the page
+Quote Post
trueblue
post 29.03.2020, 13:47:28
Post #4





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

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


Poprawna wartość będzie dostępna dopiero po zakończeniu transition.
https://developer.mozilla.org/en-US/docs/We...sitionend_event


--------------------
Go to the top of the page
+Quote Post
stellatus
post 29.03.2020, 14:59:26
Post #5





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

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


Czyli po wyłączeniu transition powinno działać, ale nie działa.
Go to the top of the page
+Quote Post
trueblue
post 29.03.2020, 15:07:28
Post #6





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

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


Na podanej stronie nadal jest transition.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 29.03.2020, 15:08:45
Post #7





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

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


Chodziło mi o to, że w devtools można wyłączyć.
Go to the top of the page
+Quote Post
trueblue
post 29.03.2020, 15:13:27
Post #8





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

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


Można to zrobić bez wyłączania wpisując po kolei w konsoli:

Kod
document.querySelector("div.facetwp-flyout-wrap").scrollHeight

Wynik: 3203
Kod
document.querySelector(".facetwp-flyout.active").style.width = "600px"

Kod
document.querySelector("div.facetwp-flyout-wrap").scrollHeight

Wynik: 1617

Ten post edytował trueblue 29.03.2020, 15:13:45


--------------------
Go to the top of the page
+Quote Post
stellatus
post 29.03.2020, 16:55:56
Post #9





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

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


Dzięki, chyba wątek zakończony. Ten ostatni kod jednak działa po wyłączeniu transiton i to mi wystarczy.

Ten post edytował stellatus 29.03.2020, 17:00:27
Go to the top of the page
+Quote Post
trueblue
post 29.03.2020, 17:01:34
Post #10





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

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


A w jaki celu jest ta linijka:
Kod
widthStep = widthStep + 300

?


--------------------
Go to the top of the page
+Quote Post
stellatus
post 29.03.2020, 17:39:42
Post #11





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

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


Sorry, mój błąd, jest niepotrzebna.
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 16.04.2024 - 13:19