xom`s pinion - Tom Hnatovsky Blog

IE a zdánlivá chyba onclick

24. října 2006 Web design nekomentováno

Na několika diskusních fórech jsem při tvorbě xbo narazil na řešení problému s událostí onclick na elementu a v Internet Exploreru a mnoho diskutujících se shodlo na tom, že prostě IE sucks, že je blbé, že to neumí. Problém spočívá v samotných autorech javascriptového kódu. Nutno ale na jejich drobnou obranu přiznat, že se IE chová drobně odlišně než ostatní prohlížeče. Pokud se psaním javascriptů zabýváte jenom trochu vážněji, tak pro vás budou následující řádky naprosto jasné a budete se asi podivovat nad primitivností..

A teď k tomu, pro někoho nepřekonatelnému, problému. Při kliknutí na odkaz s definovaným skriptem na události onclick se provede přesměrování na odkazovanou stránku a javascript se nevykoná. Zde je první chyba, javascript se vykoná, ale ve většině problematických případech nevrací volaná funkce boolean hodnotu false, která zamezí dalšímu zpracování události, zároveň i přesměrování. Hierarchie je následná – obslouží se skriptové události a až pak se zpracovávají ostatní atributy (například přesměrování, schválení formuláře). Mnoho skriptařů (to je slovo, co? Ale trefné. ;o)) použije konstrukci onclick=“nejakaFunkce(); return false;“ Ve Firefoxu a Opeře se to úspěšně zpracuje, ale IE bere v potaz pouze první část (po první středník) a poté pokračuje ostatními atributy tagu. Proto je žádoucí, aby return false vracela již funkce nejakeFunkce().

Dalším problémem je různá implementace funkcí v jednotlivých překladačích prohlížečů. Zde naráží jiná skupina skriptařů, kteří úspěšně vykonávají nějaký skript v jiných prohlížečích, ale v IE jim to nefunguje a přesměrovává jinam. Je to kvůli tomu, že pokud najde parser IE v javascriptu chybu (nebo syntaxi, kterou neumí), přestane zpracovávat kód a pokračuje v dalších operacích, které následují po zpracování skriptových událostí. Velice chabým řešením zamezení přesměrování považuji nahrazení nějaké smysluplné adresy za “#“, což vrátí uživatele na počátek aktivní stránky. Nezapomínejme, že by měla být základní funkčnost webu zachována i bez javascriptu, sice třeba méně komfortně. Ano, javascript přidávám do stránek kvůli zvýšení komfortu, zefektivnění práce.

Na závěr bych chtěl poradit, abyste si své skripty kontrolovali i svým selským rozumem, rozumnou analýzou, zvolání IE sucks umí říci každý, ale málokdo má v ten moment pravdu.

Zkuste se také občas podívat do dokumentace v jednotlivých prohlížečích:

• Mozilla Core JavaScript 1.5 Guide
• Web Specifications Supported in Opera 9
• JScript Language Reference na MSDN

Přichází xbo! Javascriptové náhledy obrázků..

15. října 2006 Web design 24 komentářů

Právě teď vypouštím první verzi Javascriptového nástroje, který ulehčuje uživateli používání stránky s odkazy na obrázky – zobrazuje je v pomocném boxu. Pracovní název celého skriptu byl xomojátka, protože původní idea byla zobrazovat obrázek v plovoucím okně pod odkazem, při najetí kurzoru myši, což vzdáleně připomíná Derova Cotojátka. Potom jsem promýšlel funkčnost čím dál více do hloubky a vznikl mi z toho takový Lightbox, který je otevřenější pro možné zásahy uživatele. A finální název xbo vychází ze „xom`s box“, radši bych použil xbox, ale to by něco připomínalo.. ;o)

Pojďme se podívat na možnosti, které nám celý skript nabízí. xbo se nastavuje přidáváním hodnot do asociovaného pole settings, tudíž není těžké si nastavit chování přesně dle potřeb, když znáte možné parametry.

Parametry

V následujících řádcích budu používat pro element, ve kterém se zobrazuje obrázek, názvu box.

• settings["class"] = "imageView"; Definice atributu class, použitého k vlastnímu nastylování boxu. Bez použití se nastaví automatický styl.
• settings["windowID"] = "imageBox"; Definice atributu id podle kterého bude nalezen box v kódu – tzn. že se nebude vytvářet nový element. Doporučený element je DIV.
• settings["action"] = "click"; Definice akce, po které se spustí/ukáže box. Přednastavený je onmousemove, Další povolená hodnota je pouze „click“ (zatím).
• settings["autoPosition"] = true; Booleanovská hodnota určuje zda-li se box pozivuje automaticky – automaticky znamená ihned pod odkazem.
• settings["elementName"] = 'obrazek'; Restrikce funkčnosti skriptu pouze na elementy stejné třídy, na jiné nebudou funkce xbo aplikovány.
• settings["relativePosition"] = true; Zapnutí relativního pozicování boxu, to znamená, že se objevuje na viditelné pozici stránky (když máte odscrollováno dolů, tak se objeví u horního okraje aktuální pozice stránky.)
• settings["relativePositionX"] = 30; Definice kolik px od levého okraje stránky se box zobrazí v módu relativního pozicování.
• settings["relativePositionY"] = 30; Definice kolik px od vrchního okraje stránky se box zobrazí v módu relativního pozicování.
• settings["image"] = true; Zapnutí zobrazování pouze pro obrázky – momentálně musí být vždy nastavováno na true – figuruje kvůli dalšímu vývoji – práce s textem na odkazovaných stránkách.
• settings["hide"] = true; Zapnutí automatického schovávání boxu.
• settings["template"] = '<h4>%title%</h4><img src="%href%" alt="%title%"/>'; Definice šablony textu, který se zobrazuje v boxu. Zde figuruje několik proměnných, které se nahrazují údaji z aktivujícího elementu A. Proměnné jsou %title% a %href% (lze odkazovat i přes %src% při chybné záměně atributů kodérem.)

Šablona ve stávající verzi musí obsahovat minimálně jeden element IMG, do kterého se bude vkládat obrázek. Při použití více obrázků v šabloně bude použit první element. Pokud šablona neobsahuje element IMG, použije se přednastavená.

Ukázky

Pro představu funkčnosti jsem připravil pár ukázek:

• Dynamický náhled obrázku pod odkazem.
• Náhled obrázku v relativně pozivovaném textu po kliknutí – podobné nastavení je použito na mé obchodní prezentaci.
• Dynamický náhled obrázků v pevném boxu – ideální pro fotogalerii.

Vložení do stránky, aktivace

Vložení skriptu do stránky učiňte touto definicí v HEAD elementu stránky: <script type="text/javascript" src="xbo.js"></script> – pokud je nastavení definováno v souboru skriptu, tak nemusíte pro funkčnost nic více přidávat, samo se vše inicializuje po načtení stránky.

Tak toto je vše z prvního představní nástroje xbo, můžete si ho stáhnout (1.3kB), testovat, používat, samozřejmě, že budu rád za jakékoliv ohlasy – osobně jsem zatím testoval chování v Explorer, Firefoxu a Opeře, předpokládám, že budu ještě drobně ladit pro Konqueror (bohužel poslední dobou nejsem u Linuxu.)

Výhledově bych chtěl dotáhnout nějaké načítací efekty a poladění ve starších verzích prohlížečů, tak mi přejte ať mám trochu čas.. ;o)

2 roky pro Vás

13. října 2006 Jen tak pro sebe 14 komentářů

Pátek 13. – ideální to den k oslavám. Již jsem 10.10.2006 vstoupil do třetího roku psaní toho blábolníčku a Vám čtenářům děkuji za přízeň, za komentáře, za ten pocit, že je na světě někdo, kdo je to po mně schopen číst.. ;o)

No, nebýt Finweho, asi bych nikdá nezačal, neznal bych Pixyho, Hulána, DGX, Yuhůa, Plaváčka a vůbec všechny jiné hotam. Děkuji.. Utírám slzu nostalgie a vyvěšuji zde ty z Vás, kteří se odvážili mi poslat karikaturovanou podobiznu.. Na plakátku jsou naznačeny barevné vazby, kdo jak koho asi zná – nejvíce přímek vedlo ke Gagí. ;o) A doplnil jsem nás ještě o holku Pelhřimovskou, kterou nikdo neznáte, heč ;o) A teď ještě rozuzlení, kdo byl tajemný muž na reklamě? Kamarád Myff, pravá strana zná..

Mno, radši končím, článek, pátek 13. by se neměl přetahovat..