NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:5.3.2014 9:54

Ahoj, v pravidelné minisoutěži o placku a samolepky budeme tento týden tvořit navigační menu. Teď půjde hlavně o dobrý nápad. Vymyslete a naprogramujte jednoduché navigační menu pomocí JavaScriptu. Fantazii se meze nekladou, mělo by být určitě interaktivní, jako třeba navigační menu zde na Devbooku od Drahoše. Hodnotit budu jak menu vypadá a jak se s ním pracuje.

Čas si dejme jako vždy do pondělí 10.3. do 10:00. Kompletní pravidla soutěží jsou zde: http://www.itnetwork.cz/…outezi-machr

Editováno 7.3.2014 11:03
Odpovědět
5.3.2014 9:54
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:5.3.2014 10:20

Paráda... :)

Nahoru Odpovědět
5.3.2014 10:20
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jurajs
Člen
Avatar
Jurajs:5.3.2014 12:58

Ahojte, můžu použít Jquery? Nebo to musí být čistě Javascript?

 
Nahoru Odpovědět
5.3.2014 12:58
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Jurajs
Matyáš Procházka:5.3.2014 15:02

Většinou v machrech můžeš JQ použít, ale neříkám ti to na 100%, nejsem autor soutěže. ;)

 
Nahoru Odpovědět
5.3.2014 15:02
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Jurajs
Libor Šimo (libcosenior):5.3.2014 16:47

Jquery je sucast serialu o javascripte, takze urcite sa moze pouzit.

Nahoru Odpovědět
5.3.2014 16:47
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Michael Olšavský
Tvůrce
Avatar
Odpovídá na David Hartinger
Michael Olšavský:5.3.2014 21:06

Tak to uvidíme, zda se zůčastním. :) Nevím jestli něco vymyslím.

PS: Nemohl by příští machr být zase třeba na algoritmy nebo OOP? :) rád bych se už něčeho zůčastnil, ale buďto nemám čas nebo moje fantazie v tomto případě stagnuje :D

 
Nahoru Odpovědět
5.3.2014 21:06
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Michael Olšavský
Michal Žůrek - misaz:5.3.2014 21:08

sdraco se teď věnuje webovým technologiím :) Ale taky bych rád něco jiného třeba Javu abych si ji zase zopakoval (a trénoval své nervy).

 
Nahoru Odpovědět
5.3.2014 21:08
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:5.3.2014 21:10

Když je soutěž do pondělí 10:00 tak začneme v pondělí v 00:01, co myslíte hoši? :D

Nahoru Odpovědět
5.3.2014 21:10
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:5.3.2014 21:11

jo to půjde.

To je pro nás tak akorát, tobě bude stačit začít 9:58.

Editováno 5.3.2014 21:12
 
Nahoru Odpovědět
5.3.2014 21:11
Avatar
Michael Olšavský
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Michael Olšavský:5.3.2014 21:14

Však ať je to třeba v JS :D hlavní je to zadání. Tohle mě jednoduše nebaví. :/ :)

 
Nahoru Odpovědět
5.3.2014 21:14
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:5.3.2014 21:29

Už mám vymyšlené takové jednoduché meníčko... :)

Nahoru Odpovědět
5.3.2014 21:29
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:5.3.2014 21:33

však já taky :D konečně mě něco napadlo :)

 
Nahoru Odpovědět
5.3.2014 21:33
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:5.3.2014 21:35

Placku na JS ještě nemám, takže vám jí seberu před nosem... :D

Nahoru Odpovědět
5.3.2014 21:35
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:5.3.2014 21:38

Jen počkej (zajíci) Bittnere. :D

 
Nahoru Odpovědět
5.3.2014 21:38
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:5.3.2014 21:44

No co, žlutá se mi přestala líbit... :)

Správný muž má rád růžovou! :D

Editováno 5.3.2014 21:44
Nahoru Odpovědět
5.3.2014 21:44
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:5.3.2014 21:49

Už jenom za tenhle komentář bych ti ji nedal :D

Nahoru Odpovědět
5.3.2014 21:49
Neaktivní uživatelský účet
Avatar
Matyáš Procházka
Člen
Avatar
Matyáš Procházka:5.3.2014 21:54

Tak zde je můj výtvor, co jsem, tak nějak rychle udělal. Netušim, zda ve zbytku týdne bude čas, tak ať tu něco mám :D

Krátky popisek:
Postranní vysunovací menu s automatickým scrollovaním po kliknutí používající Jquery. Scrollování je objektové a na stránce jich můžete mít neomezeně mnoho a ani nemusí být odkazy v menu, ale kdekoli na stránce. Více již v samotném souboru.

http://leteckaposta.cz/641383260

 
Nahoru Odpovědět
5.3.2014 21:54
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matyáš Procházka
Honza Bittner:5.3.2014 21:58

Jestli myslíš "Scrollování je objektové " jako OOP, tak kde? :P

Nahoru Odpovědět
5.3.2014 21:58
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Honza Bittner
Matyáš Procházka:5.3.2014 22:07

Jakože tam stačí napsat jen atribut s hodnotou a funguje to a nemusíš nikde nestavovat na jakou top position se scrollne... :D

Editováno 5.3.2014 22:07
 
Nahoru Odpovědět
5.3.2014 22:07
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matyáš Procházka
Honza Bittner:5.3.2014 22:08

Jasně, to je možná super, ale není to objektové... :D

Nahoru Odpovědět
5.3.2014 22:08
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Honza Bittner
Matyáš Procházka:5.3.2014 22:10

Jo jo :D Ale každej snad pochopí, jak jsem to myslel. Prostě můžeš tam mít nekonečně scroll odkazů a vždy budou fungovat :D

 
Nahoru Odpovědět
5.3.2014 22:10
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Matyáš Procházka
Ondřej Štorc:5.3.2014 22:14

Vypadá to hezky jen bych si dovolil upozornit na to že nedodržuješ toto pravidlo:

Budou zabaleny do archivu zip, který bude pojmenovaný podle autorovy přezdívky zde na devbooku.
Nahoru Odpovědět
5.3.2014 22:14
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Ondřej Štorc
Matyáš Procházka:5.3.2014 22:28

Díky za upozornění, nějak mi to vypadlo.. Jsem na mobilu, tak to zítra předělám ;)

Chvíli mi trvalo než mi došlo, cos psal :D jak jsem na mobilu, tak on má ten "code text" jako jesen dlouhej řádek, kterej se pak usekne a není dál vidět a ono se to useklo přesně u "bude pojmenovaný" :D tak jsem tak jako přemýšlel, cos tim chtěl říct :D

 
Nahoru Odpovědět
5.3.2014 22:28
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Ondřej Štorc
Uživatel sítě :5.3.2014 23:20

Já tedy nevím, vždy jsem posílal dle jména projektu který jsem dělal a sdraco mi to vzal. Tím ovšem neříkám ať to nedodržuje. Někdy to prostě může vytknout.. :)

Nahoru Odpovědět
5.3.2014 23:20
Chybami se člověk učí, běžte se učit jinam!
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Michal Žůrek - misaz:6.3.2014 6:28

Ano to je úplně totéž, jako když se řešení raruje místo zipuje. Sdraco Vám to vezme i když to byť jen mírně nesplňuje pravidla. V podstatě mu stačí řešení v nějakém rozbalitelném formátu ideálně pojmenované nickem, protože když je tu pak 15 řešitelů se v tom hrozně ztrácí (ostatně kdo ne).

Nejednoduší máte když si před uploadem ty pravidla pročtete znova a vše zkontrolujete, vše v pravidlech má důvod a není třeba to porušovat (byť třeba to není záměrné).

 
Nahoru Odpovědět
6.3.2014 6:28
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na David Hartinger
Ondrca:6.3.2014 14:48

Ahoj, vím, že je to machr na JS, ale bude to stačit jenom html+css?

Nahoru Odpovědět
6.3.2014 14:48
Zase jsem o něco chytřejší
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Ondrca
Michal Žůrek - misaz:6.3.2014 14:50

můžeš zkusit, ale asi to nebude moc funkční.

 
Nahoru Odpovědět
6.3.2014 14:50
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:6.3.2014 14:50

Proč by nebylo???

Nahoru Odpovědět
6.3.2014 14:50
Zase jsem o něco chytřejší
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Ondrca
Michal Žůrek - misaz:6.3.2014 14:53

neuděláš ani to co je na devbooku, protože když odjedeš myší, tak se ti to vrátí na začátek. A představa je (teda pokud chceš obstát třeba HoBimu) že to bude trochu robustnější.

 
Nahoru Odpovědět
6.3.2014 14:53
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:6.3.2014 14:57

To sice ano, ale funkční to bude. (Ještě dostat nějaký nápad)

Nahoru Odpovědět
6.3.2014 14:57
Zase jsem o něco chytřejší
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:6.3.2014 15:09

Btw. nefunguje ti odkaz na pravidla.

 
Nahoru Odpovědět
6.3.2014 15:09
Avatar
Matěj↓Andrle
Člen
Avatar
Matěj↓Andrle:7.3.2014 8:56

Původně jsem chtěl aby to při pádu různě skákalo, ale nakonec si říkám - přeplácat to nemá smysl....

http://leteckaposta.cz/204968103

Ukázka:

http://menu.lerainsoft.eu

 
Nahoru Odpovědět
7.3.2014 8:56
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Matěj↓Andrle
Uživatel sítě :7.3.2014 9:42

Pěkný nápad.. :)

Nahoru Odpovědět
7.3.2014 9:42
Chybami se člověk učí, běžte se učit jinam!
Avatar
Matěj↓Andrle
Člen
Avatar
Odpovídá na Uživatel sítě
Matěj↓Andrle:7.3.2014 9:52

Děkuji, bohužel jediná věc mi unikla - snad to opravím - ono za takovou dobu... :D

 
Nahoru Odpovědět
7.3.2014 9:52
Avatar
Matěj↓Andrle
Člen
Avatar
Matěj↓Andrle:7.3.2014 11:11

Opraveno:

http://leteckaposta.cz/150362867

Šlo o souběh 2 expandujících menu - pořešeno takto:

if(!fallInterval[index])
{
        if(beforeIndex && !fallInterval[beforeIndex])
                initializeMoreFall(beforeIndex);

        clearInterval(expandInterval);
}

Brrr - toliko větvení na jednom místě... :D

 
Nahoru Odpovědět
7.3.2014 11:11
Avatar
Matěj↓Andrle
Člen
Avatar
Matěj↓Andrle:7.3.2014 11:23

Omlouvám se, ještě drobnost - už nepošlu celý kód:

nav.children[0].children[index].onclick = nav.children[0].children[index].onmouseover = function(){submenu(value);};

Když je tam ta zmíňka o intuitivnosti - tak jsem dal ještě hover... (click využijete, když přejedete nad položkou, kteřážto ještě padá - vyjet může až když dopadne...)

Editováno 7.3.2014 11:24
 
Nahoru Odpovědět
7.3.2014 11:23
Avatar
Rostislav Křídlo
Člen
Avatar
Rostislav Křídlo:7.3.2014 11:41

http://lab.hakim.se/meny/

Tenhle týpek by si zasloužil placku :D

Nahoru Odpovědět
7.3.2014 11:41
MiracleSoft! www.miraclesoft.com
Avatar
Matěj↓Andrle
Člen
Avatar
Odpovídá na Rostislav Křídlo
Matěj↓Andrle:7.3.2014 11:47

A kde je to JS? Jako udělat panel a ten na hover nechat vyjet??? Kreativní... :D

 
Nahoru Odpovědět
7.3.2014 11:47
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Rostislav Křídlo
David Hartinger:7.3.2014 11:51

Tenhle týpek má vůbec husté věci koukám.

Nahoru Odpovědět
7.3.2014 11:51
New kid back on the block with a R.I.P
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:8.3.2014 23:47

Jako ten hakim je fakt borec :D. A baj očko, Matšj Andrle, našel jsem chybu. Ve funkčnosti. Po pár kliknutích už když kliknu na menu tak odjíždí ani nestihnu přečíst text.

Nahoru Odpovědět
8.3.2014 23:47
Však ono půjde ...
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Matěj↓Andrle
Matyáš Procházka:8.3.2014 23:56

Pěkný nápad a provedení (y). Jen malá technická poznámka. Když přejedu rychle přes tři sekce tam a pak zpátky (přes první přes druhou na třetí a zpátky přes druhou a přes první), tak se jedna sekne a poskakuje nahoru dolu. A čim víckrát na tu sekci pak najedu, tím větší jsou to skoky. :D

 
Nahoru Odpovědět
8.3.2014 23:56
Avatar
Matěj↓Andrle
Člen
Avatar
Odpovídá na Matyáš Procházka
Matěj↓Andrle:9.3.2014 6:05

Vím o tom - je to prosté, stíháš to tak v mezidobí - hromadíš intervaly. A já právě nevím co s tím... Jako při normálním zacházení je to ohandlované - vážně musím řešit nadsvětelné pohyby myši? :D

 
Nahoru Odpovědět
9.3.2014 6:05
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Matěj↓Andrle
Zdeněk Pavlátka:9.3.2014 6:52

Jo musíš, lidi sou blázniví (tím nemyslím nikoho tady, tady se testuje ;) )

Nahoru Odpovědět
9.3.2014 6:52
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
David Hynek
Tvůrce
Avatar
Odpovídá na Matěj↓Andrle
David Hynek:9.3.2014 7:52

a co každému menu přiřadit proměnou, do které se uloží stav aktivace. A v případě, že je "aktivní", nebude se moci znovu otevřít. Jinak se mi tvé řešení moc líbí.. :)

Nahoru Odpovědět
9.3.2014 7:52
Čím víc vím, tím víc věcí nevím.
Avatar
Matěj↓Andrle
Člen
Avatar
Odpovídá na David Hynek
Matěj↓Andrle:9.3.2014 8:07

Děkuji. Spíše vysvětli jak se může zaseknout tak, že pendluje nahoru i dolů. Vždyť nahoru mi to nikdy nejde - proto se mi to nedaří opravit - nevím, kde se bere pohyb nahoru...

 
Nahoru Odpovědět
9.3.2014 8:07
Avatar
Matěj↓Andrle
Člen
Avatar
Odpovídá na David Hynek
Matěj↓Andrle:9.3.2014 8:57

Ošetřeno - otestuje prosím... :D Vyřešil jsem to vymazáním intervalu před jeho novým nastavením...

 
Nahoru Odpovědět
9.3.2014 8:57
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Matěj↓Andrle
Matyáš Procházka:9.3.2014 10:36

Už to krásně funguje :)

 
Nahoru Odpovědět
9.3.2014 10:36
Avatar
Matěj↓Andrle
Člen
Avatar
Odpovídá na Matyáš Procházka
Matěj↓Andrle:9.3.2014 10:53

Pak tedy posílám snad již plně funkční verzi:

http://leteckaposta.cz/449264684

 
Nahoru Odpovědět
9.3.2014 10:53
Avatar
Petr Gürth
Tvůrce
Avatar
Petr Gürth:9.3.2014 14:23

Ahoj, taky jsem se pokusil něco vymyslet :)
https://db.tt/kpxBNNrx
Online: http://girtas.aspone.cz/…u/index.html

 
Nahoru Odpovědět
9.3.2014 14:23
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:9.3.2014 16:18

Ahoj,
tak já (ačkoliv to bylo dost o život) přidávám svůj výtvor. Asi jsem se zamiloval do 100% kulatých věcí, takže i toto je 100% kulaté. Programoval jsem to v bojových podmínkách mimo domov (čti bez Full HD monitoru, v oblasti až příliš hlasitých dětí, překřikujících televizi) no a co se dá čekat, tak jsem musel bojovat se sin a cos. Ačkoliv nás to učitel v matice učli, tak mi v tom akorát udělal větší bordel. Dobře jsem to splácal asi hned na pátý pokus, ale to že to musím převést na radiány mě napadlo až po 5ti hodinách čumění do ničeho. No aspoň vím na příště. Pak jsem se ještě hádal s animationDelay a v tu chvíli jsem pochopil proč je toho tolik ještě označejo jako Working Draft. Ono totiž není jednoduché nastavit co se stane před samotnou animací (když je v delay). Jako řešení tohoto problému by se mi líbilo něco jako:

@keyframes AnimationName {
    delay {
        // styles
    }
    0% {
        // styles
    }
    // ...
    100% {
        // styles
    }
}

Btw. Nevíte někdo jak jim to navrhnout?

Download: http://misaz.moxo.cz/…ial-menu.zip
Online: http://misaz.moxo.cz/…ok/machr1410

 
Nahoru Odpovědět
9.3.2014 16:18
Nejnovější komentáře jsou na konci poslední stránky.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 50 zpráv z 73.