Diskuze: Machr na JavaScript

David Hartinger

Vlastník

David Hartinger:9.4.2014 20:56

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

9.4.2014 20:56

New kid back on the block with a R.I.P

Honza Bittner

Tvůrce

Honza Bittner:9.4.2014 21:10

Něco vymyslím...

Nahoru Odpovědět

9.4.2014 21:10

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:9.4.2014 21:13

neboj, taky, už mám nápad.

Nahoru Odpovědět

9.4.2014 21:13

Honza Bittner

Tvůrce

Honza Bittner:9.4.2014 21:16

To zní jako plán! ]:>

Nahoru Odpovědět

9.4.2014 21:16

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:9.4.2014 21:24

Spíš jako Válka machrů!

Nahoru Odpovědět

9.4.2014 21:24

Honza Bittner

Tvůrce

Honza Bittner:9.4.2014 21:37

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

Nahoru Odpovědět

9.4.2014 21:37

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:9.4.2014 22:41

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

9.4.2014 22:41

Honza Bittner

Tvůrce

Honza Bittner:9.4.2014 23:00

V sobotu něco vytvořím...

Nahoru Odpovědět

9.4.2014 23:00

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Ondrca

Tvůrce

Ondrca:10.4.2014 15:38

V mozille ti to nejde .

Nahoru Odpovědět

10.4.2014 15:38

Zase jsem o něco chytřejší

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 15:57

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

Nahoru Odpovědět

10.4.2014 15:57

Ondrca

Tvůrce

Ondrca:10.4.2014 15:58

Mozilla umí innerHTML

Nahoru Odpovědět

10.4.2014 15:58

Zase jsem o něco chytřejší

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 15:59

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

Nahoru Odpovědět

10.4.2014 15:59

Ondrca

Tvůrce

Ondrca:10.4.2014 16:02

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ší

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 16:06

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

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 16:08

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

Neaktivní uživatel

Člen

Neaktivní uživatel:10.4.2014 17:36

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

Nahoru Odpovědět

10.4.2014 17:36

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 17:45

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

10.4.2014 17:45

Honza Bittner

Tvůrce

Honza Bittner:10.4.2014 18:37

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!

Nahoru Odpovědět

10.4.2014 18:37

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.4.2014 22:15

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

Nahoru Odpovědět

11.4.2014 22:15

Neaktivní uživatelský účet

GreenMan

Tvůrce

GreenMan:12.4.2014 16:17

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.

Č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

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

12.4.2014 16:17

Zelená zostane zelenou, aj keď na ňu vyleješ modrú. - Satik64

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:12.4.2014 16:29

Tak tohle mě pobavilo

Nahoru Odpovědět

12.4.2014 16:29

Neaktivní uživatelský účet

Ondrca

Tvůrce

Ondrca:12.4.2014 19:43

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ší

GreenMan

Tvůrce

GreenMan:12.4.2014 20:34

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

Ondrca

Tvůrce

Ondrca:12.4.2014 20:37

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š
Chtěl jsem to spozdit, ale neuměl jsem to napsat

Nahoru Odpovědět

12.4.2014 20:37

Zase jsem o něco chytřejší

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.4.2014 0:54

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

Nahoru Odpovědět

13.4.2014 0:54

Michael Olšavský

Tvůrce

Michael Olšavský:13.4.2014 13:16

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

Satik64

Tvůrce

Satik64:13.4.2014 15:07

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ý ). 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

13.4.2014 15:07

Bůh neobdarovává lidi sny, aniž by jim nedal sílu je uskutečnit.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.4.2014 15:09

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

Ondrca

Tvůrce

Ondrca:13.4.2014 15:10

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

Nahoru Odpovědět

13.4.2014 15:10

Zase jsem o něco chytřejší

Satik64

Tvůrce

Satik64:13.4.2014 15:40

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

Nahoru Odpovědět

13.4.2014 15:40

Bůh neobdarovává lidi sny, aniž by jim nedal sílu je uskutečnit.

Petr Gürth

Tvůrce

Petr Gürth:13.4.2014 16:31

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

Nahoru Odpovědět

13.4.2014 16:31

1Pupik1989

Člen

1Pupik1989:13.4.2014 16:41

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

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.4.2014 17:31

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

Nahoru Odpovědět

13.4.2014 17:31

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.4.2014 17:39

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

Nahoru Odpovědět

13.4.2014 17:39

Honza Bittner

Tvůrce

Honza Bittner:14.4.2014 8:43

Podle mě to Petr Gürtha 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

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

David Hartinger

Vlastník

David Hartinger:14.4.2014 11:06

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
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
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ěž

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

14.4.2014 11:06

New kid back on the block with a R.I.P

1Pupik1989

Člen

1Pupik1989:14.4.2014 13:01

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

Nahoru Odpovědět

14.4.2014 13:01

Satik64

Tvůrce

Satik64:14.4.2014 13:45

Moc dík za mou první cenu, vědom si svého kódu jsem ji vůbec nečekal 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.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:14.4.2014 15:59

dneska to podporují všechny browsery.

Nahoru Odpovědět

14.4.2014 15:59

1Pupik1989

Člen

1Pupik1989:14.4.2014 17:56

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

Nahoru Odpovědět

14.4.2014 17:56

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:14.4.2014 17:57

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

Nahoru Odpovědět

14.4.2014 17:57

1Pupik1989

Člen

1Pupik1989:14.4.2014 18:06

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

14.4.2014 18:06

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:14.4.2014 18:31

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

14.4.2014 18:31

Diskuze: Machr na JavaScript - EasterEgg