| Autor | Zpráva | ||
|---|---|---|---|
| JS_blb Profil * |
#1 · Zasláno: 13. 1. 2021, 20:16:48
Zdravím zdejší znalce! V JS jsem totálně blbý, tak prosím o radu, třeba bude snadná?
Na skrývání menu v mobilním rozlišení používám http://jecas.cz/prepinani-trid - funguje skvěle, jen mi chybí funkcionalita, aby při kliknutí mimo menu se dotyčné zavřelo? Našel jsem jedno více řešení, ale většinu se mi nedaří jako totálnímu JS laikovi implementovat, navíc tam nechci knihovny JQuery (nebo jak se to...). Jediné, co je dostatečně prosté, aby mi to fungovalo je tohle: <script type="text/javascript">
(function () {
"use strict";
var hiddenItems = document.getElementsByClassName('hidden'), hidden;
document.addEventListener('click', function (e) {
for (var i = 0; hidden = hiddenItems[i]; i++) {
if (!hidden.contains(e.target) && hidden.style.display != 'none')
hidden.style.display = 'none';
}
if (e.target.getAttribute('data-toggle')) {
var toggle = document.querySelector(e.target.getAttribute('data-toggle'));
toggle.style.display = toggle.style.display == 'none' ? 'block' : 'none';
}
}, false);
})();
</script>
<a href="javascript:void(0)" data-toggle="#hidden1">Toggle Hidden Div</a>
<div class="hidden" id="hidden1" style="display: none;" data-hidden="true">This content is normally hidden</div>Jenomže to zase neskryje menu, když kliknu přímo na tlačítko/odkaz, kterým jsem ho vyvolal, což je trochu matoucí, dle mého... RESUMÉ: nešla by obě řešení zkombinovat nějak tak, aby výsledkem bylo: při kliknutí na tlačítko se zobrazí menu, při opětovném kliknutí na tlačítko, či kamkoliv jinam mimo, se menu skryje? Vypadá to primitivně, ale pro mě je to neřešitelný koán :-) |
||
| Keeehi Profil |
#2 · Zasláno: 13. 1. 2021, 23:15:37
JS_blb:
Jako základ dobrý, i když pro tvůj problém asi zbytečně složité. Nicméně těžko ti můžeme poradit jak to upravit, když nevíme jak vypadá tvoje stránka. Chtělo by to živou ukázku. |
||
| JS_blb Profil * |
#3 · Zasláno: 14. 1. 2021, 00:13:00
Keeehi:
No ale já to mám prostě jak to leží a běží - tak tedy zde: Živá ukázka (místo toho "This content is normally hidden" mám pochopitelně to menu...) Vše - jak vidno - normálně funguje, jediné, co bych navíc potřeboval, aby se to skrylo i když podruhé kliknu na to tlačítko... A jestli to může být i jednodužší kód? No tak super, sem s ním! |
||
| Keeehi Profil |
JS_blb:
Jako pokud ti jde konkrétně o tuhle ukázku tak se do dá jednoduše zapsat takto. Ovšem nejsem si jistý, že když to vezmeš a přímo to zkopíruješ do nějakého projektu, tak to bude fungovat. Je to dělané přímo na míru tomuto jednoduchému příkladu. Těch možností implementace je samozřejmě spousta. Tuto jsem zvolil jelikož by z ní mělo být celkem jednoduše vidět co se tam kde dělá. |
||
| JS_blb Profil * |
#5 · Zasláno: 14. 1. 2021, 16:11:31
Keeehi:
Vyzkouším zejtra, ale vypadá to jak jsem potřeboval! Tisíceré díky!!! ("Projekt" bude na flash/CD, takže proto jej nemám online.) |
||
| breeta Profil |
Co tohle, nestačí?
Živá ukázka const hidden = document.querySelector('.hidden')
document.addEventListener('click', (e)=> {
if(hidden.style.display === 'none' && e.target.id === 'menu') {
hidden.style.display = 'block'
} else {
hidden.style.display = 'none'
}
}) |
||
| Keeehi Profil |
#7 · Zasláno: 14. 1. 2021, 18:38:34
breeta:
Pokud se skrývá jen jeden element tak určitě. Pro více elementů by se tam musel přidat cyklus na jejich skrytí. Což je ale víceméně drobnost. |
||
| breeta Profil |
#8 · Zasláno: 14. 1. 2021, 20:26:14
Keeehi:
Ano dát querySelectorAll a forEach .... |
||
| JS_blb Profil * |
#9 · Zasláno: 15. 1. 2021, 23:30:39
breeta, Keeehi:
Ještě jednou upřímný hlubosklon a díky oběma! Zatím mi fungují oba skripty všude kde jsem stačil vyzkoušet, jen jsem si prožil horkou chvíli, protože jsem je nejdřív umísťoval do hlavičky - a nic! Ony musí být opravdu umístěny v kódu až ZA html toho tlačítka? Protože jedině tak mi to fachčí... Jako amatér jsem se jakž takž naučil HTML a CSS, ale u toho JS troskotám, to je pro mě španělská vesnice a svévolný shluk písmen! (Svůj pseudonym myslím upřímně :) ) |
||
| Firibix Profil |
Reakce na JS_blba:
„Ony musí být opravdu umístěny v kódu až ZA html toho tlačítka?“ JavaScript se ve webové stránce začne vykonávat ihned, jakmile na něj prohlížeč ve zdrojovém kódu narazí. Pokud ve skriptu chceme pracovat s nějakým elementem (třeba začít naslouchat na událost click nějakého tlačítka, nebo si do proměnné uložit odkaz na elementy se třídou hidden), tak skript musíme umístit až za něj. Jinak v době vykonávání skriptu ten element ještě nebude existovat a nastane chyba.
|
||
| JS_blb Profil * |
Firibix:
Díky, zapisuju za uši - aspoň takovéhle obecnosti jsem schopen rozumět! breeta: Ještě jsem teď zjistil, že ten tvůj kratší kód nefunguje v IE 10... (kolegův jo) |
||
| Keeehi Profil |
#12 · Zasláno: 16. 1. 2021, 01:07:04
Ovšem dá se to udělat i tak, aby ten javascript mohl být na stránce kdekoliv. Stačí mu spuštění "odložit" až do doby kdy bude načtení celá stránka. Jak to udělat? Stejně jako je třeba událost click na tom buttonu, existuje událost ready nad samotnou stránkou. Ta se zavolá až když je stránka celá načtení. V obsluze té události se klidně můžeš odkazovat na jakýkoli prvek na stránce, jelikož už je v té chvíli vytvořen. Zní to sice složitě ale je to vlastně úplně triviální. Prakticky stačí celý kód jen obalit do funkce. Takový kód pak může být umístěn úplně kdekoli protože to tělo té funkce se začne vykonávat až ve správný čas.
document.addEventListener('ready', (e)=> {
const hidden = document.querySelector('.hidden')
document.addEventListener('click', (e)=> {
if(hidden.style.display === 'none' && e.target.id === 'menu') {
hidden.style.display = 'block'
} else {
hidden.style.display = 'none'
}
})
})„Ještě jsem teď zjistil, že ten tvůj kratší kód nefunguje v IE 10... (kolegův jo)“ Ono totiž IE10 prostě nezná některé ty nové vymoženosti co tam Firibix použil. Pokud je potřeba zajistit funkčnost i v takto starém prohlížeči je to samozřejmě možné. Stačí použít ten starší typ zápisu, který sice není tak sexy ale funguje všude. Místo const se použije var, místo (e)=> se použije function (e). Pak možná bude ještě problém s querySelector. Tam se zase dá použít getElementsByClassName(".hidden")[0] Po takové úpravě by to mohlo fungovat i v IE. |
||
| JS_blb Profil * |
#13 · Zasláno: 16. 1. 2021, 01:53:29
Jo, díky - já se budu muset do toho JS taky zakousnout a naučit se to, ale to jde stejně nejlíp zkoumáním těch příkladů. Ještě určitě budu mít později nějaký dotaz, to asi v jiném vlákně, ale když jsme u toho IE10:
Zkoušel jsem mnater.github.io/Hyphenator a funguje i tam, ale na začátku každé stránky (pouze v IE) dělá podivný artefakt tečku a jakoby znak "nepísmenka" tj. malý obdelníček:  - někde jen ten obdelníček.
No a tam už na to absolutně nemám šanci přijít! Asi za to taký může nějaká "vymoženost"... :-) Kdybys tušil, tak dej vědět, díky. |
||
| JS_blb Profil * |
#14 · Zasláno: 16. 1. 2021, 03:19:28
Keeehi:
Ještě detail: potřebuju, aby ten skript fungoval jen při menší šířce pro mobil určené v CSS @media screen and (max-width: 600px), jinak mi při normální šířce způsobí, že všechno je naprosto OK, ale při kliknutí do stránky menu zmizí...
Toho jsem si hned v tom nadšení nevšiml. Dá se to určit přímo v tom scriptu? (Předpokládám, že pomocí CSS vypnout nejde.) Vyřešil jsem to příšerně prasácky, že tam mám to menu dvakrát atd., ovšem to je hrůza! :) Jinak běhá fakt krásně! |
||
| Keeehi Profil |
#15 · Zasláno: 16. 1. 2021, 09:54:34
JS_blb:
„Kdybys tušil, tak dej vědět, díky.“ BOM? „Dá se to určit přímo v tom scriptu?“ Udělal bych to tak, že bych v JavaScriptu kontroloval nějakou vlastnost která se tím media query mění. Tím zjistíš, jestli se ten styl aplikoval nebo ne. A podle toho se zařídíš. Ale zase, bez kódu ti konkrétněji poradit nemůžu. |
||
| JS_blb Profil * |
Keeehi:
Díky. Zkusím to ještě v tomhle vlákně: BOM? Ten, jak to chápu, je vidět ve zdrojáku - já to mám ve výsledku na stránce! Teď jsem ti zkusil dát ukázku a přitom zjistil (připomínám, jedná se o IE10!), že pokud je ten kód přímo vložený ve stránce (a ne v souboru mimo, jako jsem to měl já), tak to nic nedělá! Viz Živá ukázka - ověřeno i na mém of-line webu! Vkládal jsem jej do stránky tímto: <script src="hyphenator/Hyphenator.js" type="text/javascript"></script>
... pak se spouštěl tímto: <sript type="text/javascript">
Hyphenator.config({
displaytogglebox : false, //přepínač na stránce, asi na nic, JEN NA TESTY!
minwordlength : 4 // menší nemá smysl, 6 dělí po dvou slabikách
});
Hyphenator.run();
</script>Tak holt v tom záhlaví asi budu mít kilometr kódu, proč vlastně ne, když to funguje? :-) DOPLNĚNÍ: tak ten odkaz vede nikam, tady je znovu: ukazka! + Tak je to ještě divnější: ten kód, co v ukázce funguje a slova dělí (ač jsem to zkusil jen z hecu, nedoufal jsem), tak na webu mi nejde - je to stejný kód, jen vložený do tagu script. Hned jsem si nevšim. Tak zas nechápu nic...
|
||
|
Časová prodleva: 5 dní
|
|||
| JS_blb Profil * |
#17 · Zasláno: 23. 1. 2021, 13:16:17
JEN KDYBY MĚL NĚKDO PODOBNÝ PROBLÉM: stran toho Hyphenatoru, jak dělal divné znaky, se ukázalo, že když dám třídu, která má určovat na jakém elementu pracuje, místo na
<body> hned na <html lang="cs" class="hyphenate">, tak je to OK.
|
||
|
Časová prodleva: 11 dní
|
|||
| JS_blb Profil * |
#18 · Zasláno: 3. 2. 2021, 20:19:13
Keeehi:
„Ale zase, bez kódu ti konkrétněji poradit nemůžu.“ Ahoj, nevím, jestli se dozvíš, že jsem ještě reagoval, ale dál jsem celou maketu svého zvláštního projektu ke stažení na web, aby to bylo jasnější - je tam vysvětleno i proč takhle online. Furt se mi nepodařilo vyřešit to, aby se JS aplikoval jen u změny wieportu a jinak bylo menu vidět - tak jsem to obešel takovým dost šíleným způsobem! :-) Raděj bych to ale měl "normálněji"... Maketa webu ke stažení. Kdybyste z toho byli kdokoli moudrej, tak budu fakt vděčný! |
||
| Kajman Profil |
#19 · Zasláno: 4. 2. 2021, 00:09:03
Povídání o živých ukázkách » Co živá ukázka není?
Odkaz na zapakovanou stránku uloženou na nějakém skladovacím serveru. |
||
| JS_blb Profil * |
#20 · Zasláno: 4. 2. 2021, 12:51:34
Kajman:
Ale já netrvám na tom, že je to "živá ukázka". Je to jediný způsob jak momentálně jsem schopen poskytnout kód a ukázku celku. Samozřejmě jestli vám to není dost, tak se nedá nic dělat... Škoda, no. |
||
| blaaablaaa Profil |
#21 · Zasláno: 5. 2. 2021, 09:18:03
JS_blb:
Proč je problém umístit to někam na net? Ty chceš od někoho radu, tak bys to měl ostatním, kteří jsou ochotni ti zadarmo pomoct, co nejvíce ulehčit. |
||
| JS_blb Profil * |
#22 · Zasláno: 6. 2. 2021, 07:33:49
blaaablaaa:
Mimo jiné mi šlo o to, že jsem chtěl výsledek funkční především offline – a ony se tam projevují jiné bugy než když je to online (a taky pro amatéra to není jen tak!). Ale budiž, zde živá ukázka! Web živě; a teď jsem teda zvědav! :-) |
||
|
Časová prodleva: 3 roky
|
|||
0