Tipy a triky

Tímto honosným názvem nadepisuji neusporádanou drobnou snusku malých tricku ci tipku, které jsem pouzil tu ci onde pri tvorbe svých www stránek.
Uvádím predevsím ty veci, které (ci jejich resení) napadly mne samotného, i kdyz samozrejme netvrdím, ze prvního na svete.
Neco z toho jsou takové banality, ze se pozastavíte nad tím, ze mi stojí zato, vubec se s tím sem psát.

      tip/trik       poznámka      
  nadpisy z více elementu v jednom rádku   to není dobrý nápad  
  svislá cára   docela pekné  
  ruzné chování v ruzných prohlízecích   to dá rozum  
  dynamické popisky v Netscape Navigátoru / M$ Internet Exploreru   hm  
  vlození stylu ruzného pro Netscape Navigátor a M$ Internet Explorer   aha  
  takováhle pekná tabulka   jééé  
  aktivní odkazy (á la a:hover) v Netscape Navigátoru   bomba, ale pekná fuska  
  polopruhledné pozadí textu/obrázku v Netscape Navigátoru (i v IE)   vida, dobrý nápad  
         

 

 

 

(zpet na hlavní stránku)
 

Nadpisy z více elementu v jednom rádku

Co tím myslím: napr. nadpis zápisu v denícku, který se skládá ze dvou cástí - jméno zápisu a datum zápisu. Jméno chci zarovnat vlevo, datum na stejnou rádku vpravo.
No co. Tak tam vlozím tabulku o dvou sloupcích s patricným formátováním.
Ano, ale kdyz tech nadpisu bude víc, coz se predpokládá, tak to budu pokazdé opisovat? Co kdyz budu chtít zmenit vzhled nadpisu? Nebudu to prece prepisovat vsude.
A jde o obecnejsí problém, jak vlozit prvek slozený z více ruzne formátovaných elementu.
Resení znám jediné: pouzít script, napr. Javascript, a prvek vkládat funkcí s nekolika parametry.
Príklad s tím deníckem: 

<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("nejaké jméno","nejaké datum");</script>
</body>
Proc to není prílis dobrý nápad:
Protoze ne kazdý prohlízec podporuje Javascripty. A v tech ostatních je chování ruzné, bohuzel.
Slusný prohlízec se pri nalezení neznámého tagu (napr. tagu <script>) má zachovat tak, ze tag zcela ignoruje. To je standardní slusný postup.
Jsou ovsem prohlízece, které tag <script> rozpoznají, ale Javascripty nepodporují a snazí se zareagovat "chytre" a vse, co následuje dále az po tag </script>, ignorují.
Ve výse uvedeném prípade pak uzivatel nevidí ani (sice neestetické, ale presto dostatecne informující) volání funkce s nadpisem zápisu denícku.
Jiste, jde pouzít tag <noscript> a vlozit pro ostatní prohlízece nadpis alespon provizorne, ale to uz zase opisuji nadpis dvakrát, coz není hezké. A celkový zisk není prílis velký.
Ale treba se to v nekteré situaci muze hodit...

 

 

 

 

Svislá cára

Taková drobnustka, ale pekná - svislá cára.

Vlozí se tabulka.
Dve moznosti:
1) tabulka s nulovou sírkou, patricnou výskou a okrajem
2) tabulka s malou sírkou, patricnou výskou, bez okraje a s barevným pozadím
 

Kód ad 1 napr.: 

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

Kód ad 2 napr.: 

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

 

 

 

 

Ruzné chování v ruzných prohlízecích

Casto je potreba napsat cást www stránky ruzne pro ruzné prohlízece z duvodu jejich nekompatibility.
Dá se vyuzít toho, ze prohlízec X nezná nejaký tag, zatímco prohlízec Y jej zná, ale daleko se s tím nedostanu.

Potom je samozrejme potreba pouzít JavaScript, v nem otestovat typ prohlízece a podle toho se zachovat (zavolat tu kterou funkci, vlozit ten který text do stránky apod.).
Abych netestoval totéz na ruzných místech kódu nekolikrát, jednak si udelám funkci na testování a jednak si výsledek testu schovám do promenné.

Takze príklad rozlisení M$ IE verze >=3.0, NN verze >=4.0 a ostatních prohlízecu: 

  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 ulozím do promenné: 
  var nav=TypProhlizece();
A pak vesele testuji, kdykoliv to potrebuji, napr.: 
  if (nav=='NN4') alert("Pouzíváte Netscape Navigátor verze >= 4.0 - výborne");

 

 

 

 

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

Velmi príjemná a uzitecná vec - najedete mysí na odkaz a nekde na stránce se vypíse popis, co odkaz obsahuje. Také bychom chteli, aby se stránka nejak rozumne zobrazila v prohlízecích, které nepodporují dynamické styly nebo javascripty.

Princip je tento: pomocí stylu napíseme popisky na urcené místo pres sebe, ale neviditelne (vlastnosti visibility, resp. display). Pri prejezdu mysí pres odkaz javascriptem odchytíme událost a zviditelníme príslusnou vrstvu.

Je to pomerne pracné, ale výsledek stojí zato.

Casem tu mozná prehledne popísu, jak se to presne delá. Zatím vás odkazuji na prostudování zdrojového kódu mé úvodní stránky (ale varuji vás - dost neprehledné - radeji si to vymyslete sami).

 

 

 

 

Vlození ruzného stylu podle typu prohlízece

Nekdy je potreba vlozit ruzný styl pro ruzné prohlízece, napr. jiný pro IE a jiný pro NN.

Clovek by chtel, jako v podobných prípadech, vlozit styl skriptem, který by nejprve otestoval typ prohlízece a podle toho vlozil ten ci onen styl.
Chyba! NN styl vlozený skriptem vesele ignoruje (prinejmensím tehdy, pokud je vkládaný funkcí).

Resení: Pro NN styl vlozit natvrdo (do html kódu) a vzápetí pouzít skript, který prípadne pro IE prestyluje.

Napr. takto (nastavení promenné nav viz výse): 

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

 

 

 

 

Takováhle pekná tabulka

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

 

 

 

 

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

Co tím myslím: napr. zmenu barvy odkazu, kdyz nad ním prejízdí mys. Tedy to, ceho se v M$ IE dosahuje jednoduse definicí stylu trídy a:hover.
V NN je to pekná fuska, vám povím, ale jde to. Mozná existuje jednodussí resení, já je neznám.
Resením, které popísi, lze dosáhnout nejen zmeny napr. barvy odkazu, kdyz nad ním prejízdí mys, ale i dalsích atributu odkazu, vcetne obsahu textu, barvy pozadí, posunutí textu apod..

Jak na to:

Vlozíte (stylem) dve vrstvy pres sebe:
První z nich je odkaz.
Druhá je pouhý (casto tentýz) text (jinak barevný, dekorovaný, posunutý, ...), ale neviditelná.
Kdyz nad to najede mys, zviditelníte druhou vrstvu a zneviditelníte první. Kdyz mys odjízdí, vrátíte to.
To je celé. Teorie jednoduchá, praxe dá trochu práce.
Jednoduchý príklad, který se zachová korektne (ovsem neaktivne) i v ostatních prohlízecích, vysvetlí vse (tedy pokud si zobrazíte komentovaný zdroják).
Príklad ruzných stylu mozná inspiruje.

 

 

 

 

Polopruhledné pozadí textu nebo obrázku

Jako tento odstavec.
Klícem je transparentní gif.
Celý dokument má nejaké svoje pozadí. Jako pozadí odstavce (ci bunky tabulky a i jiných elementu) se pouzije obrázek, který vypadá jako sachovnice, kde místo bílých polícek je zvolená barva, místo cerných transparentní pozadí. Co polícko, to jeden pixel. Skrz "cerná" polícka pak prosvítá, co je za nimi, ale díky velké hustote pixlu není videt, jakou fintou je to udeláno, a vypadá to jako barevný filtr.

Funguje to samozrejme jen v prohlízecích podporujících styly. Jak se to udelá: napr. takto: 
<body background="obrazek.jpg">
...
<p style="background-image: url('filtr_zluty.gif')">
Text ci obrázek
</p>
...
</body>
S tímto pozadím to není moc dobre videt. Podívejte se na lepsí príklad.

A dulezitá poznámka: ctvereckovaný transparentní gif se (narozdíl ode mne) nebojte udelat dost velký, treba 100 x 50 pixlu, jinak se na pomalejsích pocítacích bude vykreslovat prílis dlouho.