Tipy a triky

Tímto honosným názvem nadepisuji neuspořádanou drobnou snůšku malých tričků či tipků, které jsem použil tu či onde při tvorbě svých www stránek.
Uvádím především ty věci, které (či jejich řešení) napadly mne samotného, i když samozřejmě netvrdím, že prvního na světě.
Něco z toho jsou takové banality, že se pozastavíte nad tím, že mi stojí zato, vůbec se s tím sem psát.

      tip/trik       poznámka      
  nadpisy z více elementů v jednom řádku   to není dobrý nápad  
  svislá čára   docela pěkné  
  různé chování v různých prohlížečích   to dá rozum  
  dynamické popisky v Netscape Navigátoru / M$ Internet Exploreru   hm  
  vložení stylu různého pro Netscape Navigátor a M$ Internet Explorer   aha  
  takováhle pěkná tabulka   jééé  
  aktivní odkazy (á la a:hover) v Netscape Navigátoru   bomba, ale pěkná fuška  
  poloprůhledné pozadí textu/obrázku v Netscape Navigátoru (i v IE)   vida, dobrý nápad  
         

 

 

 

(zpět na hlavní stránku)
 

Nadpisy z více elementů v jednom řádku

Co tím myslím: např. nadpis zápisu v deníčku, který se skládá ze dvou částí - jméno zápisu a datum zápisu. Jméno chci zarovnat vlevo, datum na stejnou řádku vpravo.
No co. Tak tam vložím tabulku o dvou sloupcích s patřičným formátováním.
Ano, ale když těch nadpisů bude víc, což se předpokládá, tak to budu pokaždé opisovat? Co když budu chtít změnit vzhled nadpisů? Nebudu to přece přepisovat všude.
A jde o obecnější problém, jak vložit prvek složený z více různě formátovaných elementů.
Řešení znám jediné: použít script, např. Javascript, a prvek vkládat funkcí s několika parametry.
Příklad s tím deníčkem: 

<head>
<script language="JavaScript">
   function NadpisZapisuDenicku(jmeno, datum) {
      document.writeln("<table border=0 width=100%><tr><td align=\"left\">");
      document.writeln(jmeno);
      document.writeln("</td><td align=\"right\">");
      document.writeln(datum);
      document.writeln("</td></tr></table>");
   }
</script>
</head>
<body>
<script>NadpisZapisuDenicku("nějaké jméno","nějaké datum");</script>
</body>
Proč to není příliš dobrý nápad:
Protože ne každý prohlížeč podporuje Javascripty. A v těch ostatních je chování různé, bohužel.
Slušný prohlížeč se při nalezení neznámého tagu (např. tagu <script>) má zachovat tak, že tag zcela ignoruje. To je standardní slušný postup.
Jsou ovšem přohlížeče, které tag <script> rozpoznají, ale Javascripty nepodporují a snaží se zareagovat "chytře" a vše, co následuje dále až po tag </script>, ignorují.
Ve výše uvedeném případě pak uživatel nevidí ani (sice neestetické, ale přesto dostatečně informující) volání funkce s nadpisem zápisu deníčku.
Jistě, jde použít tag <noscript> a vložit pro ostatní prohlížeče nadpis alespoň provizorně, ale to už zase opisuji nadpis dvakrát, což není hezké. A celkový zisk není příliš velký.
Ale třeba se to v některé situaci může hodit...

 

 

 

 

Svislá čára

Taková drobnůstka, ale pěkná - svislá čára.

Vloží se tabulka.
Dvě možnosti:
1) tabulka s nulovou šířkou, patřičnou výškou a okrajem
2) tabulka s malou šířkou, patřičnou výškou, bez okraje a s barevným pozadím
 

Kód ad 1 např.: 

<table border=1 width=0 cellpadding=0 cellspacing=0 height=100pt><tr><td></td></tr></table>

Kód ad 2 např.: 

<table border=0 width=0 cellpadding=0 cellspacing=0 height=100pt bgcolor="lightgreen"><tr><td>&nbsp;</td></tr></table>

 

 

 

 

Různé chování v různých prohlížečích

Často je potřeba napsat část www stránky různě pro různé prohlížeče z důvodu jejich nekompatibility.
Dá se využít toho, že prohlížeč X nezná nějaký tag, zatímco prohlížeč Y jej zná, ale daleko se s tím nedostanu.

Potom je samozřejmě potřeba použít JavaScript, v něm otestovat typ prohlížeče a podle toho se zachovat (zavolat tu kterou funkci, vložit ten který text do stránky apod.).
Abych netestoval totéž na různých místech kódu několikrát, jednak si udělám funkci na testování a jednak si výsledek testu schovám do proměnné.

Takže příklad rozlišení M$ IE verze >=3.0, NN verze >=4.0 a ostatních prohlížečů: 

  function TypProhlizece() {
     var typ='unknown';
     if ((navigator.appName=="Netscape") && (navigator.appVersion>="4.0")) typ='NN4';
     else if ((navigator.appName=="Microsoft Internet Explorer")
           && (navigator.appVersion>="3.0")) typ='IE3';
     return typ;
  }
Výsledek testu si uložím do proměnné: 
  var nav=TypProhlizece();
A pak vesele testuji, kdykoliv to potřebuji, např.: 
  if (nav=='NN4') alert("Používáte Netscape Navigátor verze >= 4.0 - výborně");

 

 

 

 

Dynamické popisky v Netscape Navigátoru / M$ Internet Exploreru

Velmi příjemná a užitečná věc - najedete myší na odkaz a někde na stránce se vypíše popis, co odkaz obsahuje. Také bychom chtěli, aby se stránka nějak rozumně zobrazila v prohlížečích, které nepodporují dynamické styly nebo javascripty.

Princip je tento: pomocí stylů napíšeme popisky na určené místo přes sebe, ale neviditelně (vlastnosti visibility, resp. display). Při přejezdu myší přes odkaz javascriptem odchytíme událost a zviditelníme příslušnou vrstvu.

Je to poměrně pracné, ale výsledek stojí zato.

Časem tu možná přehledně popíšu, jak se to přesně dělá. Zatím vás odkazuji na prostudování zdrojového kódu mé úvodní stránky (ale varuji vás - dost nepřehledné - raději si to vymyslete sami).

 

 

 

 

Vložení různého stylu podle typu prohlížeče

Někdy je potřeba vložit různý styl pro různé prohlížeče, např. jiný pro IE a jiný pro NN.

Člověk by chtěl, jako v podobných případech, vložit styl skriptem, který by nejprve otestoval typ prohlížeče a podle toho vložil ten či onen styl.
Chyba! NN styl vložený skriptem vesele ignoruje (přinejmenším tehdy, pokud je vkládaný funkcí).

Řešení: Pro NN styl vložit natvrdo (do html kódu) a vzápětí použít skript, který případně pro IE přestyluje.

Např. takto (nastavení proměnné nav viz výše): 

  function VlozStylIE()
     if (nav=='IE4') document.write('</span><span class="stylIE">');
Pak v nějakém místě stránky: 
  <span class="stylNN"><script>VlozStylIE()</script>
  ...stylovaný text...
  </span>

 

 

 

 

Takováhle pěkná tabulka

Zobrazte si zdrojový kód této stránky :-).

 

 

 

 

Aktivní odkaz (á la a:hover) v Netscape Navigátoru

Co tím myslím: např. změnu barvy odkazu, když nad ním přejíždí myš. Tedy to, čeho se v M$ IE dosahuje jednoduše definicí stylu třídy a:hover.
V NN je to pěkná fuška, vám povím, ale jde to. Možná existuje jednodušší řešení, já je neznám.
Řešením, které popíši, lze dosáhnout nejen změny např. barvy odkazu, když nad ním přejíždí myš, ale i dalších atributů odkazu, včetně obsahu textu, barvy pozadí, posunutí textu apod..

Jak na to:

Vložíte (stylem) dvě vrstvy přes sebe:
První z nich je odkaz.
Druhá je pouhý (často tentýž) text (jinak barevný, dekorovaný, posunutý, ...), ale neviditelná.
Když nad to najede myš, zviditelníte druhou vrstvu a zneviditelníte první. Když myš odjíždí, vrátíte to.
To je celé. Teorie jednoduchá, praxe dá trochu práce.
Jednoduchý příklad, který se zachová korektně (ovšem neaktivně) i v ostatních prohlížečích, vysvětlí vše (tedy pokud si zobrazíte komentovaný zdroják).
Příklad různých stylů možná inspiruje.

 

 

 

 

Poloprůhledné pozadí textu nebo obrázku

Jako tento odstavec.
Klíčem je transparentní gif.
Celý dokument má nějaké svoje pozadí. Jako pozadí odstavce (či buňky tabulky a i jiných elementů) se použije obrázek, který vypadá jako šachovnice, kde místo bílých políček je zvolená barva, místo černých transparentní pozadí. Co políčko, to jeden pixel. Skrz "černá" políčka pak prosvítá, co je za nimi, ale díky velké hustotě pixlů není vidět, jakou fintou je to uděláno, a vypadá to jako barevný filtr.

Funguje to samozřejmě jen v prohlížečích podporujících styly. Jak se to udělá: např. takto: 
<body background="obrazek.jpg">
...
<p style="background-image: url('filtr_zluty.gif')">
Text či obrázek
</p>
...
</body>
S tímto pozadím to není moc dobře vidět. Podívejte se na lepší příklad.

A důležitá poznámka: čtverečkovaný transparentní gif se (narozdíl ode mne) nebojte udělat dost velký, třeba 100 x 50 pixlů, jinak se na pomalejších počítačích bude vykreslovat příliš dlouho.