ipsace i tiskace

Nedávno jsem na blogísek umístil vyhledávání pomocí google. Přičemž jsem už pominul ostylování celého vyhledávátka. Nyní se k tomu malinko vrátím.

protože jsem měl k disposici velmi málo místa, rozhodl jsem se, že logo gůglete umístím přímo do textového imputu. A sice jako pozadí, do pravého okraje. Imput je pojmenován (id="gtext") jako gtext

Vidíte, že obrázek na pozadí je "tahán" přímo ze vzdáleného serveru googlete. Já obecně nemám rád, když se cokoliv do stránky vkládá vzdáleně, obvykle to způsobuje spoustu problémů, o nichž ještě napíšu. Ale tento případ je výjimečný, vysvětlím proč.

Pokud z nějakého důvodu nebude google fungovat, obrázexe nezobrazí. Ale proč by se zobrazovala upoutávka na momentálně nefunkční server? Touto jednoduchou metodou je vlastně zajištěna signalisace funkčnosti celého vyhledávání. Pokud server pošle obrázek, je pravděpodobné, že bude fungovat všechno, tedy i vyhledávání. Pokud nepošle, nic se nestane, celá stránka se zobrazí, jen bez obrázku google, nedojde k žádnému zdržení.

Ovšem má to jeden háček. Pokud je vyhledávaný výraz delší, překryje se jím část loga a je pak špatně čitelné, co do políčka píšeme. Proto jsem vymýšlel, jak nechat google zmizet. Jakmile začneme do imputu vkládat text, bude pozadí jednobarevné, po opuštění textového pole se logo zas objeví. Řešení je překvapivě jednoduché. Využijeme pseudotříd.

Pseudotřída je taková věc, která vyjadřuje stav elementu, ke kterému je (v syntaxi pomocí dvojtečky) připojena. Pokud se textové políčko nachází ve stavu, že do něj právě píšete, znamená to, že má (v tu chvíli) pseudotřídu :focus. Takže stačí jen do CSS přidat řádek.

A je účelu dosaženo! Jakmile vyhledávací políčko získá fokus, vyčistí se. Jakmile fokus ztratí (kliknutí myší vedle nebo TAB), logo googlete se objeví. Pro úplnost ještě dodávám, že do svého CSS jsem kromě pseudotřídy :focus použil i :active, protože co kdyby... ale upřímně řečeno, nevím, kdy se v praxi třída :active vlastně uplatní. Proste sichr.

Živou ukázku, jak to funguje, si zkuste přímo zde na blogu.

Ale je to roztomilé, jak logo mizí a uctivě dělá místo vašemu kursoru, že jo? Já si na to musím tím kursorem furt šahat.. :-)