V této lekci zvažujeme vlastnosti objektu okna, se kterým můžete získat velikost pracovní plochy okna prohlížeče (Innerwidth a InnerHeight), velikosti samotného okna (vnější válec a vnějšívight), jeho umístění Vzhledem k levému horním rohu obrazovky uživatele (ScreenLeft a Screenont) a pozice Scroll (PageNFFFFSet a PagetyOffset).
Innerwidth a InnerHeight vlastnosti
Jsou navrženy tak, aby získaly velikosti viditelného okna pracovního prostoru prohlížeče. Ty. Innerwidth a InnerHeight vlastnosti jsou navrženy tak, aby se dosáhlo šířky a výšky oblasti, ve které je zobrazen dokument HTML. Tyto vlastnosti jsou pouze čteny a vrací hodnoty v pixelech.
Získejte například výšku a šířku viditelného okna pracovního prostoru prohlížeče:
Šířka viditelného výhledu (WidthContenea):
Šířka viditelného výhledu (HeightContenea):
Vnější vlastnosti vnějších válců
Jsou navrženy tak, aby získaly velikost celého okna prohlížeče, tj. Včetně panelů nástrojů, posuvníku, stavového řádku, okenních hranic atd. Vlastnosti vnějšíhowidth a vnějších výročí jsou pouze čteny a vrátily šířku a výšku okna v pixelech.
Získejte například výšku a šířku okna prohlížeče:
Šířka Windows Windows (Widthwindow):
Výška okna prohlížeče (Heighwindow):
Vlastnosti ScreenLeft (ScreenX) a screenont (Screeny)
Jsou určeny k získání souřadnic levého horního úhlu okna prohlížeče nebo dokumentu v levém horním rohu obrazovky uživatele.
V tomto případě, ScreenLeft a ScreenTOP vlastnosti fungují v aplikaci Internet Explorer a vlastnosti scénáxu a screeniky v Mozilia Firefoxu. V aplikaci Chrome, Safari prohlížeče a další podobné prohlížeče lze použít jak vlastnosti screenleft a screenont a vlastnosti screenexu a screenic.
Při použití těchto vlastností je nutné vzít v úvahu skutečnost, že některé prohlížeče mohou vrátit souřadnici levého horního úhlu dokumentu a některé prohlížeče koordinují levý horní roh okna. ScreenLeft vlastnosti (ScreenX) a screenont (Screeny) jsou pouze pro čtení a vráceny hodnoty vzdálenosti vzhledem k levému rohu vodorovně a vertikální v pixelech.
Například odeberte zprávu souřadnice X a v levém rohu aktuálního okna prohlížeče (dokument) vzhledem k levém horním rohu obrazovky:
Vyhledejte souřadnice
PagesEffset Vlastnosti (ScrollX) a PagetyOffset (ScrollX)
Jsou určeny k získání řady pixelů, ke kterému byl dokument posouván v horizontálním (pagneffset) nebo vertikální (pagetyOffset) směrem relativní levý levý roh okna. Vlastnosti ScrollX a posouvání jsou ekvivalenty podle vlastností stránky XECOFFSET a PAGETYOFFSET. Tyto vlastnosti jsou pouze čteny.
Chcete-li například zobrazit počet pixelů, ke kterým byl dokument posouván v horizontální (PageXOffset) a vertikální (pagetyOffset) směrem.
Naučte se pozice posuvníku
Ahoj! Při pokračování tématu v této lekci budeme zvažovat takovou otázku jako rolování webové stránky a manipulovat s velikostí prohlížeče. Jak mohu najít šířku prohlížeče? Jak procházet webovou stránkou JavaScriptu? Odpovědi na tyto otázky si myslím, že najdete v této lekci.
Šířka / Výška viditelné části okna prohlížeče
Vlastnosti klientWidth / výšku pro prvek je jen šířka / výška prostoru viditelného okna.
Ne okna.innerwidth / výška
Je třeba poznamenat, že všechny prohlížeče, s výjimkou IE8, mohou také podporovat vlastnosti okna.innerwidth / InnerHeight. Uloží aktuální velikost okna.
Jaký je rozdíl? Zeptejte se. Je to určitě malé, ale nesmírně důležité.
Vlastnosti klientWidth / výšce, pokud je posuvník, vraťte šířku / výšku uvnitř ní, přístupné do celého dokumentu a window.innerwidth / výška - bude ignorovat jeho přítomnost.
Pokud se pravá strana stránky vezme posuvník, pak tyto řádky odstraní různé:
Výstraha (window.innerwidth); // Veškeré šířka okna plného upozornění (dokument.documentuLement.clientwidth); // šířka méně svitek
Obvykle se zajímáme pouze o dostupnou šířku okna, například nakreslit něco, to je mínus posuvník. Proto se často používá dokumentLement.Clientwidth.
Šířka / Výška webové stránky s přihlédnutím k posouvání
Ano, teoreticky je viditelná část stránky dokumentuLement.Clientwidth / výška, ale plná velikost s přihlédnutím k posuvníku je analogicky, dokumentyLement.scrollwidth / scrollheight.
To platí pro všechny běžné položky.
Ale pro stránku s těmito vlastnostmi může být problém, když je tam rolování, pak to není. V tomto případě pracují nesprávně. Musím to říci, že v chrome / safari a operních prohlížečích, v nepřítomnosti posuvníku, hodnota dokumentu dokumentuelement.scrollHeight v tomto případě může být dokonce menší než dokumentLement.ClientHeight, což samozřejmě vypadá jako něco není logické
Tento problém se může vyskytnout speciálně pro dokumentyLement.
Ale je možné spolehlivě určit velikost stránky, s přihlédnutím k posouvání, jednoduše přičemž maximálně tyto vlastnosti:
Var scrollvisota \u003d math.max (dokument. Alert ("výška, s přihlédnutím k posouvání:" + Scrllvisota);
Získání aktuální posuvu
Pokud má konvenční prvek aktuální rolování v ScrollLeft / Scrolltop.
A co stránka?
Faktem je, že většina prohlížečů bude správně zpracovávat dokumentuLement.ScrollLell / TOP dotaz, nicméně, Safari / Chrome / Opera má chyby, protože byste měli použít dokument.
No, aby se tento problém zcela obejít, můžete použít vlastnosti okna.pagexoffe / pagetyffset:
Upozornění ("Proudová rolování shora:" + window.pageyOffset); Alert ("Aktuální rolování vlevo:" + window.pagexoffset);
Tyto vlastnosti:
- IE8 není podporován.
- Mohou si je přečíst, ale nemohou se změnit.
Pokud IE8 není znepokojen, pak jednoduše používáme tyto vlastnosti.
Křížová verze prohlížeče s IE8 poskytuje možnost v dokumentu:
Var scrolltop \u003d window.pageyOffset || dokument.documentelement.scrolltop; Alert ("Aktuální svitek:" + ScrllTP);
Scroll Změna stránka: Scrollto, Scrollby, Scrollintoview
Chcete-li procházet stránkou pomocí JavaScriptu, musí být všechny prvky plně naloženy.
Na obvyklých prvcích Scrolltop / ScrollLeft, v zásadě se můžete změnit a zároveň bude položka posouvat.
Nikdo vás nesvítí stejným způsobem as stránkou. Ve všech prohlížečích, kromě Chrome / Safari / Opera, můžete posouvat jednoduchým instalačním dokumentem.documentelement.Scrolltop a v zadaném - měli byste použít dokument.body.Scrolltop pro to. A všechno bude fungovat perfektně.
Existuje však další, univerzální řešení - speciální posuvní metody okna stránky.Scrollby (x, y) a window.scrollto (PAGEC, PAGET).
- Metoda Scrollby (X, Y) bude procházet aktuálními souřadnicemi.
- Metoda ScrollTto (Pagex, Pagench) posouvá stránku na zadané souřadnice vzhledem k celému dokumentu. Bude ekvivalentní instalaci vlastností ScROLLELFT / SCRROLLTOP. Chcete-li posouvat do začátku dokumentu, můžete zadat souřadnice (0.0).
scrollindoview.
Metoda Elem.ScrollLintoview (TOP) musí být volána na prvek a posouvá stránku tak, aby byl prvek připevněn nahoře, pokud je horní parametr pravdivý, a v dolní části, pokud je horní část rovna falešně. Pokud není tento top parametr zadán, bude roven true.
Zákaz Scroll.
Existují situace, kdy je nutné provést dokument "ne-rozdrcený". Například, když se zobrazí velký dialogové okno nad dokumentem, takže návštěvník může procházet tímto oknem, ale ne samotný dokument.
Aby bylo možné zakázat rolování stránky, stačí dodat dokument.body.style.overflow \u003d "skrytý" majetek.
Místo dokumentu. Může existovat nějaký prvek, jehož rolování musí být zakázáno.
Nevýhodou této metody je však, že posuvník sám zmizí. Pokud obsadila nějakou šířku, pak je tato šířka osvobozena a obsah stránky bude rozšířen, text "Skočit", přičemž všeho volného místa.
VÝSLEDEK
- Chcete-li získat velikosti viditelné části okna, používá vlastnost: dokument.documentelement.Clientwidth / výška
- Pro zohlednění velikosti posuvníku by měla být použita: var scrollheight \u003d math.max (dokument , dokument.documentelement .ClientHeight);
Při vývoji rozhraní pro stránky často musíte používat JavaScript. Samozřejmě je to špatné, ale v určité situaci je prostě nemožné implementovat vše zcela na CSS.
Nejvíce zajatá potřeba, abych měl při určování šířky nebo výšky okna prohlížeče pro další manipulace. Ve všech informacích na toto téma.
Kde to dokáže přijít?
Nebudu mluvit pro každého, ale je to ohromen mi v integraci s Textpattern "všemi druhy galerií, posuvníků, atd., Kde je vše napsáno na čistém JS. Věci, které jsou pevně svázané JS, jsou vzácné, ale stále se setkávají, takže tato poznámka se objevila.
Můžete definovat 2 způsoby: JS nebo jQuery.
Stanovení šířky nebo výšky pomocí čistého JS
To je nejpřesnější způsob, protože motor JavaScript má téměř každý moderní prohlížeč. Dokonce i mobilní prohlížeče se naučili pracovat s JS.
Samozřejmě existuje možnost, že uživatel je manipulován vypnout JS zpracování v prohlížeči, ale zdá se mi, že takové "podivné lidi" nejsou tolik, protože téměř každý web používá jakákoli řešení, která pracují na JS.
V JS určit velikost obrazovkyMusíte použít funkce:
Screen.width // Screen Width Screen.Height // výška obrazovky
Zde je bezvýznamný příklad použití:
Pokud jej použijete k umístění některých položek na stránce, pak nejlepší řešení nebude použito není velikost obrazovky, ale rozměry oken prohlížeče. V JS se to dělá takto:
Document.Body.Clientwidth // Šířka prohlížeče Document.Body.ClientHeight // Výška prohlížeče
Zde je zde bezvýznamný příklad použití:
Definice velikostí prohlížeče pomocí jQuery
Osobně používám metodu, která je popsána níže. Tato metoda funguje pouze v případě, že jste již dříve připojili knihovnu jQuery na webu. Na všech stránkách, které musím udělat tuto knihovnu, je standardní DE / INFACT.
Pro použití pro náš jQuery úkol musíte použít kód:
$ (Okno) .width (); // Šířka prohlížeče $ (okno) .Height (); // Výška prohlížeče
A na konci bych chtěl říci, že pokud je možné dělat bez JS a jQuery obecně nebo částečně, pak je nutné jednat.
Sdělit sociální. Sítě
Pro co je to nezbytné? Například máme krásné uspořádání stránek, které všechny jeho krásy vystavuje pouze při řešení, říci, 1600 za 1200. Například má například velmi velký krásný klobouk. Co se stane, pokud člověk jde na stránku v rozlišení 1024 až 768? Ano, jen klobouk bude viditelný. Špatný? Možná. Tak proč nečinit takovou věc, že \u200b\u200bkdyž prohlížeč je výška / obrazovka, klobouk by jednoduše odřízl, a šel do menu a zbytek webu? To, co je potřeba.
Vlastně jsem popsal jeden z příkladů, se kterými jsem se setkal v praxi (viz Cartigintka). Problém jednoduše řešil - přes JavaScript. A možná přes jQuery, nepamatuji si. Budu popisovat oba metody zde.
Nejprve je nutné rozlišit definici " rozlišení obrazovky"A" velikost okna prohlížeče"(Vzhledem k tomu, že v některých článcích byly incidenty - hail samostatně metody, byli nabídnuti jiní, i když v jednom případě měří rozlišení prohlížeče, v druhé straně - rozlišení monitoru).
Je nutné určit od samého počátku, že je pro vás důležitější. V tomto případě příkladu s víčkem jsem se zaměřil na rozlišení obrazovky (monitor): Všechny stejné, web je krásné, pokud je okno prohlížeče redukováno ručně, a pak při prohlížení tohoto webu nespustí prohlížeč (nic není jíst cca.). Ale například upravit rozšířený obraz galerie JQuery Lightboxu, použil jsem šířku a výšku prohlížeče.
A po zvolení napište kód, můžete v záhlaví webu. Za prvé, příklad orientovaný na rozlišení obrazovky.
3-6 řádků - čistý JavaScript, 7-11 řádků - příklad na jQuery. Metody JavaScriptu se používají k určení šířky a výšky. Šířka a screen.Height metod. Jaké řádky jsou vyrobeny, jasné: první skript předepisuje cestu k volitelnému souboru CSS a druhý - pro celkový blok identifikátor, CSS "Pozice pozice" vlastnost je umístěna.
Podíváme se na druhý příklad, ale který se zaměří na řešení prohlížeče. Všechny tyto metody se změnily.
Takže ze dvou příkladů, stručný přehled - co použít pro co:
- screen.width.. Definuje šířku obrazovky (monitor).
- screen.Height.. Určuje výšku obrazovky (monitor).
- document.Body.Clientwidth.. Určuje šířku prohlížeče.
- document.Body.ClientHeight.. Určuje výšku prohlížeče.
- $ (Okno) .width (). Určuje šířku prohlížeče, ale pouze pokud máte jQuery.
- $ (Okno) .Height (). Určuje výšku prohlížeče, ale pouze pokud máte jQuery.
Je jasné, že pokud používáte jQuery, je vhodnější než 5 možností než 3 a 6 spíše než 4 - jsou kratší. A tak - chuť a barva.
Pokud jde o konkrétní výškové záznamy a šířky obrazovek pro jQuery - pak, v pravdě, neznám je. Teoreticky by měl být design řádků typu 5-6, ale nějakým způsobem to nebylo praxe, dávám mi, nejsou. Ano, a není třeba, Screen.Width je krátký dostatek designu, stačí.
Ano, je stále ještě $ (dokument) .width () - Určuje šířku dokumentu HTML. Použití v praxi - nějakým způsobem pochybným. Kdo ví - budu rád, pokud sdílíte.
Dnes všechno! Držte až víkend a masivně jděte na kebabs! (Pokud nebudete nemocní s něčím jako nějaký - cca.). Hodně štěstí!
