...t, de JavaScript. In interesul claritatii expunerii si pentru a nu ma pierde in generalitati, voi prezenta o implementare concreta, pe care am si folosit-o in crearea unui site eb. Este vorba despre un meniu de navigare, care urmareste vizitatorul cind acesta deruleaza pagina.. Si, dupa cum am amintit, nu este vorba despre folosirea frame-urilor ci a JavaScript. Caci, veti vedea, pozitia nu este statica, ci este calculata pe masura derularii paginii. Inainte de toate, se ridica fireasca intrebare ce voi construi eu aici. Reformulez cum se numeste dracovenia asta. Cel mai des un asemenea element este numit sliding toolbar menu.. Traducerea si adaptarea mea ar fi meniu flotant. Si cred ca sintagma acopera scopul si comportarea acestui element. Nu ma pot abtine sa nu exprim si unul dintre cele mai mari regrete ale mele. Veti putea constata si dumneavoastra realizarea efectiva a unui meniu flotant nu este extrem de complicata. Din pacate, din cauza incompatibilitatilor dintre brosere, asigurarea cadrului de lucru necesita cel putin la fel de multa munca si mult mai multa testare. In fine, asta e. Ne adaptam conditiilor de lucru. Proiectarea In urma proiectarii am ajuns la urmatoarea configuratie a ferestrei Dupa cum se poate observa, meniul va fi afisat in partea stanga, iar continutul in partea dreapta. Prezenta banner-ului este optionala, la fel cum optionala este si adaugarea unui banner la baza inferioara a paginii. Daca va intrebati cumva de ce am prevazut in mod express prezenta unui banner, raspunsul e simplu el poate servi atat pentru identificarea mai clara a paginii curente poate fi inclus numele paginii, sectiunii, cat si pentru adaugarea banner-elor publicitare cerinta devenita aproape standard in zilele noastre de eb-economizare. Pentru ca pagina sa fie afisata coerent pe diferite rezolutii, toate elementele vor fi centrate in cadrul ferestrei broserului. Dimensiunile vor fi astfel calculate incat pagina sa nu necesite defilare orizontala nici macar la rezolutia 640x480. Acestea fiind stabilite, sa-i dam drumul. Realizarea Identificarea broserelor se face simplu, prin doua linii de cod isIE document.all 1 0 isNS document.layers 1 0 Este suficienta aceasta identificare, caci nu se folosesc elemente ultra-specifice, care sa se stie ca ridica probleme in diferite versiuni ale broserelor. Asadar, versiunea efectiva nu ne intereseaza cel putin atit timp cit este peste 3, pentru Netscape si peste 4 pentru Internet Explorer. Secventa urmatoare de cod este una extrem de interesanta si utila nu ar trebui sa laud chiar eu codul, insa chiar cred ca este o gaselnita extraordinara. La ce foloseste Ei bine, la determinarea dimensiunilor ferestrei - atentie, utile in care pot fi afisate elemente a - broser-ului. Secventa de cod pentru Netscape este aidth indo.inneridth aheight indo.innerHeight iar pentru Internet Explorer aidth document.body.clientidth aheight document.body.clientHeight Determinarea trebuie facuta dupa ce documentul a fost incarcat, insa inainte de a afisa elemente pe ecran. Poate va intrebati cum poate fi realizat acest lucru - incarcarea documentului, dar neafisarea elementelor paginii. Facem in urmatorul fel pozitionam elementele paginii, numite in continuare Titlu, Meniu si Continut in containere si le declaram drept hidden, folosind CSS Cascading Style Sheets. Observatie Veti vedea in codul paginii valoarea 600 pixeli ce reprezinta latimea toatala a elementelor paginii. Mai elegant este sa declarati o constanta cu aceasta valoare, sa zicem midth, pe care sa o referiti ulterior daca nu va mai aduceti aminte, prin ImidthS - in codul HTML si pur si simplu midth in cadrul script-urilor. Dupa crearea layer-elor a nu se confunda cu elemtele specifice Netscape - se mai numesc layer-e si elementele div ele trebuie afisate si pozitionate corect in pagina. Pentru aceasta am definit o functie ShoPage, apelata in urma aceluiasi eveniment, onload. Principalul lucru pe care il realizeaza functia este modificarea unor proprietati ale layer-elor, proprietati ce tin tot de CSS. In acelasi context trebuie apelata functia care determina derularea ferestrei. Functia este numita ScroolHandler. Ea are doua componente principale modifica elementul top distanta elementului fata de marginea de sus a ferestrei si asigura reapelarea sa automata, folosind setTimeout pentru mai multe detalii a se vedea e-mail REPORT nr.16, JavaScript - trusa de instrumente. Derularea paginii poate fi obtinuta prin proprietatea obiectului indo - vezi e-mail REPORT nr.17 - JavaScript - obiectul muncii pageYOffset, pentru Netscape, iar pentru IE prin proprietatea obiectului document, scrollTop. Referitor la intervalul setat pentru reactivarea functiei, depinde de efectul pe care il doriti - urmarire brusca sau una mai lina valori mai mici pentru timeout. O valoare moderata este 150 milisecunde. Nota ds este o variabila globala ce mentine ultimul offset deplasare a paginii. Cam aceasta este realizarea meniului. Un exemplu de pagina ce contine codul JavaScript si principalele elemente HTML amintite puteti vedea urmind link-ul de mai jos. O singura remarca mai am folosirea tag-ului spacer specific Netscape este necesara caci altfel Netscape taie ultimele linii ale layer-ului Continut. Motivul exact nu il stiu. Probabil ca nici programatorii de la Netscape nu il cunosc prea bine. Oricum tag-ul este ignorat nu produce nici un efect de catre Internet Explorer. Testarea si dezvoltari ulterioare Testarea este extrem de importanta. Banuiesc ca stiti acest lucru. Incercati codul pe cit mai multe versiuni ale ambelor brosere. In caz contrar s-ar putea sa aveti surprize - vezi necesitatea folosirii spacer-ului. Codul prezentat va asigura doar punctul de plecare. Desi poate fi folosit cu succes si in forma actuala, el este menit mai ales dezvoltarii unor aplicatii mai complexe. Sau poate fi adaptat pentru un logo derulant, cum se intilneste des pe eb. Oricare ar fi utilitatea sa viitoare, sper ca il veti fi gasit instructiv. !bàsblm HPaaaaaaaaahaxhaxBphhaxBOJph!hax5BOJaQJataJphhaxBa
JphhaxBOJaQJaaJphhaxCJ, dsAb9l HIJKLP...
Download