JavaScript - automatizované menu se Záložkama na stránce

Tazatel

Jsem zaátečník v JS a chtěl bych si udělat takovou komponentu.

Jednalo by se o takový automatizovaný bookmarkovač. O co jde. Jednoduše si Javascriptem načtu všechny h1, h2, h3, atd. elementy na stránce, nastrkám je do nějakého meho custom CSS elemntu
<bookmarkbar>, udělím jim custom css takto:

bookmarkbar h1 {
  // zmensim font atp.
}

bookmarkbar h2 {
  // zmensim font atp.
}

Při kliknutí na něco v tom bookmarkbaru se na ten element automaticky nascrolluje, a zaroven, pokud bude uzivatel na strance scrollovat rucne, budou se v tom bookmarkbaru automaticky aktivovat prislusne elementy, takze to bude takové interaktivní.

A ted proc se na to vubec ptam:

1. Neexistuje uz neco takoveho, at to nedelam zbytecne?
2. Pokud to neexistuje, jak je mozne, ze to neexistuje? Jedna se prece o v podstate standardni vec pro generovani Obsahu, ktera už existuje dobrých 20 let přinejmenším v MS Office. A HTML je textový dokument, tak to prece melo existovat.


Tazatel

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #1 kdy: 15. 07. 2018, 17:37:04 »
Tak nic, už to nepotřebuju, našel jsem lepší řešení:

1. Udělám HTML záložky na začátek dokumentu
2. Kliknu na záložku, tím mi stránka skočí na nadpis na stránce.
3. Vidím, jaká záložka je aktivní, protože dpč. mám tam přece ten nadpis.
4. Když se chci vrátit zpět na menu se záložkama, kliknu na tlačítko zpět.

Hotovo. Geniální.

Lol Phirae

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #2 kdy: 15. 07. 2018, 17:51:49 »
Tak kdyby to potřeboval někdo jiný: https://tscanlin.github.io/tocbot/

Tazatel

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #3 kdy: 15. 07. 2018, 20:38:02 »
Tak kdyby to potřeboval někdo jiný: https://tscanlin.github.io/tocbot/

Jak jsi to našel?

gll

  • ****
  • 429
    • Zobrazit profil
    • E-mail
Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #4 kdy: 15. 07. 2018, 20:54:54 »
Tak kdyby to potřeboval někdo jiný: https://tscanlin.github.io/tocbot/

Jak jsi to našel?

zkus zadat do google "browser extension table of contents"


ET

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #5 kdy: 15. 07. 2018, 23:38:39 »
mozna by se dal pouzit scrollspy z BS4? (https://getbootstrap.com/docs/4.1/components/scrollspy/)

Tazatel

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #6 kdy: 18. 07. 2018, 09:59:06 »
Zkousel jsem toho Tocbota a je to tragedie. TO je Javascript v krystalicke podobe.

1. Funguje to nad HTML zalozkama, ale url v prohlizeci si to precist neumi, takze to neposune na spravny radek. Uz to je duvod k tomu, proc je to nepouzitelny krap, je to v konfliktu s elementarni HTML funkci

2. Nejsou tam vystavene zadne Tocbot eventy, nebo nejake customizacni metody, napr. pro vlastni vykresleni vystupu pro jednotlive polozky v seznamu. Proste tam neni nic. Nedela to jednu vec a to poradne.

Naprosty krap. To je proste typicka javascriptova knihovna.

Lol Phirae

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #7 kdy: 18. 07. 2018, 10:15:54 »
1. Funguje to nad HTML zalozkama, ale url v prohlizeci si to precist neumi, takze to neposune na spravny radek. Uz to je duvod k tomu, proc je to nepouzitelny krap, je to v konfliktu s elementarni HTML funkci

Naprosty krap. To je proste typicka javascriptova knihovna.

Já ti nevím, ale jak koukám na ten web, kde to je samozřejmě použito, tak žádný takový problém nepozoruju... To asi bude rukama.  ::)

cinnamon

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #8 kdy: 18. 07. 2018, 13:39:49 »
Zkousel jsem toho Tocbota a je to tragedie. TO je Javascript v krystalicke podobe.

1. Funguje to nad HTML zalozkama, ale url v prohlizeci si to precist neumi, takze to neposune na spravny radek. Uz to je duvod k tomu, proc je to nepouzitelny krap, je to v konfliktu s elementarni HTML funkci

2. Nejsou tam vystavene zadne Tocbot eventy, nebo nejake customizacni metody, napr. pro vlastni vykresleni vystupu pro jednotlive polozky v seznamu. Proste tam neni nic. Nedela to jednu vec a to poradne.

Naprosty krap. To je proste typicka javascriptova knihovna.

Dívám se, že naprosty krap se anglicky řekne: Highly Customizable Table Of Contents Generator

Tazatel

Re:JavaScript - automatizované menu se Záložkama na stránce
« Odpověď #9 kdy: 18. 07. 2018, 13:59:53 »
Už ty záložky v odkazech fungují. Nicméně přísahám, že ještě včera mě zarazilo, že mi přesun na záložku na stránce z url odkazu nefunguje a ověřil jsem si, že to nefungovalo ani u Tocbota. Dneska už to funguje. Takže něco tam hold hapruje.