Archív pro rubriku “HTML, CSS, JavaScript”

Nošení dříví do lesa, ale mě se tuhle „novinku“ povedlo úspěšně minout. Starší verze Prototype (<1.6) neumožňovaly registrovat událost pro načtení DOM stromu dokumentu ($(document).ready() známé z jQuery) a uměly pouze Event.observe(window, ‘load’, function(){ … }), což je prakticky synonymum pro onload událost prvku body. Nevýhoda obou přístupů je stejná – čeká se i na obrázky. To je ale pro spoustu činností zbytečně pozdě, namátkou třeba pro registraci AJAXových volání. Od verze 1.6 je tedy možné používat konstrukci Event.observe(document, ‘dom:loaded’, function(){ … }).

Comments Bez komentářů »

Před měsícem proběhl mojí RSS čtečkou článek na A List Apart ohledně nastavování velikosti fontů pomocí CSS. Pokud ještě řešíte klasické problémy jako „IE6 nemění písmo s výškou udanou v px“ nebo „IE6/IE7 dělá obrovské skoky ve velikosti písma“ (obojí při změně velikosti textu v prohlížeči), tak určitě doporučuji.

Comments Bez komentářů »

Před nedávnem jsem psal návod na vytvoření průhledného pozadí pomocí CSS. Později mě napadlo přidat i způsob, jak měnit průhlednost při najetí myší, už jenom protože to není nic složitého. Můj popsaný postup má v tomhle případě jeden problém – jako prvek, který získá mouseover je zde odkaz a <div> s pozadím, který má na starost průhlednost, je ve struktuře dokumentu vedle něj. A jelikož IE6 neumí CSS selektor :hover pro nic jiného než odkazy, tak není možné využít ani :hover pro nadřazený prvek (ke kterému událost „probublá“ z odkazu).

První řešení, který mě klasicky napadlo je JavaScript, pak už jsem dál nepřemýšlel a rovnou ho použil. Tedy samozřejmě ne přímo JavaScript, ale některou z knihoven, které byly vytvořeny, aby trochu pomohly ubohým programátorům vypořádat se s rozdíly mezi prohlížeči a hlavně nepsat tolik kódu. Jelikož poslední dobou dělám pouze v Ruby on Rails, které používají knihovnu Prototype, tak jsem sáhl po ní, ale třeba jQuery nebo cokoliv jiného by se dalo taky bez problémů použít.

Po ujasnění si všeho je výsledný postup jednoduchý – při události mouseover přidat nadřazenému prvku třídu hover a definovat nový CSS selektor .hover div který nastaví průhlednost na 0 (úplně viditelný). Pomocí Prototype toho dosáhnete například takto:

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
    $$('.opaque-background').each(function(el){
        Event.observe(el, 'mouseover', function(){
            el.addClassName('hover');
        });
        Event.observe(el, 'mouseout', function(){
            el.removeClassName('hover');
        });
    });
});
</script>

Výsledný kód i s doplněnými styly si můžete prohlédnout zde (otevře se v novém okně), nebo stáhnout včetně Prototype.

Comments Bez komentářů »

Průhlednost je cool, stejně jako zaoblené rohy, obrovské Web 2.0 písmo, AJAX a vše další. Pokud vám nic z toho cool nepřijde a za ideální stránku považujete takovou, která vypadá stejně ve Firefoxu nebo v Lynxu, tak nečtěte dál – Lynx průhlednost neumí. Čistě teoreticky není na průhlednosti nic zvláštního, CSS zná vlastnost opacity, kde 1=> úplně viditelný a 0 => úplně transparentní (pozor, že tuto vlastnost nezná třeba Opera 8). IE zná pro změnu filtr alpha, kde udáváte to samé, jenom v procentech a obráceně, tedy 0 => úplně viditelný, 100 => úplně transparentní  (tohle je samozřejmě nesmysl, obráceně to není). Takže úplně základní příklad 50% průhlednosti průhlednosti dostanete takto:

<p id="opaque">Lorem Ipsum</p>
#opaque {
   background-color: #FF3300;
   opacity: .5;
   /* použito kvůli kompatibilitě se staršími verzemi Firefoxu a Mozilly */
   -moz-opacity: .5;
   filter:alpha(opacity=50);
}

Výsledek:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Takto definovaná průhlednost má ale jednu zásadní vadu – dědí se na všechny podřízené prvky. Takže pokud budete chtít mít průhledné pozadí a hezky čitelný text, tak máte smůlu, nejde to. Nepomůže nastavit podřízený prvek zpět na úplně viditelný, přidat !important (klidně i se spoustou dalších vykřičníků), nepomůže nic.

Řešením je přidat do kódu jeden nesémantický prvek a trochu si pohrát s pozicováním prvků. Řekněme, že má jít o jednu položka menu (tohle řešení jde ale samozřejmě použít pro i cokoliv jiného), text bude tedy obalen tagem <a>. Před něj přidáme jeden prázdný div, který bude plnit funkci pozadí a bude mít nastavenou průhlednost. Z něj se logicky na odkaz průhlednost nezdědí, protože odkaz není jeho podřízený prvek. Zbývá už jenom vyřešit překrytí obou prvků. Jako první mě napadlo absolutní pozicování uvnitř relativně pozicovaného prvku (více například u Pixyho), kdy nadřazenému prvku nastavíme position: relative a rozměry. Podřízené prvky (prázdný <div> a odkaz) jsou potom absolutně pozicované na levý horní roh a mají stejnou výšku a šířku jako rodičovský prvek.

Výsledný dokument včetně ukázky pro 0%, 25%, 50% a 75% průhlednost jak na celém bloku včetně textu, tak jenom na pozadí si můžete prohlédnout zde (otevře se v novém okně). Postup funguje ve všech moderních prohlížečích – vyzkoušel jsem IE5.5, IE6 a IE7, Firefox 2 (měl by ale fungovat i pro starší verze), Operu 9 a Safari 3.

Comments 6 Komentářů »

Lightbox je oblíbený efekt pro zobrazování obrázků v plné velikosti z náhledů (pro vyzkoušení klikněte na jednu z fotek na stránkách projektu). Je kompatibilní s drtivou většinou prohlížečů a snadno se používá, stačí vložit několik JavaScriptových souborů v pořád-ještě-rozumné-velikosti a do odkazu, na který se má Lightbox použít, přidat
rel=“lightbox“
Pokud už vás omrzely pop-upy, tak rozhodně doporučuju. Existuje i varianta Lightbox Gone Wild, která slouží jako náhrada modálních oken (okna, která musíte zavřít pro pokračování práce s aplikací). Je sice bez efektu rozbalení, ale protože její použití bude někde jinde, tak to moc nevadí.

Comments Bez komentářů »

Nedá mi to, ale musím se pochválit – na www.tawan.cz najdete prezentaci Thajského masážního centra Tawan. Kód popravdě není 100% validní, ale to zatím neřeším (stejně jako blbé zobrazení patičky v ruštině, musím počkat jestli to překladatel dokáže zkrátit). Hlavní ale je, že se správně zobrazuje ve všech prohlížečích včetně IE5, Camina nebo Safari. Jinak autorem grafiky nejsem – to by té sebechvály bylo mnohem víc.
Při práci jsem narazil na skvělé tooltipy Sweet Titles. Fungují ve všech nových prohlížečích, dobře vypadají (a dají se přizpůsobit pouhou změnou CSS) a jednoduše se s nimi pracuje. Skript sám projde vybrané tagy a z jejich vlastnosti title a obsahu vytvoří tooltip.
A ještě se mi hodil jednoduchý webový nástroj FavIcon from Pics pro vytváření favourite icon. Prostě nahrajete obrázek a vypadne vám zip archív s favicon.ico, transparentní a animovanou variantou + README soubor co s tím. Opět něco pro líné lidi.

Comments Bez komentářů »

Zaoblené okraje jsou cool. Poslední dobou se s nimi roztrhnul pytel a jako vždy je to něco, s čím návrháři (X)HTML a CSS nepočítali. Podle mě tedy nepočítali vůbec s něčím a napadá mě málo věcí více vzdálených od reality a skutečných potřeb uživatelů než je CSS, ale to sem nepatří, tenhle blog má být pozitivní. Takže pokud chcete vytvářet rounded boxy jednoduše, můžete použít tento generátor. Zadáte pouze barvu boxu a pozadí a o zbytek se postará za vás.

Comments Bez komentářů »