HTML, frejmovi i JavaScript

[ dilbe @ 05.12.2003. 23:56 ] @

Evo par početničkih pitanja.

1. Stranica index.html sadrži dva frejma, levi za meni i desni za sadržaj. Problem je što treba da postoji stavka menija koja kada se odabere otvara podmeni od nekoliko linkova koji se prikazuju uvučeni kao <ul>. Ako se klikne na bilo koju od ostalih stavki glavnog menija, podmeni treba da se "zatvori". Koje je najelegantnije rešenje za "čist" HTML? Treba li za svaku stranicu sadržaja napraviti fajl koji pomoću frejmova uključuje odgovarajući meni i sadržaj, možda svaka stranica sa sadržajem treba da uključuje svoj meni u frejmu, ili postoji način da se koristi jedan meni i da se jednim klikom promene sadržaji oba frejma (čist HTML)?

2. Ako samo glavna stranica sadrži frejmove, mogu li se nekako videti naslovi stranica sa sadržajem umesto naslova ove stranice?

3. Kada se iz JavaScript-a otvori novi prozor, i čitav njegov sadržaj generiše, zašto se onda ta stranica ne može snimiti u tom obliku pomoću "Save As..."? Probao sam iz Opere 7.x i IE 5. Dobijem uvek kopiju originalne (glavne) stranice.

[ NikolaVeber @ 06.12.2003. 08:53 ] @

Savet nr 1, 2 i 3 : batali frejmove.

To sto ti kazes moze da se uradi sa slojevima i javascriptom. Pogledaj na www.frigofrutti.co.yu (ako imas ie, mada mozda ide i u operi). Samo za to ti treba malo vise programiranja u javaScriptu... ali cini mi se da takvih stvari imas vec gotovih na netu.

[ dilbe @ 07.12.2003. 00:03 ] @

Ne, to mora biti čist-HTML™. Sadržaj je važniji od forme za koju se koristi isključivo CSS. Šta je najbolje uraditi u tom slučaju?

Treće pitanje nije vezano za frejmove.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Open Window</title>
    <script language="JavaScript">
    
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="Open Window" OnClick="OpenWin()">
    </form>
  </body>
</html>

Zašto se sadržaj novog prozora ne može snimiti sa "Save As..."?

[ NikolaVeber @ 08.12.2003. 15:24 ] @

Citat:

dilbe:
Ne, to mora biti čist-HTML™.

Sta podrazumevas pod pojmom "čist-HTML™" ? Da se 100% pridrzava standarda, ili nesto drugo ?

[ dilbe @ 09.12.2003. 01:00 ] @

Citat:

NikolaVeber:
Sta podrazumevas pod pojmom "čist-HTML™" ? Da se 100% pridrzava standarda, ili nesto drugo ?

Da, pridržavanje standarda, korišćenje ograničenog skupa tagova (za izgled se koristi CSS) i izbegavanje JS-a, Jave, Flash-a, DHTML-a i ostalih "đakonija", kako neko reče. Jednostavno i funkcionalno.

[ -zombie- @ 09.12.2003. 03:56 ] @

uz takvo pridržavanje standardima i izbegavanje svetlucavih đakonija obično ide i preporuka o izbegavanju frejmova.

ako već moraš, probaj iframe.

ali generalno, ja tebe baš nisam razumeo šta želiš da postigneš. ako moga da malo bolje objasniš, ili još bolje da nacrtaš (ja sam malo spor. meni sve mora da se crta ;)

[ NikolaVeber @ 09.12.2003. 12:55 ] @

Sta vise, preporuke za "pridrzavanje standarda" ti skoro zabranjuju da koristis frejmove (tj oni su oznaceni kao tehnika koju ne treba upotrebljavati), a sve je veca tendencija ka potpunom integrisanju layera (koji se koriste za layout umesto tabela) - prelazak na xhtml
... A DHTML ti nije nista vise od mogucnosti da ostvaris bolju interakciju sa korisnikom - pridrzavajuci se standarda. Sada da ne ulazimo u to kojeg su kvaliteta mnoge dhtml aplikacije na netu...
www.w3.org

[ dilbe @ 09.12.2003. 13:36 ] @

Ma stvar je vrlo prosta. Samo glavna stranica pravi dva frejma, jedan za meni sa leve strane i drugi za sadržaj sa desne. E sad, meni ne bi trebalo da se skroluje zajedno sa glavnom stranicom i zato se koristi frejm. Ovako nekako

Code:

  *  strana 1
  *  strana 2
  *  strana 3
  *  strana 4
  *  strana 5

Kada se klikne na link "strana 3" navigacioni meni treba da se zameni ovim

Code:

  *  strana 1
  *  strana 2
  *  strana 3
     *  strana 3.1
     *  strana 3.2
     *  strana 3.3
  *  strana 4
  *  strana 5

Kada se kasnije klikne na bilo koji link različit od "strana 3.x", meni se "zatvara" i vraća se onaj prvi, ali istovremeno treba da se učita i odgovarajuća stranica sa sadržajem. Za elemente se koristi najobičniji <ul>, a ja tražim najelegantnije rešenje za čist HTML (bez slojeva i sl.).

Pitanje u vezi JavaScript-a nema veze sa ovim.

[ -zombie- @ 09.12.2003. 14:17 ] @

kratak odgovor: ne može.

duži odgovor: ne može tako kako si zamislio, pod tim uslovima (sa frejmom i bez JSa).

dakle, ili ćeš dodati malo JSa u igru, ili ćeš izbaciti frejm.

ja preporučujem drugo rešenje, a u tom slučaju, meni možeš da pozicioniraš npr sa position: fixed;

vidi kako to izgleda na http://www.w3.org/Style (mada ne radi u IE)

[ dilbe @ 10.12.2003. 01:55 ] @

Može, ali je kod mračan i zao: za svaku stranicu sadržaja pravi se posebna stranica koja pomoću frejma uključuje sadržaj zajedno sa odgovarajućim menijem. Linkovi u menijima učitavaju ove stranice umesto onih sa sadržajem.

Bitno je da se meni ne skroluje zajedno sa sadržajem, a ne znam da li se to može još nekako izvesti sa ovim ograničenjima. Treba mi portabilno rešenje.

[ -zombie- @ 10.12.2003. 05:25 ] @

a misliš da za svaku stavku u meniju definišeš dva nova fajla, jedan za frameset a drugi za frejm?

ja to računam pod "ne može" jel je odvratno rešenje.

ako je ovo jedna od opcija, onda definitivno biram JS rešenje (ne više od 5 linija koda).

[ dilbe @ 10.12.2003. 16:22 ] @

OK, nisam ekspert, kako bi glasio minimalni JS kod?

[ -zombie- @ 18.12.2003. 19:59 ] @

sorry što kasnim malo.

evo ti rešenja koje malo kombinuje CSS i JS. moglo bi i bez CSSa, ali je ovako elegantnije.

Code:

<script>
    var active=null;

    function menuclick(item) {
        if (active!=null) {
            active.className='';
        }
        active=item.parentNode;
        active.className='active';
    }
</script>
<style>
    ul {
        display: none;
    }
    div.active ul {
        display: block;
    }
</style>

<div>
    <a href="#" target="pera" onclick="menuclick(this);">plavo</a>
    <ul class="menu">
        <li>svetlo</li>
        <li>tamno</li>
    </ul>
</div>

<div>
    <a href="#" target="pera" onclick="menuclick(this);">crveno</a>
    <ul class="menu">
        <li>svetlo</li>
        <li>tamno</li>
    </ul>
</div>

<div>
    <a href="#" target="pera" onclick="menuclick(this);">zeleno</a>
    <ul class="menu">
        <li>svetlo</li>
        <li>tamno</li>
    </ul>
</div>

<iframe name="pera" style="position: absolute;
        top: 50; left: 300; width: 100; height: 100;">
</iframe>

naravno, možeš da poboljšaš izgled svega toga CSSom, ali to verovatno ne moram da ti govorim ;)

inače, IFRAME sam koristio da bi mi služio kao target, da ne bi komplikovao sa 3 različita fajla (frameset, ovo, ono..)

[ dilbe @ 22.12.2003. 12:27 ] @

To je to, hvala puno! Postoji li još neki način sem ovog trika sa CSS-om? Da li se može promeniti naslov glavnog prozora kada se koristi frameset i frejmovi? Ovaj kod nije "otporan" na history=>back (meniji se ne zatvaraju), može li se to ispraviti?

[ -zombie- @ 22.12.2003. 13:57 ] @

nema na čemu.

inače, nije ovo trik sa CSSom, nego samo elegantnije rešenje. bez CSSa bi recimo morao da nađem roditelja od kliknutog A taga (.parentNode), pa da prođem kroz svu njegovu decu (.childNodes[]), pa da nađem UL tag, pa da mu postavim da je vidljiv/nevidljiv (.style.display='none'/'block').

složićeš se da je ovo što sam uradio elegantnije.

za naslov, sigurno može, ali nisam to nikad radio, pa ne znam kako. koliko meni treba vremena to da saznam, trebaće i tebi, pa pronađi sam..

[ dilbe @ 23.12.2003. 23:35 ] @

Ponuđeno rešenje jeste elegantnije, a mene zanima onako, čisto informativno, da li se meni može menjati i na drugi način, bez sakrivanja elemenata? Evo, sad sam tražio na gg i izgleda da se iz frejma ne može promeniti naslov glavne strane.

[ noviKorisnik @ 24.12.2003. 07:29 ] @

Referenca iz bilo kog frejma je top.document.title

Probaj: top.document.title = "Stanko menja naslov";
Ako se ne desi ništa, to znači da ne može (odnosno, samo je read-only).

[ dilbe @ 24.12.2003. 15:45 ] @

Citat:

noviKorisnik:
Referenca iz bilo kog frejma je top.document.title

Probaj: top.document.title = "Stanko menja naslov";
Ako se ne desi ništa, to znači da ne može (odnosno, samo je read-only).

Znam, a problem je što meni treba portabilno rešenje. Znači - ne može.

[ -zombie- @ 24.12.2003. 16:19 ] @

ako ti pod "portabilno" podrazumevaš "radi u svim browserima (koji podržavaju JS)", onda znači -- da može.

(u prevodu, ovo radi u svim browserima)

[ dilbe @ 24.12.2003. 18:06 ] @

Citat:

-zombie-:
(u prevodu, ovo radi u svim browserima)

A kada je onda read-only?

[ noviKorisnik @ 25.12.2003. 13:25 ] @

Sigurno je da ne radi u svim browserima koji podržavaju JS. Recimo, ne radi u Netscape 2.0... Tako je to s JS...

Bitno je podržavaju li to savremeni browseri. To je ono što sam mislio kad rekoh da treba da se proveri.

Razmisli koliko su ubijene perfomanse sajta ako se desi da kod nekog promila korisnika ne radi promena teksta naslovne linije.

Koliko je to funkcionalno degradiranje upotrebljivosti sajta za takve korisnike?

[ dilbe @ 27.12.2003. 01:04 ] @

OK, sredio sam, sledeći skript je ubačen u onload() handler svake stranice sa sadržajem.

Code:

function settitle() {
if (top.main != null)
top.document.title = top.main.document.title;
}

Meni bi bilo lepše da ovo radi f-ja menuclick(), ali ona se izvršava pre nego što je stranica učitana u frejm main. Je l' može na još neki način?

[ Dag @ 15.01.2004. 22:20 ] @

Javascript za navigaciju... c c c

Ovo nije na adresu Zombija zato shto je frame-man tako hteo. Ko shto reche Novi Korisnik (hi there:)) - promeni nick bre:): frejmovi se ne preporuchuju uopshte (depreciated) a joosh kombinacija s javascript i onLoad...

Sve je veci broj ljudi koji iskljuchuju active scritping tako shto... js navigation: losy variant.