Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Zdravím komunitu, apríl asi již nestihneme, ale jelikož je stále duben, bude minisoutěž na tento týden o placku a nálepky zaměřená právě na žertíky a to v JavaScriptu.

Vymyslete aprílový skript, který se spustí na dané stránce a návštěvníka překvapí. Je to jen na vaší fantazii, vídal jsem třeba že se stránka po chvíli rozsypala, že ji snědl pacman nebo se zrcadlově převrátila. Samozřejmě můžete vymyslet něco úplně nového, žertík, který uživatele zvedne ze židle. Skript by měl být samostatný a mělo by ho stačit do stránky pouze vložit. Nemusí to být nic složitého, jde hlavně o výsledný efekt a aby kód nějak vypadal, nemusí být nutně dlouhý :)

Čas si dejme do pondělí 14.4. do 10:00. Kompletní pravidla soutěží naleznete zde: http://www.itnetwork.cz/…outezi-machr

Odpovědět  +4 9.4.2014 20:56
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 9.4.2014 21:10
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Nahoru Odpovědět 9.4.2014 21:13
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 9.4.2014 21:16
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Nahoru Odpovědět  ±0 9.4.2014 21:24
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

A já na tom naschvál začnu pracovat dříve než ve 3 hodiny ráno! :D

Nahoru Odpovědět  +1 9.4.2014 21:37
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

fajn, tak já jsem hotový. Je tam přibalena ukázka jak by vypadal devbook s tímhle doplňkem. Implementace je jednoduchá, prostě do stránky nalinkujete soubor april.js. Možná si budete muset upravit pole elementů kde se má měnit content.

Online: http://misaz.moxo.cz/…k/machr1415/
Download: http://misaz.moxo.cz/…5--april.zip

Nahoru Odpovědět  +1 9.4.2014 22:41
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 9.4.2014 23:00
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 10.4.2014 15:38
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

no jo když ono retardovaná mozila nechápe innerText je to těžké.

Nahoru Odpovědět 10.4.2014 15:57
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 10.4.2014 15:58
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

ale já tam nechci HTML, ale text. Přeci nebudu obracet HTMl kód?

Nahoru Odpovědět 10.4.2014 15:59
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

Jsem myslel, že to bude stejný, poslední možnost je to udělat přes JQuery, ale to určitě nechceš ani slyšet

Nahoru Odpovědět 10.4.2014 16:02
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

souhlasím s tím že je to poslední možnost. Ještě před ní je možnost použít textContent. Ten v Mozile (kupodivu) funguje.

Nahoru Odpovědět 10.4.2014 16:06
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):

Přidána podporu pro Mozzilu firefox.

Online pořád stejně
Download: http://misaz.moxo.cz/…april--2.zip

Nahoru Odpovědět 10.4.2014 16:08
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Doubek (HAPPY DAY):

je to přeci stránka a tam je všechno HTML

Nahoru Odpovědět 10.4.2014 17:36
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Michal Žůrek (misaz):

jo, ale když převedeš např. src obrázku (ta v innerHTML je), tak ti to nebude funovat vůbec. Stejně tak tam jsou všechny elementy.

Nahoru Odpovědět  +1 10.4.2014 17:45
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Máš to hezké a byla by určitě sranda mít den takovýto devbook... Číst nebo psát tutoriály by byla zábava! :D

Nahoru Odpovědět  +1 10.4.2014 18:37
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:

Takže já se též připojím. Trochu jsem si pohrál s úvodní stránkou Devbooku. Po spuštění mého skriptíku se přehází písmenka v popisu událostí.

Návod na použití - http://www.itnetwork.cz/dev-lighter/349
Kód zkopírovat a na úvodní stránce Devbooku vložit do konzole. Pak stačí jen napsat zertik.init() a pokoušet se číst ;)

Btw, Misaz, nechceš dát šanci jiným ? Ty máš už 2 placky :o :( :D

 
Nahoru Odpovědět 11.4.2014 22:15
Avatar
GreenMan
Redaktor
Avatar
GreenMan:

Tak som si povedal, že by bolo pekné mať do zbierky aj JS splacku a skúsil niečo spáchať. Popri tom som si znova spomenul, že ja a JS kamaráti nikdy nebudeme, ale zvládol som to. :D

Čo robí vám neprezradím hneď, ale skúste pár krát vypnúť hudbu, ktorá tam začne hrať. Stránka môže obsahovať veľa (veľmi veľa) svetlých farieb, preto neodporúčam ľuďom, ktorým blikajúce farby škodia. Nemuselo by to dopadnúť dobre :D

Script nájdete tu: https://dl.dropboxusercontent.com/…ty/script.js
Testoval som to tu, takže si ho môžete pozrieť aj za behu http://www.blue-animag.mablog.eu/?…

Inak ak používate Chrome a chcete tieto scripty otestovať na iných stránkach, odporúčam https://chrome.google.com/…foddeiekllik a vložiť cez neho do stránky príkaz:

$.getScript('https://dl.dropboxusercontent.com/u/38097499/Javascript/unikitty/script.js');

Poprípade iný sciprt, ktorý chcete vyskúšať.

Nahoru Odpovědět  +9 12.4.2014 16:17
Zelená zostane zelenou, aj keď na ňu vyleješ modrú. - Satik64
Avatar
BlugW
Redaktor
Avatar
Odpovídá na GreenMan
BlugW:

Tak tohle mě pobavilo :O :D

Nahoru Odpovědět 12.4.2014 16:29
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Ahoj, tak se také přidám (udělal jsem 2 menší eggy):
vložte do své stránky na začátek souboru buďto:

<script src="http://ondrca.eu/vytvory/easteregg.js"></script>

nebo

<script src="http://ondrca.eu/vytvory/easteregg2.js"></script>

Doufám, že se to bude aspoň trochu líbit ;).
EDIT:
Druhé vajíčko se dá pochopit, první je to, když se klikne na odakz, tak se u každého headeru, divu, sectionu, articlu a u body změní background za mávající kočku.

Editováno 12.4.2014 19:45
Nahoru Odpovědět 12.4.2014 19:43
Zase jsem o něco chytřejší
Avatar
GreenMan
Redaktor
Avatar
Odpovídá na Ondrca
GreenMan:

Myslím, že by sa pri prvom eggu hodilo pri kliknutí na odkaz zrušiť default akciu, aby ťa to nepresmerovala na novú stránku predtým, ako zbadáš mačky.

Nahoru Odpovědět 12.4.2014 20:34
Zelená zostane zelenou, aj keď na ňu vyleješ modrú. - Satik64
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na GreenMan
Ondrca:
  1. Easter egg nemá být tak hodně najitelný, aproto jsem si myslel, že prostě ty kočky zahlídneš a pak po nich začneš pátrat, ale nikde je nenajdeš :D
  2. Chtěl jsem to spozdit, ale neuměl jsem to napsat :D
Nahoru Odpovědět 12.4.2014 20:37
Zase jsem o něco chytřejší
Avatar
Odpovídá na Daniel Vítek
Michal Žůrek (misaz):

nemám důvod, ať se ostatní snaží víc. V reálu jim taky šanci dávat nebudu.

Nahoru Odpovědět  +6 13.4.2014 0:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michael Olšavský:

https://drive.google.com/…bmk2cTA/edit?…

Dal jsem se do toho dnes kolem poledne, moc nestíhám, asi je to finální verze. Vím, že to má pár chybiček. Skript počítá s JQUERY. Stačí jen vložit odkaz do hlavičky webu. Online odkaz na skript: http://www.molsavsky.g6.cz/js/egg.js

Jsou zde dva módy. Jeden automaticky posouvá prvky, u druhého záleží pouze na pohybu myši. Parametr se nastavuje v konstruktoru.

 
Nahoru Odpovědět 13.4.2014 13:16
Avatar
Satik64
Redaktor
Avatar
Satik64:

Rozhodl jsem se taky zúčastnit, přestože javascript je pro mě neznámá oblast a výsledný kód není nic extra (ale vzhledem k mým schopnostem jsem se sebou hodně spokojený :D). Nepřišel jsem na způsob, aby skript fungoval kdekoliv na webu, takže se musí vkládat na konec stránky.

<script src="http://dl.dropboxusercontent.com/u/42843704/javascript/broucci.js"></script>

Ukázku můžete vidět tady - http://satik64.8u.cz/…_special.php

Nahoru Odpovědět  +4 13.4.2014 15:07
Bůh neobdarovává lidi sny, aniž by jim nedal sílu je uskutečnit.
Avatar
Odpovídá na Satik64
Michal Žůrek (misaz):

hezky. Když už ho dáváš nakonec, tak ne úplně le těsně před koncovou značku </body>. Aby fungovalo ve hlavičce, tak tu úvodní funkci musíš dát do obsluhy události window.onload.

Nahoru Odpovědět 13.4.2014 15:09
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

Aha, tak to můj skript radši dávejte taky na konec :D

Nahoru Odpovědět 13.4.2014 15:10
Zase jsem o něco chytřejší
Avatar
Satik64
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Satik64:

Dík, body jsem opravil. Ale jak to spravit s window.onload se podívám asi až po soutěži, dneska už mě to znavilo :D

Nahoru Odpovědět 13.4.2014 15:40
Bůh neobdarovává lidi sny, aniž by jim nedal sílu je uskutečnit.
Avatar
Petr G
Redaktor
Avatar
Petr G:

Ahoj :) Přidávám se.. Vypůjčil jsem si úvodní stránku ze svého portfolia(jed­notlivé sekce nefungují).
Online: http://girtas.aspone.cz/…g/index.html
Offline: https://db.tt/9WX9PT02

 
Nahoru Odpovědět 13.4.2014 16:31
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

A ještě musí nacachovat do proměnné původní window.onload (pokud existuje). Jinak se neprovede.

 
Nahoru Odpovědět 13.4.2014 16:41
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

však může použít addEventListener.

Nahoru Odpovědět 13.4.2014 17:31
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Petr G
Michal Žůrek (misaz):

hezký efekt, ale moc mi to nesedí k Easter Egg.

Nahoru Odpovědět 13.4.2014 17:39
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Podle mě to Petr Ga není špatné, avšak chtělo by to možná přidat na nějakou událost no... :)

Easter Egg mají býti různé vtípky či narážky, většinou na první pohled neviditelné, až později si uvědomíš že je něco jinak a tak. Také se může Easter Egg spouštět po nějaké události, po kliku, napsání něčeho atd...

Nahoru Odpovědět 14.4.2014 8:43
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Musím říci, že jsem nečekal takovou účast a mám radost z vašich výtvorů :) Vše jsem zkoušel na devbooku, aby to bylo spravedlivé.

Dan Vítek - Velmi zajímavý nápad :) Škoda, že to nepřepíše všechny texty na stránce.
Honza Bittner - Vysávání textu se ti fakt povedlo. Pokud je web větší, spouští se obrazovka skynetu přes vysávání, což vypadá dobře. Asi bych jí ale lépe nastyloval a je škoda, že tam není nějaký obrázek v závěru :)
GreenMan - Everything's awesome... Fakt šílenost, prostě awesome, připomíná mi to Nyan cat :D
Michael Olšavský - Web ve stavu beztíže, nic nezůstane na svém místě. Občas to trochu buguje, nicméně tvůj žert je jeden z těch, které člověka opravdu překvapí. Tohle se mi stát, tak nevím, co si mám myslet :D
Misaz - Převrácení řešíš zajímavě přes speciální znaky ve fontu, občas mi to přijde ale špatně čitelné.
Ondrca - Mávající kočka mi problikla jen jednou, úplně nevím jak s ní zacházet. Content editable je dobrý nápad na easter egg ;-)
Petr Gürth - Zajímavý efekt, nicméně mi to nepřijde moc jako easter egg.
satik64 - Kód by neškodilo trochu učesat, ale efekt se ti fakt povedl :)

S těmi plackami se dnes trochu rozvášním. Nejvíce se mi líbily výtvory GreenMan a Satik64. Placky posíláme i Michael Olšavský a Honza Bittner za destrukci webu. Všem ostatním moc díky za účast, máte to super, ale jak píšu vždycky, nemůžu ocenit všechny, potom by to nebyla soutěž :P

Vítěze prosím o publikaci výtvorů (přidejte prosím i screenshot) a napište x adresu a jakou placku chcete (JS nebo Efekty). Zítra nebo ve středu vyhlásím zas něco nového :)

Editováno 14.4.2014 11:07
Nahoru Odpovědět  +2 14.4.2014 11:06
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

Zbytečné, když addEventListener má menší podporu.

 
Nahoru Odpovědět 14.4.2014 13:01
Avatar
Satik64
Redaktor
Avatar
Satik64:

Moc dík za mou první cenu, vědom si svého kódu jsem ji vůbec nečekal :D Gratuluju i ostatním.

Nahoru Odpovědět 14.4.2014 13:45
Bůh neobdarovává lidi sny, aniž by jim nedal sílu je uskutečnit.
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

dneska to podporují všechny browsery.

Nahoru Odpovědět  +1 14.4.2014 15:59
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

Kromě IE 8, který používá pořád 5% uživatelů.

 
Nahoru Odpovědět 14.4.2014 17:56
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

já předpokládám že tito IT neandrtálci nejsou moje cílová skupina.

Nahoru Odpovědět  -3 14.4.2014 17:57
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
1Pupik1989:

Moje cílová skupina jsou uživatelé. Čili dokážu napsat web i pro IE 5, aniž bych nad tím musel přemýšlet. Máš celkem zajímavý přístup.

 
Nahoru Odpovědět  +3 14.4.2014 18:06
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

ty nejzásadnější features samozřejmě dělám tak aby fungovaly co nejširšímu okruhu, easter egg podle mě nemusí nutně fungovat všem, radši ten čas věnuji něčemu důležitějšímu.

Nahoru Odpovědět  +1 14.4.2014 18:31
Nesnáším {}, proto se jim vyhýbám.
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 43 zpráv z 43.