V tejto lekcii považujeme vlastnosti objektu okna, s ktorým môžete získať veľkosť pracovného priestoru okna prehliadača (vnútorné vodné pásmo a innerheight), veľkosť samotného okna (vonkajšia a vonkajšia), jeho umiestnenie Relatívne k ľavému ľavému rohu obrazovky užívateľa (Screenft a scledont) a polohy Scroll (stránkyxffset a Pagetyoffset).

Innerwidth a Innerheight Vlastnosti

Sú navrhnuté tak, aby získali veľkosti viditeľného pracovného priestoru prehliadača. Tí. Innerwidth a Innerheight Vlastnosti sú navrhnuté tak, aby získali šírku a výšku oblasti, v ktorej sa zobrazí dokument HTML. Tieto vlastnosti sú len načítané a vráti hodnoty v pixeloch.

Získajte napríklad výšku a šírku viditeľného okna pracovného priestoru prehliadača:

Šírka viditeľného výhľadu (šírkaContenarea):

Šírka viditeľného výhľadu (HeigounContenarea):

Vonkajšie a vonkajšie vlastnosti

Sú navrhnuté tak, aby získali veľkosť celého okna prehliadača, t.j. Vrátane panelov s nástrojmi, posuvník, stavový riadok, hranice okien atď. Vonkajšie a vonkajšie vlastnosti sú len načítané a vrátite šírku a výšku okna v pixeloch.

Získajte napríklad výšku a šírku okna prehliadača:

Prehliadač Windows Šírka (WIDTHWINDOWNOW):

Výška okna prehliadača (HEIGHWINDOWNOW):

Vlastnosti ScreenPleft (ScreenX) a scledont (screy)

Sú určené na získanie súradníc ľavého uhla okna prehliadača alebo dokumentu v ľavom hornom rohu obrazovky používateľa.

V tomto prípade pracujú srdečné a screenter vlastnosti pracujú v programe Internet Explorer a vlastnosti SCREENX A SCRYY IN MOZILIA FIREFOX. V prehliadačoch chrómu, safari a ďalšie podobné prehliadače môžu byť použité ako vlastnosti screenft a scledont a screenX a screy vlastnosti.

Pri používaní týchto vlastností je potrebné vziať do úvahy skutočnosť, že niektoré prehliadače môžu vrátiť súradnicu ľavého uhla dokumentu a niektoré prehliadače súradnicu horného ľavého rohu okna. Vlastnosti screenteft (ScreenX) a SCREENONT (Screy) sú len na čítanie a vrátite hodnoty vzdialenosti vzhľadom na ľavý roh vodorovne a vertikálne v pixeloch.

Napríklad stiahnite správu koordinácie X av ľavom rohu aktuálneho okna prehliadača (dokument) vzhľadom na ľavý horný roh obrazovky:

Zistite súradnice

PagexOffset Properties (ScrollX) a Pagetyoffset (ScrollX)

Sú určené na získanie viacerých pixelov, ku ktorým bol dokument rolovaný v horizontálnom (Pagneffset) alebo vertikálny (Pagetyoffset) Smer relatívneho horného ľavého rohu okna. Vlastnosti ScrollX a rolovanie sú ekvivalenty podľa vlastností stránkyxoffset a Pagetyofset. Tieto vlastnosti sú len načítané.

Ak chcete napríklad zobraziť počet pixelov, ku ktorým bol dokument rolovaný v horizontále (PageXOfofset) a vertikálny (Pagetyoffset) smer.

Naučte sa pozície posuvníka

Ahoj! Pri pokračovaní témy v tejto lekcii zvážime takúto otázku ako webovú stránku rolovanie a manipulovať s veľkosťou prehliadača. Ako môžem nájsť šírku prehliadača? Ako sa posúvať cez webovú stránku JavaScript? Odpovede na tieto otázky si myslím, že nájdete v tejto lekcii.

Šírka / výška viditeľnej časti okna prehliadača

Vlastnosti klienta / výšky prvok je len šírka / výška oblasti viditeľného okna.


Nie okno ..Innerwidth / výška

Treba poznamenať, že všetky prehliadače okrem IE8 môžu tiež podporovať vlastnosti window.innerwidth / Innerheight. Uložia aktuálnu veľkosť okna.

V čom je rozdiel? Pýtaš sa. Je to určite malé, ale mimoriadne dôležité.

ClientWidth / Výšky Vlastnosti, ak existuje posuvník, vráťte šírku / výšku vo vnútri IT, prístupné pre celý dokument a okno.innerwidth / výška - bude ignorovať jeho prítomnosť.

Ak je pravá strana stránky posuvník, potom tieto riadky odstránia rôzne:

Upozornenie (okno.innerwidth); // všetky plné upozornenie na šírku okna (Document.DocumentPeement.ClientWidth); // šírka menej

Zvyčajne sa zaujímame len o dostupnú šírku okna, napríklad nakresliť niečo, to znamená mínus posuvník. Preto sa často používa dokument zdokumentovanie.Clientwidth.

Šírka / výška webovej stránky berúc do úvahy

ÁNO, teoreticky, viditeľná časť stránky je dokumentácia.ClientWidth / výška, ale plná veľkosť zohľadňujúca posúvaciu tyč je analógiou, dokumentáciou.

To platí pre všetky bežné položky.

Ale pre stránku s týmito vlastnosťami môže byť problém, keď je rolovanie, potom to nie je. V tomto prípade pracujú nesprávne. Musím povedať, že v prehliadačoch Chrome / Safari a Opera, v neprítomnosti posúvacieho panela, hodnota zdokumentácie.Scrollheight v tomto prípade môže byť dokonca nižšia ako zdokumentácia. Samozrejme, že vyzerá niečo, čo nie je logické

Tento problém sa môže vyskytnúť konkrétne na dokumentáciu.

Je však možné spoľahlivo určiť veľkosť stránky, berúc do úvahy rolovanie, jednoducho užívajte maximum z týchto niekoľkých vlastností:

Var ScrollVisota \u003d Math.Max \u200b\u200b(dokument.skBod.BBOD.Scrollvisota, Document.DocumentPeement.scrollheight, Document.body.offsetVisota, Document.DocumentPerement.offseight, Document.NOCKNOT.cLientvisota, Document.DocumentElement.clientHeight); Upozornenie ("Výška, berúc do úvahy zvitok:" + Scrollvisota);

Získanie aktuálneho zvitku

Ak konvenčný prvok má aktuálne rolovanie v SCROURLEFT / ROZCOVANOM.

A čo stránka?

Faktom je, že väčšina prehliadačov bude správne spracovať dokument zdokumentovanie.Scrolllll / TOP dotaz, avšak Safari / Chrome / Opera má chyby, pretože by ste mali používať dokument.

No, aby ste tento problém úplne obtok, môžete použiť vlastnosti okna.PageXoffset / PagetyOffset:

Upozornenie ("Rolovanie prúdu zhora:" + window.pageyofoft); Upozornenie ("Rolovanie prúdu vľavo:" + window.pagexoffset);

Tieto všetky vlastnosti:

• IE8 nie je podporovaný.
• Môžu ich prečítať len, ale nie je možné zmeniť.

Ak sa IE8 nebojí, potom jednoducho používame tieto vlastnosti.

Verzia Cross-Browser s IE8 poskytuje možnosť na zdokumentovanie:

Var rollltop \u003d window.pageyoffset || DOKUMENTC.DOCKUMENTUJETEĽNOSŤ. Upozornenie ("Aktuálny zvitok:" + Scrolltop);

Stránka Zmena Stránka: SCROLTO, SCROOLSBLE, SCRINTINGIEW

Ak chcete prejsť cez stránku pomocou Javascript, musia byť všetky prvky plne naložené.

Na obvyklých prvkoch ScrollTop / Collleft, v zásade sa môžete zmeniť, a zároveň sa položka posúva.

Nikto vás trápi rovnako a so stránkou. Vo všetkých prehliadačoch, okrem Chrome / Safari / Opera, môžete posúvať jednoduchým inštalačným dokumentom.DocumentPerement.scrollop a v zadanej - mali by ste použiť dokument. A všetko bude fungovať dokonale.

Ale je tu ďalšie, univerzálne riešenie - špeciálne rolovacie metódy okna stránky .scrollby (X, Y) a Window.scrollto (PAGEC, PageT).

• Metóda SCROLBRAVO (X, Y) sa prejde cez svoje aktuálne súradnice.
• Scrollto (pagex, pagench) metóda posúva stránku na zadané súradnice vo vzťahu k celému dokumentu. Bude to ekvivalentné inštalácii vlastností ScrollLeft / ScrollP. Ak chcete prejsť na začiatok dokumentu, môžete zadať súradnice (0.0).

scrollindView.

Metóda ELEM.SCROLLLLINTOVIEW (TOP) musí byť vyzvaná na prvok a posúva stránku tak, že prvok je na vrchole, ak je horný parameter pravdivý, a v dolnej časti, ak je vrch rovná falošnej. Okrem toho, ak tento top parameter nie je špecifikovaný, bude sa rovná pravdivej.

Zákaz

Existujú situácie, keď je potrebné urobiť dokument "Non-Crushed". Napríklad, keď je veľké dialógové okno zobrazené nad dokumentom, takže návštevník môže prechádzať cez toto okno, ale nie samotný dokument.

Aby ste zakázali rolovanie stránky, stačí na dodanie dokumentu.body.style.overflow \u003d "skrytý" vlastnosť.

Namiesto dokumentu.Body môže byť akýkoľvek prvok, ktorého rolovanie musí byť zakázané.

Nevýhodou tejto metódy je však, že rolovacia tyč samotná zmizne. Ak je obsadená nejakú šírku, potom táto šírka je oslobodená a obsah stránky bude rozšírený, text "skok", čím berie všetko voľné miesto.

Výsledok

• Ak chcete získať veľkosti viditeľnej časti okna, používa vlastnosť: Document.DocumentElement.ClientWidth / výška
• Na zohľadnenie veľkosti posúvacieho panela by mala byť použitá: VaR Scrollheight \u003d Math.MAX (dokument.BBOCK.Scrollheight, Document.DocumentPeement.scrollheight, Document.BOXSKOPNUTÉHO DOKUMENTY. , Document.DocumentPerement .clientheight);

Pri vývoji rozhraní pre stránky často musíte použiť Javascript. Samozrejme, že je to zlé, ale v určitej situácii je jednoducho nemožné implementovať všetko úplne na CSS.

Najviac zajatia, aby som mal pri určovaní šírky alebo výšky okna prehliadača pre ďalšie manipulácie. V rámci všetkých informácií o tejto téme.

Kde to môže prísť?

Nebudem hovoriť za každého, ale je pre mňa ohromený v integrácii s textPatern "všetkými druhmi galérií, posuvníkov atď., Kde je všetko napísané na čistom Js. Veci, ktoré sú pevne zviazané na js, sú zriedkavé, ale stále sa stretávajú, takže táto poznámka sa objavila.

Môžete definovať 2 spôsoby: js alebo jquery.

Stanovenie šírky alebo výšky pomocou čistého JS

Toto je najpredpoznanejší spôsob, pretože motor Javascript má takmer každý moderný prehliadač. Dokonca aj mobilné prehliadače sa naučili pracovať s JS.

Samozrejme, existuje možnosť, že užívateľ sa snažila vypnúť JS spracovanie v prehliadači, ale zdá sa mi, že "podivní ľudia" nie sú toľko, pretože takmer každé stránky používa akékoľvek riešenia, ktoré pracujú na JS.

V Js určiť veľkosti obrazovkyMusíte použiť funkcie:

Screen.Stinth // Šírka obrazovky Screen.Height // Výška obrazovky

Tu je nezmyselný príklad používania:

Ak ho použijete na umiestnenie niektorých položiek na stránke, potom najlepšie riešenie bude použitá veľkosť obrazovky, ale veľkosti okien prehliadača. V JS sa to robí takto:

Document.body.cLientWidth // Browser Šírka Document.KcLientheight // Výška prehliadača

Preto je tu nezmyselný príklad použitia:

Definícia veľkostí prehliadača pomocou jQuery

Osobne používam metódu, ktorá je opísaná nižšie. Táto metóda funguje len vtedy, ak ste predtým pripojili knižnicu JQuery na stránke. Na všetkých stránkach, ktoré musím urobiť túto knižnicu, je štandardná de / infact.

Ak chcete použiť pre našu úlohu JQuery, musíte použiť kód:

$ (Okno) .width (); // šírka prehliadača $ (okno) .Height (); // výška prehliadača

A na konci by som chcel povedať, že ak je možné robiť bez JS a JQuery vo všeobecnosti alebo čiastočne, potom je potrebné konať.

Povedať v sociálnom. Sietí

Na čo je to potrebné? Napríklad máme krásne usporiadanie stránky, ktoré všetky jeho krásy vystavuje len pri riešení, povedzme, 1600 za 1200. Napríklad má veľmi veľký krásny klobúk. Čo sa stane, ak osoba ide na stránku v uznesení 1024 až 768? Áno, bude viditeľný len klobúk. Nie dobré? Možno. Tak prečo nie urobiť takú vec, že \u200b\u200bkeď je výška prehliadača / obrazovka, klobúk by jednoducho prerušil a išiel do menu a zvyšok stránky? Čo je potrebné.

V skutočnosti som opísal jeden z príkladov, s ktorými som sa vyskytol v praxi (pozri Cartigintka). Vyriešil problém jednoducho - cez JavaScript. A možno cez jquery, nepamätám si. Popisujem oba metódy tu.

V prvom rade je potrebné rozlišovať definíciu " rozlíšenie obrazovky"A" veľkosť okna prehliadača"(Vzhľadom k tomu, že v niektorých článkoch boli incidenty - krupobné metódy, boli ponúknuté druhé, hoci v jednom prípade som merala riešenie prehliadača, v druhom - riešenie monitora).

Je potrebné určiť od samého začiatku, že je pre vás dôležitejšie. V tomto prípade s príkladom s uzáverom som sa zameral na rozlíšenie obrazovky (monitor): všetky rovnaké, stránka je krásna, ak je okno prehliadača znížené manuálne, nechať prehliadač začať pri prezeraní tejto stránky (nie je nič stíhať približne.). Napríklad, napríklad na nastavenie rozšíreného obrazu galérie JQUERY Lightbox, som použil šírku a výšku prehliadača.

A potom, čo ste si vybrali, napíšte kód, môžete v hlavičke stránky. Po prvé, príklad orientovaný na rozlíšenie obrazovky.

3-6 riadkov - čistý JavaScript, 7-11 riadkov - príklad na jQuery. Metódy Javascript sa používajú na určenie šírky a výšky. Šírka a screen.height metódy. Aké riadky sú vyrobené, jasné: prvý skript predpisuje cestu k voliteľnému súboru CSS a druhý - pre celkový identifikátorový blok, Ubytovacie zariadenie CSS "pozadia" sa nachádza.

Pozeráme sa na druhý príklad, ale ktorý sa zameria na riešenie prehliadača. To isté sa zmenili metódy.

Takže z dvoch príkladov stručný prehľad - čo používať na to, čo:

1. screen.width. Definuje šírku obrazovky (monitor).
2. screen.height. Určuje výšku obrazovky (monitor).
3. dokument.body.clintWidth.. Určuje šírku prehliadača.
4. dokument.Klient. Určuje výšku prehliadača.
5. $ (Okno) .width (). Určuje šírku prehliadača, ale len vtedy, ak máte JQuery.
6. $ (Okno) .Height (). Určuje výšku prehliadača, ale len vtedy, ak máte jQuery.

Je jasné, že ak používate JQuery, je vhodnejšie 5 možností ako 3 a 6 skôr ako 4 - sú kratšie. No, a tak - chuť a farba.

Pokiaľ ide o špecifické výškové záznamy a šírky obrazoviek pre JQuery - potom, v pravde, neviem ich. V teórii by mal byť dizajn typu 5-6 riadkov, ale nejako to nestalo v praxi, dám mi, nie. Áno, a nie potreba, screen.width je krátky dostatok dizajnu, stačí.

Áno, stále existuje $ (DOCUMENT) .Width () - Určuje šírku dokumentu HTML. Použitie v praxi - nejako pochybné. Kto vie - budem rád, ak zdieľate.

Dnes všetko! Držať až na víkend a masívne ísť na kebabs! (Ak nie ste chorý s niečím ako niektoré - cca.). Veľa štastia!