U ovoj lekciji razmatramo svojstva prozorskog objekta, sa kojim možete dobiti veličinu radnog područja prozora preglednika (unutrašnja širina i unutrašnjost), veličine samog prozora (vanjsko i vanjsko i vanjskoight), njegova lokacija U odnosu na gornji lijevi ugao korisničkog zaslona (screeft i scortont) i pozicije pomaknite se (stranicaxffset igetyoffset).
Unutarnja i unutrašnja svojstva
Dizajnirani su za dobivanje veličina vidljive prozore radnog prostora pretraživača. Oni. Unutarnja i unutrašnja imovina dizajnirana su za dobivanje širine i visine područja u kojem se prikazuje HTML dokument. Ova svojstva su samo čitanje i povratne vrijednosti u pikselima.
Na primjer, dobijte visinu i širinu vidljivog prozora radnog prostora pretraživača:
Širina vidljivog prikaza (WidthContenarea):
Širina vidljivog prikaza (HighContenarea):
Oustatna širina i vanjska svojstva
Dizajnirani su za dobivanje veličine cijelog prozora preglednika, I.E. Uključujući alatne trake, traku za pomicanje, traku statusa, granice prozora itd. Oustatna širina i vanjska svojstva čitaju se samo i vraćaju širinu i visinu prozora u pikselima.
Na primjer, dobijte visinu i širinu prozora preglednika:
Širina prozora pregledača (širina profila):
Visina prozora pregledača (HeighWindow):
Svojstva Screetleft (Screenx) i Scretont (etriy)
Namijenjeni su da dobije koordinate lijevog gornjeg ugla ili dokumenta u gornjem lijevom uglu korisničkog zaslona.
U ovom slučaju, scenarij i svojstva zaslona rade u programu Internet Explorer i svojstva ekrana i ekrana u Mozilia Firefoxu. U Chromeu, safari pretraživačima, a drugi slični preglednici mogu se koristiti i svojstva ekrana i scortont i ekrana i svojstva ekrana.
Kada se koristi ova svojstva, potrebno je uzeti u obzir činjenicu da neki preglednici mogu vratiti koordinatu lijevog gornjeg ugla dokumenta, a neki preglednici koordiniraju gornji lijevi ugao prozora. Spremnici za scena (Screenx) i screentont (etriy) su samo za čitanje i vraćaju se vrijednosti udaljenosti u odnosu na lijevi ugao vodoravno i vertikalni u pikselima.
Na primjer, povucite poruku koordinate x i u lijevom uglu trenutnog prozora preglednika (dokumenta) u odnosu na gornji lijevi ugao ekrana:
Saznajte koordinate
Pagexoffset svojstva (Scrollx) i PagetyOffset (Scrollx)
Oni su namijenjeni da dobiju niz piksela na koje je dokument pomičan u vodoravnom (pagnefsefset) ili vertikalnom (PagetyOffset) smjeru relativnog gornjeg lijevog ugla prozora. Svojstva Scrollx i pomični su ekvivalenti prema svojstvima Pagexoffset i PagetyOffset. Ova svojstva su samo čitanje.
Na primjer, za prikaz broja piksela na koje je dokument pomičan u vodoravnom (PageSoffset) i vertikalnom (PagetyOffset) smjeru.
Naučite položaje trake za pomicanje
Zdravo! U nastavku teme u ovoj lekciji, takvo pitanje razmotrit ćemo kao web stranicu koja se pomiče i manipuliraju veličinama preglednika. Kako mogu pronaći širinu preglednika? Kako se pomaknuti putem JavaScript web stranice? Odgovori na ova pitanja mislim da ćete pronaći u ovoj lekciji.
Širina / visina vidljivog dijela prozora preglednika
Svojstva klijenta / visine za element je samo širina / visina vidljivog područja prozora.
Ne prozor.innerwidth / visina
Treba napomenuti da svi preglednici, osim IE8, također mogu podržati svojstva prozora.innerwidth / unutrašnjost. Oni sačuvaju trenutnu veličinu prozora.
Koja je razlika? Pitate. Sigurno je mali, ali izuzetno je važan.
Svojstva klijenta / visine, ako postoji traka za pomicanje, vratite širinu / visinu unutar nje, dostupne cijelom dokumentu i prozor.innerwidth / visina - ignorirat će njegovu prisutnost.
Ako desna strana stranice uzima traku za pomicanje, tada će ove linije ukloniti različite:
Upozorenje (prozor.innerwidth); // svu punu širinu prozora upozorenja (dokument.Documentelement.ClientWidth); // širina manje svitak
Obično nas zanima samo raspoloživa širina prozora, na primjer, da bismo nešto izvukli, odnosno minus trake za pomicanje. Stoga se često koristi dokumentacija.ClientWidth.
Širina / visina web stranice uzimajući u obzir pomicanje
Da, teoretski, vidljivi dio stranice je dokumentacija.ClientWidth / visina, ali puna veličina uzima u obzir traku za pomicanje je analogno, dokumentorom / scrollheetth.
To vrijedi za sve obične predmete.
Ali za stranicu sa ovim svojstvima može doći do problema kada je pomicanje tamo, onda nije. U ovom slučaju rade pogrešno. Moram reći da u preglednicima Chrome / Safari i Opera, u odsustvu trake za pomicanje, vrijednost dokumentacije.Scrollheeght.Scrollheight u ovom slučaju može biti i manji od dokumentacije.Clientheight, što, naravno, izgleda da nešto ne logično
Ovaj problem može se pojaviti posebno za dokumentaciju.
Ali moguće je pouzdano odrediti veličinu stranice, uzimajući u obzir pomak, jednostavno uzimajući maksimum ovih nekoliko svojstava:
Var Scrollvisota \u003d math.max (Document.BoDocumentelement.Scrollheight, Document.Botme.Offsetvisota, Document.Documentelement.Offsetheight, dokument.Documentelement.Clientheight); Upozorenje ("Visina, uzimajući u obzir pomicanje:" + Scrollvisota);
Dobivanje trenutnog pomicanja
Ako konvencionalni element ima trenutnu pomicanje u Scrollleft / Scrolltop.
Šta je sa stranicama?
Činjenica je da će većina pretraživača ispravno obraditi dokumentarnost.Scrolllell / top upit, međutim, Safari / Chrome / Opera ima greške jer biste trebali koristiti dokument.
Pa, da biste u potpunosti zaobišli ovaj problem, možete koristiti svojstva prozora.pagexoffset /getyoffset:
Upozorenje ("Trenutna pomicanje odozgo:" + prozor.pageyoffset); Upozorenje ("Trenutno pomicanje s lijeve strane:" + prozor.pagexoffOffOffOffset);
Ovakva nekretnina:
- IE8 nije podržan.
- Oni ih mogu čitati samo, ali nemoguće je promijeniti.
Ako IE8 nije zabrinut, onda jednostavno koristimo ove svojstva.
Verzija unakrsnog pregledača sa IE8 pruža opciju na dokumentu:
Var scrollltop \u003d prozor.pageyyoffset || dokument.documentelement.scrolltop; Upozorenje ("Trenutna pomična:" + ScrollTop);
Stranica s promjenama pomicanja: Scrollto, Scrollby, ScrollntintoView
Da biste se kretali putem stranice pomoću JavaScripta, svi su elementi moraju biti u potpunosti učitani.
Na uobičajenim elementima Scrolltop / Scrollleft, u principu možete promijeniti, a istovremeno će se predmet pomicati.
Niko vas ne smeta na isti način i sa stranom. U svim preglednicima, pored Chrome / Safari / Opere, možete se kretati jednostavnim instalacijskim dokumentom.Documentelement.Scrolltop i u navedenom - trebali biste koristiti dokument.Dod.ScrollTop za ovo. I sve će raditi savršeno.
Ali postoji još jedna, univerzalno rješenje - posebne metode pomicanja prozora stranice.Scrollby (x, y) i prozor.Scrollto (Pagec, Paget).
- Metoda Scrollby (X, Y) pomaknut će se kroz trenutne koordinate.
- Metoda Scrollto (Pagex, Pagench) pomiče stranicu na navedene koordinate u odnosu na cijeli dokument. Bit će ekvivalentno instaliranju ScrollLelft / Scrolltop svojsts. Da biste se kretali na početak dokumenta, možete odrediti koordinate (0,0).
scrollIndoView.
Elem.Scrolllintowiew metoda (vrh) mora se pozvati na element i pomicati stranicu tako da je element do vrha, ako je gornji parametar istinita, a pri dnu, ako je vrh jednak lažnom. Štaviše, ako ovaj gornji parametar nije naveden, bit će jednak istinitim.
Zabraniti se
Postoje situacije kada je potrebno napraviti dokument "ne srušen". Na primjer, kada se prikazuje veliki dijaloški okvir iznad dokumenta, tako da se posjetitelj može pomaknuti kroz ovaj prozor, ali ne i sam dokument.
Da bi se zabranio pomicanje stranice, dovoljno je isporučiti dokument.Body.style.OverFlow \u003d "Skrivena" objekta.
Umjesto dokumenta. Sve, može postojati bilo koji element čijeg pomicanja mora biti zabranjeno.
Ali nedostatak ove metode je da sam šipka sama pomešanja sama nestaje. Ako je zauzela neku širinu, onda se sada ova širina oslobođena, a sadržaj stranice bit će proširen, tekst "Skoči", uzimajući sve usedno mjesto.
Rezultati
- Da biste dobili veličine vidljivog dijela prozora, koristi nekretninu: dokument.Documentelement.clientWidth / visina
- Za uzem u obzir treba koristiti veličinu trake za pomicanje: math.max (dokument.Documentement.Scrollheight.Scrollheight, dokument.BocFoffsetheight, dokument.Documentelement.Offesetheight , dokument.Documentelement .Clientheight);
Prilikom razvoja sučelja za web lokacije često morate koristiti JavaScript. Naravno da je loše, ali u nekoj situaciji je jednostavno nemoguće potpuno implementirati u CSS-u.
Najviše zarobljenika da imam u određivanju širine ili visine prozora preglednika za daljnje manipulacije. Pod prekirenjem sve informacije o ovoj temi.
Gdje se može dobro doći?
Neću govoriti za sve, ali impresionira mi se u integraciji sa Textpattern` svim vrstama galerija, klizača itd., Gdje je sve napisano na čistom JS-u. Stvari koje su čvrsto vezane za JS su rijetke, ali još uvijek se susreću, tako da se pojavila ova bilješka.
Možete definirati 2 načina: JS ili jQuery.
Određivanje širine ili visine pomoću čiste JS
Ovo je najpoželjniji način, jer JavaScript motor ima gotovo svaki moderni pretraživač. Čak su i mobilni preglednici naučili raditi sa JS-om.
Naravno, postoji mogućnost da se korisnik obrađuje za isključivanje JS obrade u pretraživaču, ali čini mi se, takvi "čudni ljudi" nisu toliko, jer gotovo svaka stranica koristi bilo kakva rješenja koja rade na JS-u.
U JS-u za određivanje veličine ekranaMorate koristiti funkcije:
Ecret.idth // Screen širine ekrana.Height // visina ekrana
Evo besmislenog primjera upotrebe:
Ako ga koristite za pozicioniranje nekih stavki na stranici, tada će se najbolje rješenje koristiti, ali veličina ekrana, ali veličine prozora preglednika. U JS-u se radi ovako:
Document.Body.ClientWidth // Dokument sa širine pregledača.Body.Clientheight // Visina preglednika
U skladu s tim, evo besmislenog primjera upotrebe:
Definicija veličina pregledača pomoću jQuery
Lično koristim metodu koja je opisana u nastavku. Ova metoda radi samo ako ste prethodno povezali jQuery biblioteku na web mjestu. Na svim web lokacijama koje moram učiniti da ova biblioteka standardno je DE / infakt.
Da biste koristili za naš zadatak JQuery, morate koristiti kod:
$ (Prozor). Širina (); // Širina pretraživača $ (prozor). Veght (); // Visina preglednika
I na kraju bih želio reći da ako je moguće učiniti bez JS i jQuery uopšte ili djelomično, potrebno je djelovati.
Da kažem u društvenim. Mreže
Za šta je to potrebno? Na primjer, imamo prekrasan izgled stranice, koji sve njegove ljepote pokazuju samo prilikom rješavanja, recimo, 1600 po 1200. Na primjer, ima vrlo veliku prekrasnu šešir. Šta će se dogoditi ako osoba pređe na web mjesto rezolucije od 1024 do 768? Da, samo će šešir biti vidljiv. Nije dobro? Možda. Zašto onda ne napravite takvo stvar da bi se po visini / ekrana preglednika, šešir jednostavno odsjekao i otišao na meni i ostatak stranice? U, ono što je potrebno.
Zapravo, opisao sam jedan od primjera koji sam naišao u praksi (vidi Cartigintku). Riješio je problem jednostavno - putem JavaScripta. A možda se kroz jQuery ne sećam. Ovdje ću opisati obje metode.
Prije svega potrebno je razlikovati definiciju " rezolucija ekrana"I" veličina prozora preglednika"(Budući da su u nekim člancima bilo incidenata - tuče sami metode, ponuđeni su drugima, iako u jednom slučaju mjerim rezoluciju preglednika, u drugom - rezoluciju monitora).
Potrebno je odrediti od samog početka da je za vas važnije. U ovom slučaju primjera sa poklopcem, fokusirao sam se na rezoluciju ekrana (monitor): Sve je isto, stranica je lijepa ako se prozor preglednika ručno smanjuje, a zatim pustite da pretraživač započne prilikom gledanja ove stranice (nema ništa jesti cca.). Ali, na primjer, prilagoditi proširenu sliku jQuery Lightbox galerije, koristio sam širinu i visinu pretraživača.
A nakon što ste odabrali, napišite kod, možete u zaglavlju web mjesta. Prvo, primjer orijentiran na rezolucija ekrana.
3-6 linija - čisti JavaScript, 7-11 linija - primjer na jQuery. JavaScript metode koriste se za određivanje širine i visine. Širine i ekrane.ight metode. Ono što su redovi napravljeni, jasni: Prva skripta propisuje put do opcionalnog CSS datoteke, a drugi - za ukupni blok identifikatora, objekta CSS "Pozicija".
Gledamo drugi primjer, ali koji će se fokusirati na rezoluciju pretraživača. Svejedno, metode su se promijenile.
Dakle, iz dva primjera, kratak pregled - šta koristiti za ono što:
- ekran. Širina.. Definira širinu ekrana (monitor).
- ekran.Oweght. Određuje visinu ekrana (monitor).
- dokument.Dodmi.Clientridth.. Određuje širinu pretraživača.
- dokument.Body.Clientheight. Određuje visinu pretraživača.
- $ (Prozor). Šivica (). Određuje širinu pregledača, ali samo ako imate jQuery.
- $ (Prozor) .Ev (). Određuje visinu preglednika, ali samo ako imate jQuery.
Jasno je da ako koristite jQuery, to je poželjno na 5 opcija od 3, a 6, a ne 4 - oni su kraći. Pa, i tako - ukus i boju.
Što se tiče specifičnih zapisa o visini i širine ekrana za jQuery - tada ih ne znam. Teoretski, dizajn redaka tipa 5-6 treba biti, ali nekako nije naišao na praksu, dajem mi, nisu. Da, i nema potrebe, ekrana. Širina je dovoljno kratak dizajn, dovoljno je.
Da, još uvijek postoji $ (dokument). Širina () - određuje širinu HTML dokumenta. Koristite u praksi - nekako sumnjiva. Ko zna - bit ću mi drago ako dijelite.
Danas sve! Držite do vikenda i masivno idite na kebab! (Osim ako niste bolesni sa nečim poput nekih - cca.). Sretno!
