Delay co drugie kliknięcie :: 4programmers.net

ZeuberO

2022-01-17 19:09

ZeuberO2022-01-17 19:09

Rejestracja:ponad 5 lat
Ostatnio:ponad rok
Lokalizacja:Kraków
Postów:43

Cześć, robię menu na stronę i przez jego specyfikę potrzebuję dodać display: none do footera podczas gdy menu jest otwarte. Animacja menu trwa 0.4s więc jak menu zaczyna wjeżdżać na stronę potrzebuję opóźnić display: none o 0.4s a w momencie gdy menu się zamyka potrzebuję, aby nie było tego dealeya 0.4s bo widać pustą stronę do momentu aż menu się nie zamknie.

Czy da się jakoś zrobić delay co drugie kliknięcie dodając coś do tego mojego js czy lepiej zrobić funkcję, która sprawdza jaka jest ustawiona klasa button class="hambuger" czy button class="hamburger.is-active"

Kopiuj

        <button class="hamburger" onclick="window.scrollTo({ top: 0, behavior: 'smooth' }); display_delay();">
            <div class="bar"></div>
        </button>

Kopiuj

            function display_delay(){
                setTimeout(() => {
                document.getElementById('ft_display').style.display = document.getElementById('ft_display').style.display == 'none' ? 'block' : 'none';
                }, 400);
            };

Dla podglądu dodaje ss z tego jak wygląda kod przy zamkniętym i otwartym menu.

menu_off.PNG (36 KB) - ściągnięć: 9
menu_on.PNG (46 KB) - ściągnięć: 5

Haskell

2022-01-17 19:31

~~Haskell~~2022-01-17 19:31

Rejestracja:ponad 9 lat
Ostatnio:11 miesięcy
Postów:4700

ZeuberO napisał(a):

czy lepiej zrobić funkcję, która sprawdza jaka jest ustawiona klasa button class="hambuger" czy button class="hamburger.is-active"

tak

Gouda105

2022-01-17 19:33

Gouda1052022-01-17 19:33

Rejestracja:ponad 7 lat
Ostatnio:7 dni
Postów:487

@ZeuberO: Musisz mieć jakąś flagę, która powie Ci, czy menu jest wyświetlane czy nie. Możesz używać w tym przypadku albo wartości CSS albo klasy, ale moim zdaniem lepiej zrobić to za pomocą zmiennej. HTML/CSS nie służą do przechowywania informacji. Tak więc tworzysz sobie zmienną menuFlag, której początkowo nadajesz wartość np. false (jeśli domyślnie menu ma być schowane). Następnie w funkcji display_delay sprawdzasz wartość tej flagi. Jeśli jest false (menu jest schowane), uruchom odpowiedni kod z timeout, jeśli true (menu jest wyświetlane) - uruchom bez timeout.

Możliwe, że mamy tutaj do czynienia z problemem XY. Możliwe, że Twój problem da się rozwiązać przy pomocy samego CSS. Pokaż więcej kodu, opowiedz dlaczego footer trzeba chować to może znajdziemy jakieś inne rozwiązanie.

edytowany 1x, ostatnio: Gouda105 2022-01-17 19:35

ZeuberO

2022-01-17 19:54

ZeuberO2022-01-17 19:54

Rejestracja:ponad 5 lat
Ostatnio:ponad rok
Lokalizacja:Kraków
Postów:43

@Gouda105: Przerabiam stare menu na bardziej rozbudowane. Problemem tego menu jest fakt, że do prawidłowego działania potrzebne jest mu position: fixed a do mojego zastosowania potrzebuję position: absolute ze względu że po wybraniu kafelka będzie się otwierała lista podkategorii a w position: fixed wszystko co jest poniżej 100vh nie zobaczymy bo się nie da przesunąć w dół (overflow nie działa), a footer dla tego potrzebuję wyłączyć bo przy position: absolute wygląda to tak

Chyba, że da się jakoś ograniczyć wysokość strony do tego co określa <nav class="mobile-nav is-active"> a wszystko poniżej zostaje usunięte/wyłączone

Tak prezentuje się css

Kopiuj

.hamburger
{
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 20px;
    position: relative;
    display: block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 99;

    appearance: none;
    background: none;
    outline: none;
    border: none;
}
.hamburger .bar, .hamburger::after, .hamburger::before
{
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin: 6px 0px;
    transition: 0.4s;
}
.hamburger.is-active::before
{
    transform: rotate(-45deg) translate(-7px, 6px);
}
.hamburger.is-active::after
{
    transform: rotate(45deg) translate(-6px, -6px);
}
.hamburger.is-active .bar
{
    opacity: 0;
}
.mobile-nav
{
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    min-height: 100vh;
    display: block;
    z-index: 98;
    background-color: rgba(10, 10, 10);
    transition: 0.4s;
}
.mobile-nav ul
{
    display: flex;
    flex-wrap: wrap;
    padding-top: 150px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.mobile-nav li
{
    width: 50%;
    list-style: none;
    display: flex;
    justify-content: center;
}
.mobile-nav.is-active
{
    left: 0;
    position: absolute;
}
.mobile-nav a 
{
    display: flex;
    width: 100%;
    max-width: 260px;
    height: 80px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 10px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    text-align: center;
    padding: 8px 16px;
    background-color: #323232;
    border-radius: 8px;

    color: #fff;
    text-decoration: none;
}
.mobile-nav a i
{
    font-size: 22px;
    padding-bottom: 5px;
}
.mobile-nav li:last-child
{
    width: 100%;
}
.mobile-nav li:last-child a
{
    max-width: 100%;
}
.mobile-nav a:hover
{
    background-color: #cc0000;
}

obraz_2022-01-17_205103.png (15 KB) - ściągnięć: 6

Gouda105

2022-01-17 20:43

Gouda1052022-01-17 20:43

Rejestracja:ponad 7 lat
Ostatnio:7 dni
Postów:487

@ZeuberO: Prawidłowe funkcjonowanie to jakie, a jakie jest Twoje zastosowanie?
Słabo opisałeś problem nie do końca wiem co chcesz osiągnąć. W dodatku screenshot jest dziwnie przycięty i połowę menu tylko widać.

ZeuberO

2022-01-17 20:55

ZeuberO2022-01-17 20:55

Rejestracja:ponad 5 lat
Ostatnio:ponad rok
Lokalizacja:Kraków
Postów:43

@Gouda105: Jak otworzysz menu to będziesz miał do wyboru kafelki, większość z nich od razu będzie przekierowywało do danej strony, lecz problem się zaczyna z ilością podstron, które ma teamspeak3. jeżeli menu ma position: fixed i otworzę zakładkę teamspeak3 to ilość podstron do wyświetlenia przewyższa 100vh (852px) i nie działa overflow bo menu jest przyklejone do ekranu, dlatego potrzebuję position: absolute, żeby można było scrollować menu w dół. Dodaje ss podglądowe (drugie menu z listą jest jeszcze nie zrobione więc daje jak wygląda menu normalne, nie mobilne) Menu 100vh.PNG Menu 100vh po zjechaniu na dół.PNG ilość podstron teamspeka3.PNG

Menu 100vh.PNG (25 KB) - ściągnięć: 7
Menu 100vh po zjechaniu na dół.PNG (23 KB) - ściągnięć: 6
ilość podstron teamspeka3.PNG (141 KB) - ściągnięć: 6

edytowany 1x, ostatnio: ZeuberO 2022-01-17 20:58

Gouda105

2022-01-17 20:58

Gouda1052022-01-17 20:58

Rejestracja:ponad 7 lat
Ostatnio:7 dni
Postów:487

@ZeuberO: Myślałeś nad overflow-y: scroll?

Zobacz pozostałe 3 komentarze

Xarviel 2022-01-17 21:00

ustaw jeszcze jakieś max-height: 100vh;, żeby pojawił się suwak

Gouda105 2022-01-17 21:01

Nie da się nim ruszać pewnie dlatego, że elementy wewnątrz nie przekraczają wysokości rodzica.

ZeuberO 2022-01-17 21:03

Faktycznie, zgubiłem gdzieś w css height, teraz jak dodaje to wszystko działa :D

Xarviel 2022-01-17 21:04

to git ;)

Gouda105 2022-01-17 21:06

Czyli problem rozwiązany. Liczę na docenienie mojej odpowiedzi przez ptaszka obok lub like.

Liczba odpowiedzi na stronę

Treść *

Treść

Podgląd

Kliknij, aby dodać treść...

Kliknij, aby dodać załącznik lub wklej ze schowka.

Instrukcja obsługi Markdown

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj underline.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, , , <kbd>, <del>, , <dfn>, <pre>, <blockquote>, <hr/>, ,  oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H2O i m2 otrzymasz: H₂O i m².

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript document.write('Hello World'); ```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

Alt+L - zaznaczenie całej linii
Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

Ctrl+Enter - dodaj post
⌘+Enter - dodaj post (MacOS)

Delay co drugie kliknięcie

ZeuberO

Haskell

ZeuberO napisał(a):

Gouda105

ZeuberO

Gouda105

ZeuberO

Gouda105

Smileys & People

Animals & Nature

Food & Drink

Travel & Places

Activities

Objects

Symbols

Typografia

Linki

Wewnętrzne odnośniki

Wspomnienia użytkowników

Znaczniki HTML

Skróty klawiszowe

Indeks górny oraz dolny

Składnia Tex

Kod źródłowy

Krótkie fragmenty kodu

Kod wielolinijkowy

Tabelki

Lista uporządkowana i nieuporządkowana

Składnia Markdown

Skróty klawiszowe

Java Developer

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami