REFERAT INFORMATICA | Meniuri flotante in JavaScript

Publicat de: Madalina Marcu

Se poate întîmpla, în crearea unei interfete web, sa doriti ca o parte a acesteia sa fie permanent în atentia utilizatorilor / vizitatorilor. Fie ca este vorba despre logo-ul companiei sau despre un meniu de navigare, este util ca acest element sa ramîna în cîmpul vizual al unei persoane, chiar daca aceasta deruleaza fereastra (browser-ului în acest caz). Solutia pe care am ales-o eu face uz, evident, de JavaScript.
In interesul claritatii expunerii si pentru a nu ma pierde în generalitati, voi prezenta o implementare concreta, pe care am si folosit-o în crearea unui site web. Este vorba despre un meniu de navigare, care “urmareste” vizitatorul cînd 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 întrebare “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 browsere, 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 în partea stânga, iar continutul în partea dreapta. Prezenta banner-ului este optionala, la fel cum optionala este si adaugarea unui banner la baza inferioara a paginii. Daca va întrebati cumva de ce am prevazut în mod express prezenta unui banner, raspunsul e simplu: el poate servi atât pentru identificarea mai clara a paginii curente (poate fi inclus numele paginii, sectiunii), cât si pentru adaugarea banner-elor publicitare (cerinta devenita aproape standard în zilele noastre de Web-economizare).
Pentru ca pagina sa fie afisata coerent pe diferite rezolutii, toate elementele vor fi centrate în cadrul ferestrei browserului. Dimensiunile vor fi astfel calculate încât pagina sa nu necesite defilare orizontala nici macar la rezolutia 640×480. Acestea fiind stabilite, sa-i dam drumul.

Realizarea
Identificarea browserelor 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 în diferite versiuni ale browserelor. Asadar, versiunea efectiva nu ne intereseaza (cel putin atît timp cît 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, însa chiar cred ca este o gaselnita extraordinara). La ce foloseste? Ei bine, la determinarea dimensiunilor ferestrei – atentie, utile (în care pot fi afisate elemente) a – browser-ului. Secventa de cod pentru Netscape este:
awidth = window.innerWidth;
aheight = window.innerHeight;
iar pentru Internet Explorer:
awidth = document.body.clientWidth;
aheight = document.body.clientHeight;

Determinarea trebuie facuta dupa ce documentul a fost încarcat, însa înainte de a afisa elemente pe ecran. Poate va întrebati cum poate fi realizat acest lucru – încarcarea documentului, dar neafisarea elementelor paginii. Facem în urmatorul fel: pozitionam elementele paginii, numite în continuare Titlu, Meniu si Continut în “containere”
si le declaram drept hidden, folosind CSS (Cascading Style Sheets).


Observatie: Veti vedea în codul paginii valoarea 600 (pixeli) ce reprezinta latimea toatala a elementelor paginii. Mai elegant este sa declarati o constanta cu aceasta valoare, sa zicem mwidth, pe care sa o referiti ulterior (daca nu va mai aduceti aminte, prin &{mwidth}; – în codul HTML si pur si simplu mwidth în 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 în pagina. Pentru aceasta am definit o functie ShowPage(), apelata în urma aceluiasi eveniment, onload. Principalul lucru pe care îl 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 window – 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 îl 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 urmînd 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 îl stiu. Probabil ca nici programatorii de la Netscape nu îl 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 cît mai multe versiuni ale ambelor browsere. 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 în forma actuala, el este menit mai ales dezvoltarii unor aplicatii mai complexe. Sau poate fi adaptat pentru un logo derulant, cum se întîlneste des pe Web. Oricare ar fi utilitatea sa viitoare, sper ca îl veti fi gasit instructiv.
 

NOTA IMPORTANTA:
 ARTICOLELE PUBLICATE IN PAGINA DE REFERATE AU SCOP DIDACTIC SI SUNT ELABORATE IN URMA UNEI DOCUMENTARI SUSTINUTE. ESTE STRICT INTERZISA PRELUAREA ARTICOLELOR DE PE SITE SI PREZENTAREA LOR LA ORELE DE CURS. Referatele din aceasta sectiune sunt trimise de diferiti colaboratori ai proiectului nostru. Referatele va sunt prezentate pentru COMPLETAREA STUDIULUI INDIVIDUAL, si va incurajam si sustinem sa faceti si voi altele noi bazate pe cercetari proprii.

REFERAT FIZICA | Telescopul optic

REFERAT FIZICA | Telescopul optic

REFERAT FIZICA | Cuptor cu creuzet pentru topire Al

REFERAT FIZICA | Cuptor cu creuzet pentru topire Al

REFERAT FIZICA | Influenta factorilor fizici

REFERAT FIZICA | Influenta factorilor fizici

REFERAT FIZICA | OCHIUL OMENESC – APARAT OPTIC

REFERAT FIZICA | OCHIUL OMENESC – APARAT OPTIC

REFERAT FIZICA | CONDENSATOARE ELECTROLITICE

REFERAT FIZICA | CONDENSATOARE ELECTROLITICE

REFERAT FIZICA | Iluzii optice

REFERAT FIZICA | Iluzii optice

REFERAT FIZICA | Istoria telescopului

REFERAT FIZICA | Istoria telescopului

REFERAT FIZICA | Instrumente optice specializate

REFERAT FIZICA | Instrumente optice specializate

REFERAT FIZICA | Un atom in spatiu

REFERAT FIZICA | Un atom in spatiu

REFERAT FIZICA | Instalatii electrocasnice

REFERAT FIZICA | Instalatii electrocasnice

REFERAT FIZICA | Lasere

REFERAT FIZICA | Lasere

REFERAT FIZICA | Energia eoliana

REFERAT FIZICA | Energia eoliana

REFERAT FIZICA | Calorimetrie

REFERAT FIZICA | Calorimetrie

REFERAT FIZICA | Avioanele

REFERAT FIZICA | Avioanele

REFERAT FIZICA | Despre seisme si consecintele lor

REFERAT FIZICA | Despre seisme si consecintele lor

REFERAT FIZICA | Executarea bransamentelor aeriene

REFERAT FIZICA | Executarea bransamentelor aeriene

REFERAT FIZICA | Principiul conservarii energiei

REFERAT FIZICA | Principiul conservarii energiei

REFERAT FIZICA  |Fotonul | Efectul fotoelectric

REFERAT FIZICA |Fotonul | Efectul fotoelectric

REFERAT FIZICA | Bomba cu neutroni

REFERAT FIZICA | Bomba cu neutroni

REFERAT FIZICA | Telefonul | Alexander Graham Bell

REFERAT FIZICA | Telefonul | Alexander Graham Bell

REFERAT FIZICA | Poluarea sonora

REFERAT FIZICA | Poluarea sonora

REFERAT FIZICA | TIPURI DE BAROMETRE

REFERAT FIZICA | TIPURI DE BAROMETRE

REFERAT FIZICA | STUDIUL TENSIUNII SUPERFICIALE A LICHIDELOR

REFERAT FIZICA | STUDIUL TENSIUNII SUPERFICIALE A LICHIDELOR

REFERAT FIZICA | Studiul efectului Seebeck

REFERAT FIZICA | Studiul efectului Seebeck

REFERAT FIZICA | DETERMINAREA COEFICIENTULUI DE VÂSCOZITATE AL UNUI LICHID CU VÂSCOZIMETRUL OSTWALD

REFERAT FIZICA | DETERMINAREA COEFICIENTULUI DE VÂSCOZITATE AL UNUI LICHID CU VÂSCOZIMETRUL OSTWALD

REFERAT FIZICA | Determinarea vitezei sunetului

REFERAT FIZICA | Determinarea vitezei sunetului

REFERAT FIZICA | Studiul propagarii caldurii

REFERAT FIZICA | Studiul propagarii caldurii

REFERAT FIZICA | Determinarea constantei Boltzmann

REFERAT FIZICA | Determinarea constantei Boltzmann

REFERAT FIZICA | Proiect “Automat de impachetat chibrituri”

REFERAT FIZICA | Proiect “Automat de impachetat chibrituri”

REFERAT FIZICA | Redresarea curentului alternativ

REFERAT FIZICA | Redresarea curentului alternativ

REFERAT FIZICA | Amplificarea

REFERAT FIZICA | Amplificarea

REFERAT FIZICA | Undele mecanice

REFERAT FIZICA | Undele mecanice

REFERAT FIZICA | Ultrasunetele

REFERAT FIZICA | Ultrasunetele

REFERAT FIZICA | Comanda releului prin calculator

REFERAT FIZICA | Comanda releului prin calculator

REFERAT FIZICA | Marie Curie si Pierre Curie

REFERAT FIZICA | Marie Curie si Pierre Curie

REFERAT FIZICA | ALBERT EINSTEIN

REFERAT FIZICA | ALBERT EINSTEIN

Filozofie

Filozofie

Geografie

Biologie de clasa 6

Lectie virtuala Drept

S-ar putea sa iti placa…

LIMBA SI LITERATURA ROMANA | I. L. Caragiale | D-l Goe

I.L.Caragiale este alături de Eminescu şi Creangă unul dintre cei mai mari scriitori ai poporului nostru. Este autorul a patru comedii (O scrisoare pierdută, O noapte furtunoasă, Conul Leonida faţă cu reacţiunea, D’ale carnavalelor) a unei drame (Năpasta), a publicat...

LIMBA SI LITERATURA ROMANA | Ion Creanga | Povestea lui Harap – Alb

LIMBA SI LITERATURA ROMANA | Ion Creanga | Povestea lui Harap – Alb

Fara indoiala o capodopera, “Povestea lui Harap-Alb” este cel mai reprezentativ basm al lui Creanga, nu pentru ca in el sunt cumulate majoritatea temelor, motivelor, modalitatilor narative specifice basmului, ci pentru ca releva constiinta scriitoriceasca a autorului,...