Kako odrediti visinu js stranice. Kako odrediti "rezoluciju ekrana" i "veličinu prozora pretraživača" u JavaScript-u i jQueryju. Promjena pomicanja po stranici: pomaknite se do, pomaknite se po, scrollIntoView

Kada razvijate interfejse za web stranice, često morate koristiti JavaScript. Naravno da je to loše, ali u nekim situacijama je jednostavno nemoguće sve implementirati u potpunosti u CSS-u.

Najčešća potreba koju imam je da odredim širinu ili visinu prozora pretraživača za dalju manipulaciju. Ispod reza su sve informacije o ovoj temi.

Gdje ovo može biti korisno?

Neću govoriti u ime svakoga, ali ovo mi dobro dođe u integraciji sa Textpatternom svih vrsta galerija, klizača itd., gdje je sve napisano u čistom JS-u. Stvari koje su striktno vezane za JS su rijetke, ali se dešavaju, zbog čega se i pojavila ova napomena.

Možete ga definirati na 2 načina: JS ili jQuery.

Određivanje širine ili visine koristeći čisti JS

Ovo je najpoželjnija metoda, budući da skoro svaki moderni pretraživač ima JavaScript motor. Čak su i mobilni pretraživači naučili da rade sa JS.

Naravno, postoji mogućnost da korisnik sam onemogući JS obradu u pretraživaču, ali čini mi se da nema mnogo takvih „čudnih ljudi“, jer skoro svaka stranica koristi neko rješenje koje radi na JS-u.

U JS-u, da biste odredili veličinu ekrana, morate koristiti funkcije:

Screen.width //Širina ekrana screen.height //Visina ekrana

Evo besmislenog primjera upotrebe:

upozorenje(screen.width+"x"+screen.height);

Ako ovo koristite za pozicioniranje nekih elemenata na stranici, onda bi najbolje rješenje bilo korištenje dimenzija prozora preglednika umjesto veličine ekrana. U JS-u se to radi ovako:

Document.body.clientWidth //Širina pretraživača document.body.clientHeight //Visina pretraživača

Shodno tome, evo besmislenog primjera upotrebe:

alert(document.body.clientWidth+"x"+document.body.clientHeight);

Dimenzioniranje pretraživača pomoću jQueryja

Lično koristim metodu opisanu u nastavku. Ova metoda radi samo ako ste prethodno instalirali jQuery biblioteku na svoju stranicu. Na svim stranicama koje moram napraviti, ova biblioteka je de facto standard.

Da bismo koristili jQuery za naš zadatak, moramo koristiti kod:

$(window).width(); //Širina pretraživača $(window).height(); //Visina pretraživača

I na kraju, želio bih reći da ako je moguće bez JS-a i jQueryja općenito ili djelimično, onda je to upravo ono što trebate učiniti.

Podijelite na društvenim mrežama mreže

čemu ovo služi? Na primjer, imamo prekrasan izgled web stranice, koji svu svoju ljepotu pokazuje samo u rezoluciji, recimo, 1600 puta 1200. Na primjer, ima jako veliko lijepo zaglavlje. Šta se događa ako osoba posjeti stranicu u rezoluciji 1024 puta 768? Da, samo šešir će biti vidljiv. Nije dobro? Možda. Zašto onda ne učiniti tako nešto da bi, s obzirom na visinu pretraživača/ekrana, zaglavlje jednostavno bilo odsječeno, a meni i ostatak stranice nestali? Vau, baš ono što ti treba.

Zapravo, opisao sam jedan od primjera sa kojima sam se susreo u praksi (vidi sliku). Problem sam riješio jednostavno - preko javascripta. Ili možda preko jQueryja, ne sećam se. Ovdje ću opisati obje metode.

Prije svega, potrebno je razlikovati definicije “rezolucije ekrana” i “veličine prozora preglednika” (pošto je u nekim člancima bilo incidenata - kritikovali su neke metode, predlagali druge, iako su u jednom slučaju mjerili rezoluciju pretraživača, u drugom - rezolucija monitora).

Morate od samog početka odrediti šta vam je važnije. U slučaju tog primjera sa zaglavljem, vodio sam se rezolucijom ekrana (monitora): ipak je stranica prelijepa, ako se ručno smanji prozor pretraživača, onda neka prošire svoj pretraživač na cijeli ekran kada gledaju ovo sajt (nemaju posla, znate - napomena urednika). Ali, na primjer, da bih prilagodio proširenu sliku galerije jQuery Lightbox, koristio sam širinu i visinu pretraživača.

I nakon što smo odabrali, upisujemo kod, možda u zaglavlje stranice. Prvo primjer fokusiran na rezoluciju ekrana.

Redovi 3-6 su čisto javascript, redovi 7-11 su primjer u jQueryju. Za određivanje širine i visine koriste se javascript metode screen.width i screen.height. Ono što linije rade je jasno: prva skripta specificira putanju do dodatni fajl CSS, a drugi postavlja css svojstvo “background-position” za blok sa ukupnim identifikatorom.

Pogledajmo drugi primjer, ali koji će se fokusirati na rezoluciju pretraživača. Sve je isto, metode su se promijenile.

Dakle, iz dva primjera, kratak pregled šta koristiti za šta:

screen.width. Definira širinu ekrana (monitora).

screen.height Određuje visinu ekrana (monitora).

document.body.clientWidth . Definira širinu pretraživača.

document.body.clientHeight . Definira visinu pretraživača.

$(window).width() . Definira širinu pretraživača, ali samo ako je prisutan jQuery.

$(window).height() . Definira visinu pretraživača, ali samo ako je prisutan jQuery.

Jasno je da ako koristite jQuery, onda je opcija 5 poželjnija od 3, a 6 do 4 - jednostavno su kraće. Pa, zavisi od ukusa i boje.

Što se tiče specifičnih unosa za visinu i širinu ekrana za jQuery, da budem iskren, ne znam ih. U teoriji bi trebalo da postoji struktura poput 5-6 redova, ali nekako nisam naišao u praksi, čini mi se da ne postoje. I nije potrebno, screen.width je dovoljno kratka konstrukcija, dovoljno je.

Da, postoji i $(document).width() - određuje širinu HTML dokumenta. Upotreba u praksi je nekako sumnjiva. Ko zna, bit će mi drago ako podijelite.

To je sve za danas! Izdržimo do vikenda i idemo masovno na roštiljanje! (osim ako niste bolesni od nečega, kao neki - prim. urednika). Sretno!

Zdravo! Nastavljajući temu u ovoj lekciji, osvrnut ćemo se na pitanje pomicanja web stranice i manipuliranja veličinama preglednika. Kako možete pronaći širinu pretraživača? Kako pomicati web stranicu koristeći JavaScript? Mislim da ćete odgovore na ova pitanja pronaći u ovoj lekciji.

Širina/visina vidljivog dela prozora pretraživača Svojstva clientWidth/Height za element su tačno širina/visina vidljive oblasti prozora.


Ne window.innerWidth/Height

Treba napomenuti da svi pretraživači osim IE8 takođe mogu podržati svojstva window.innerWidth/innerHeight. Oni štede trenutna veličina prozor.

Koja je razlika? Pitate. Malo je, naravno, ali izuzetno važno.

Svojstva clientWidth/Height, ako postoji traka za pomicanje, vratit će tačno širinu/visinu unutar njega, dostupnu za cijeli dokument, a window.innerWidth/Height će zanemariti njegovo prisustvo.

Ako je desna strana stranice zauzeta trakom za pomicanje, tada će ovi redovi prikazati različite stvari:

Alert(window.innerWidth); // cijela puna širina prozora alert(document.documentElement.clientWidth); // širina minus pomicanje

Obično nas zanima samo dostupna širina prozora, na primjer, da nešto nacrtamo, odnosno minus traku za pomicanje. Stoga se dokumentElement.clientWidth često koristi.

Širina/visina web stranice uzimajući u obzir pomicanje

Da, teoretski, vidljivi dio stranice je documentElement.clientWidth/Height, ali puna veličina uključujući traku za pomicanje je, po analogiji, documentElement.scrollWidth/scrollHeight.

Ovo važi za sve regularne elemente.

Ali za stranicu sa ovim svojstvima, problem može nastati kada pomeranje postoji ili ne. U ovom slučaju ne rade ispravno. Mora se reći da u Chrome pretraživači/ Safari i Opera, u nedostatku trake za pomicanje, vrijednost documentElement.scrollHeight u ovom slučaju može biti čak i manja od documentElement.clientHeight, što, naravno, izgleda kao nešto nelogično

Ovaj problem se može pojaviti posebno za documentElement.

Ali možete pouzdano odrediti veličinu stranice uzimajući u obzir pomicanje jednostavnim uzimanjem maksimuma od ovih nekoliko svojstava:

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Visina uključujući pomicanje: " + scrollVisota);

Preuzimanje trenutnog skrolovanja

Ako regularni element ima trenutni skrol, možete ga dobiti u scrollLeft/scrollTop.

Pa šta je sa stranicom?

Poenta je da će većina pretraživača ispravno obraditi zahtjev za documentElement.scrollLeft/Top, ali Safari/Chrome/Opera ima greške koje zahtijevaju da koristite document.body.

Pa, da biste zaobišli ovaj problem u potpunosti, možete koristiti svojstva window.pageXOffset/pageYOffset:

Alert("Trenutni pomak na vrh: " + window.pageYOffset); alert("Trenutni levi skrol: " + window.pageXOffset);

Ovo su sve nekretnine:

• Nije podržan IE8-
• Mogu se samo čitati i ne mogu se mijenjati.

Ako IE8 nije bitan, onda samo koristimo ova svojstva.

Opcija unakrsnog pregledača koja uzima u obzir IE8 pruža opciju na documentElement:

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Trenutni skrol: " + scrollTop);

Promjena pomicanja po stranici: pomaknite se do, pomaknite se po, scrollIntoView

Da biste pomicali stranicu koristeći JavaScript, svi njeni elementi moraju biti potpuno učitani.

Na regularnim elementima, scrollTop/scrollLeft se u principu može promijeniti i element će se pomicati.

Niko vas ne brani da uradite isto sa stranicom. U svim pretraživačima osim Chrome/Safari/Opera, možete skrolovati jednostavnim postavljanjem document.documentElement.scrollTop, au ovim pretraživačima za ovo trebate koristiti document.body.scrollTop. I sve će raditi odlično.

Ali postoji još jedno, univerzalno rješenje - posebne metode pomicanja stranica window.scrollBy(x,y) i window.scrollTo(pageX,pageY).

• Metoda scrollBy(x,y) će pomicati stranicu u odnosu na njene trenutne koordinate.
• Metoda scrollTo(pageX,pageY) skroluje stranicu do navedenih koordinata u odnosu na cijeli dokument. To će biti ekvivalentno postavljanju svojstava scrollLeft/scrollTop. Da biste došli do početka dokumenta, potrebno je samo navesti koordinate (0,0).

scrollIntoView

Metoda elem.scrollIntoView(top) mora biti pozvana na elementu i skroluje stranicu tako da element bude na vrhu ako je top istinit, a na dnu ako je top netačan. Štaviše, ako ovaj gornji parametar nije naveden, tada će biti jednak true.

Anti-scroll

Postoje situacije kada je potrebno napraviti dokument koji se ne može pomicati. Na primjer, prikazivanje velikog dijaloškog okvira iznad dokumenta tako da posjetitelj može pomicati kroz dijaloški okvir, ali ne i sam dokument.

Da biste spriječili pomicanje stranice, samo postavite svojstvo document.body.style.overflow = “hidden”.

Umjesto document.body može postojati bilo koji element kojem treba onemogućiti pomicanje.

Ali nedostatak ove metode je što sama traka za pomicanje nestaje. Ako je zauzeo određenu širinu, sada će se ova širina osloboditi, a sadržaj stranice će se proširiti, tekst će "skočiti", zauzimajući sav slobodan prostor.

Rezultati

• Da biste dobili dimenzije vidljivog dijela prozora, koristite svojstvo: document.documentElement.clientWidth/Height
• Da biste dobili dimenzije stranice uzimajući u obzir pomicanje, koristite: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, dokument. documentElement .clientHeight);

U ovoj lekciji ćemo pogledati svojstva objekta prozora, pomoću kojih možete dobiti dimenzije radnog područja prozora pretraživača (innerWidth i innerHeight), dimenzije samog prozora (outerWidth i outerHeight), njegovu lokaciju u odnosu na gornji lijevi ugao korisničkog ekrana (screenLeft i screenTop) i pomicanje položaja (pageXOffset i pageYOffset).

svojstva innerWidth i innerHeight

Dizajnirani su tako da dobiju dimenzije vidljive radne površine prozora pretraživača. One. Svojstva innerWidth i innerHeight imaju za cilj da dobiju širinu i visinu oblasti u kojoj je prikazan HTML dokument. Ova svojstva su samo za čitanje i vraćaju vrijednosti piksela.

Na primjer, dobijete visinu i širinu vidljivog radnog područja prozora preglednika:

Širina vidljivog područja za gledanje (widthContenArea):

Širina vidljivog područja za gledanje (heightContenArea):

// širina vidljivog okvira (za sve pretraživače osim Internet Explorer 8) var widthContenArea = window.innerWidth; // visina vidljivog prozora (za sve pretraživače osim Internet Explorer 8) var heightContenArea = window.innerHeight; // širina vidljivog prozora (za Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // visina vidljivog prozora (za Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // širina vidljivog prozora (za sve pretraživače) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // visina vidljivog prozora (za sve pretraživače) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

svojstva outerWidth i outerHeight

Dizajnirani su tako da dobiju dimenzije cijelog prozora pretraživača, tj. uključujući trake s alatima, trake za pomicanje, statusnu traku, ivice prozora itd. Svojstva outerWidth i outerHeight su samo za čitanje i vraćaju širinu i visinu prozora u pikselima, respektivno.

Na primjer, saznajte visinu i širinu prozora preglednika:

Širina prozora pretraživača (widthWindow):

Visina prozora pretraživača (heighWindow):

// širina prozora pretraživača var widthWindow = window.outerWidth; // visina prozora pretraživača var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

svojstva screenLeft (screenX) i screenTop (screenY).

Oni su dizajnirani da dobiju koordinate gornjeg lijevog ugla prozora pretraživača ili dokumenta u odnosu na gornji lijevi ugao korisničkog ekrana.

U ovom slučaju, svojstva screenLeft i screenTop rade u Internet Exploreru, a svojstva screenX i screenY rade u Mozilia Firefox-u. U Chromeu, Safariju i drugim sličnim pretraživačima možete koristiti svojstva screenLeft i screenTop, kao i svojstva screenX i screenY.

Kada koristite ova svojstva, morate uzeti u obzir činjenicu da neki pretraživači mogu vratiti koordinate gornjeg lijevog ugla dokumenta, a neki pretraživači mogu vratiti koordinate gornjeg lijevog ugla prozora. Svojstva screenleft (screenX) i screenTop (screenY) su samo za čitanje i vraćaju horizontalnu i vertikalnu udaljenost u odnosu na lijevi ugao ekrana u pikselima, respektivno.

Na primjer, prikažimo u obliku poruke x i y koordinate lijevog ugla trenutnog prozora pretraživača (dokumenta) u odnosu na gornji lijevi ugao ekrana:

function windowXY() ( // Koristeći svojstva screenleft i screenTop, dobijamo koordinate lokacije prozora (dokumenta) var winX = window.screenLeft; var winY = window.screenTop; // Koristeći svojstva screenX i screenY, dobijamo koordinate lokacije prozora (dokumenta) winX = window.screenX; winY = window.screenY; // Dobivamo koordinate lokacije prozora (dokumenta) u svim pretraživačima winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Koordinate prozora u odnosu na ekran korisnika: X = " + winX + ", Y = " + winY + "."); ) Saznajte koordinate

svojstva pageXOffset (scrollX) i pageYOffset (scrollX)

Dizajnirani su tako da dobiju broj piksela za koji je dokument pomican u horizontalnom (pageXOffset) ili vertikalnom (pageYOffset) smjeru u odnosu na gornji lijevi ugao prozora. Svojstva scrollX i scrollY su ekvivalentna svojstvima pageXOffset i pageYOffset. Ova svojstva su samo za čitanje.

Na primjer, prikažite u poruci broj piksela za koji je dokument pomican u horizontalnom (pageXOffset) i vertikalnom (pageYOffset) smjeru.

funkcija scrollContent() ( //Skrolujte trenutni dokument 200px udesno i dolje window.scrollBy(200,200); //Dobijte vrijednosti koristeći svojstva pageXOffset i pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Nabavite vrijednosti po kojima je dokument pomican vodoravno ili okomito za Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Za sve pretraživače: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; upozorenje ("Broj piksela po kojima je dokument pomican horizontalno i vertikalno: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Saznajte položaj traka za pomicanje