Po co to jest? Na przykład mamy piękny układ strony, który pokazuje całe swoje piękno tylko w rozdzielczości, powiedzmy, 1600 na 1200. Na przykład ma bardzo duży piękny nagłówek. Co się stanie, jeśli dana osoba odwiedzi witrynę w rozdzielczości 1024 na 768? Tak, tylko czapka będzie widoczna. Niedobrze? Być może. Dlaczego więc nie zrobić czegoś takiego, że na wysokości przeglądarki/ekranu nagłówek zostałby po prostu odcięty, a menu i reszta strony przeszłaby? Wow, czego potrzebujesz.
Właściwie opisałem jeden z przykładów, z którymi spotkałem się w praktyce (patrz zdjęcie). Problem rozwiązałem po prostu - poprzez javascript. A może przez jQuery, nie pamiętam. Opiszę tutaj obie metody.
Przede wszystkim należy dokonać rozróżnienia między definicją rozdzielczość ekranu" oraz " rozmiar okna przeglądarki"(ponieważ w niektórych artykułach zdarzały się incydenty - okrzyknięto niektóre metody, inne sugerowano, choć w jednym przypadku mierzono rozdzielczość przeglądarki, w drugim - rozdzielczość monitora).
Od samego początku musisz zdecydować, co jest dla Ciebie ważniejsze. W przypadku tego przykładu z nagłówkiem kierowałem się rozdzielczością ekranu (monitorem): w końcu strona jest piękna, jeśli okno przeglądarki jest zmniejszane ręcznie, to niech rozwija przeglądarkę do pełnego ekranu podczas przeglądania ta strona (nie ma nic dla nich, rozumiesz - wyd.). Ale na przykład, aby dostosować rozwinięty obraz galerii jQuery Lightbox, użyłem szerokości i wysokości przeglądarki.
A po wybraniu piszemy kod, jest to możliwe w nagłówku strony. Najpierw przykład skoncentrowany na rozdzielczość ekranu.
Linie 3-6 - czysty javascript, linie 7-11 - przykład jQuery. Do określenia szerokości i wysokości używane są metody JavaScript screen.width i screen.height. To, co robią wiersze, jest jasne: pierwszy skrypt zapisuje ścieżkę do dodatkowego pliku CSS, a drugi skrypt ustawia właściwość css „background-position” dla bloku z całkowitym identyfikatorem.
Przyjrzymy się drugiemu przykładowi, który skupi się na rozdzielczości przeglądarki. Wszystko jest takie samo, zmieniły się metody.
A więc z dwóch przykładów krótki przegląd – czego używać do czego:
- szerokość.ekranu. Określa szerokość ekranu (monitora).
- wysokość.ekranu. Określa wysokość ekranu (monitora).
- document.body.clientWidth. Określa szerokość przeglądarki.
- document.body.clientHeight. Określa wysokość przeglądarki.
- $(okno).szerokość(). Określa szerokość przeglądarki, ale tylko wtedy, gdy jest obecne jQuery.
- $(okno).wysokość(). Określa wysokość przeglądarki, ale tylko wtedy, gdy obecne jest jQuery.
Oczywiste jest, że jeśli używasz jQuery, to 5 jest lepsze niż 3, a 6 niż 4 - są po prostu krótsze. Ach i tak - na smak i na kolor.
Jeśli chodzi o specyficzne wpisy jQuery dotyczące wysokości i szerokości dla ekranów, szczerze ich nie znam. Teoretycznie powinna być taka konstrukcja jak 5-6 linii, ale jakoś się z tym nie spotkałem w praktyce, wydaje mi się, że nie istnieją. Tak i nie jest to konieczne, screen.width to dość krótka konstrukcja, wystarczy.
Tak, istnieje również $(document).width() - określa szerokość dokumentu HTML. Użyj w praktyce - jakoś wątpliwe. Kto wie - będę zadowolony, jeśli się podzielisz.
To wszystko na dzisiaj! Wytrzymaj do weekendu i masowo idź na grilla! (chyba, że jesteś na coś chory, jak niektórzy - ok. wyd.). Powodzenia!
Tworząc interfejsy dla stron internetowych, często musisz korzystać z JavaScript. Oczywiście jest to złe, ale w niektórych sytuacjach po prostu niemożliwe jest całkowite zaimplementowanie wszystkiego w CSS.
Najczęstszą potrzebą jest dla mnie określenie szerokości lub wysokości okna przeglądarki do dalszych manipulacji. Pod cięciem wszystkie informacje na ten temat.
Gdzie może się przydać?
Nie będę mówił za wszystkich, ale przydaje mi się przy integrowaniu wszelkiego rodzaju galerii, sliderów itp. z Textpattern, gdzie wszystko jest napisane w czystym JS. Rzeczy, które są mocno związane z JS są rzadkością, ale nadal występują, dlatego pojawiła się ta notatka.
Możesz to zdefiniować na 2 sposoby: JS lub jQuery.
Określanie szerokości lub wysokości za pomocą czystego JS
Jest to preferowany sposób, ponieważ prawie każda nowoczesna przeglądarka ma silnik JavaScript. Nawet przeglądarki mobilne nauczyły się pracować z JS.
Oczywiście istnieje możliwość, że sam użytkownik wyłączy przetwarzanie JS w przeglądarce, ale wydaje mi się, że takich „dziwnych ludzi” nie ma aż tak dużo, ponieważ prawie każda strona korzysta z jakiegoś rozwiązania, które działa na JS .
W JS do zdefiniowania rozmiary ekranu, musisz skorzystać z funkcji:
Screen.width //Szerokość ekranu screen.height //Wysokość ekranu
Oto przykład bezsensownego użycia:
Jeśli używasz tego do pozycjonowania niektórych elementów na stronie, najlepszym rozwiązaniem nie jest używanie rozmiarów ekranu, ale rozmiar okna przeglądarki. W JS robi się to tak:
Document.body.clientWidth //Szerokość przeglądarki document.body.clientHeight //Wysokość przeglądarki
W związku z tym oto bezsensowny przypadek użycia:
Zmiana rozmiaru przeglądarki za pomocą jQuery
Osobiście używam metody opisanej poniżej. Ta metoda działa tylko wtedy, gdy wcześniej umieściłeś bibliotekę jQuery w swojej witrynie. We wszystkich witrynach, które muszę zrobić, ta biblioteka jest de facto standardem.
Aby użyć jQuery do naszego zadania, musimy użyć kodu:
$(okno).szerokość(); //Szerokość przeglądarki $(okno).wysokość(); // Wysokość przeglądarki
I na koniec chciałbym powiedzieć, że jeśli da się obejść bez JS i jQuery w ogóle lub w części, to jest to dokładnie to, co musisz zrobić.
Powiedz w społeczności sieci
W tej lekcji przyjrzymy się właściwościom obiektu window, za pomocą których można uzyskać wymiary obszaru klienta okna przeglądarki (innerWidth i innerHeight), wymiary samego okna (outerWidth i outerHeight), jego położenie względem lewy górny róg ekranu użytkownika (screenLeft i screenTop) oraz pozycje pasków przewijania (pageXOffset i pageYOffset).
Właściwości innerWidth i innerHeight
Zostały zaprojektowane tak, aby uzyskać wymiary widocznego obszaru klienta okna przeglądarki. Tych. właściwości innerWidth i innerHeight służą do pobierania szerokości i wysokości obszaru, w którym wyświetlany jest dokument HTML. Te właściwości są tylko do odczytu i zwracają wartości pikseli.
Na przykład, aby uzyskać wysokość i szerokość widocznego obszaru klienta okna przeglądarki:
Szerokość rzutni (widthContenArea):
Szerokość widocznej rzutni (heightContenArea):
Właściwości outerWidth i outerHeight
Zostały zaprojektowane tak, aby uzyskać wymiary całego okna przeglądarki, tj. w tym paski narzędzi, paski przewijania, pasek stanu, obramowania okien itp. Właściwości outerWidth i outerHeight są tylko do odczytu i zwracają odpowiednio szerokość i wysokość okna w pikselach.
Na przykład, aby uzyskać wysokość i szerokość okna przeglądarki:
Szerokość okna przeglądarki (widthWindow):
Wysokość okna przeglądarki (heightWindow):
Właściwości screenLeft (screenX) i screenTop (screenY)
Zostały zaprojektowane tak, aby uzyskać współrzędne lewego górnego rogu okna przeglądarki lub dokumentu względem lewego górnego rogu ekranu użytkownika.
Jednak właściwości screenLeft i screenTop działają w przeglądarce Internet Explorer, a właściwości screenX i screenY działają w przeglądarce Mozilia Firefox. W Chrome, Safari i podobnych przeglądarkach można używać zarówno właściwości screenLeft i screenTop, jak i właściwości screenX i screenY.
Korzystając z tych właściwości, należy wziąć pod uwagę fakt, że niektóre przeglądarki mogą zwracać współrzędne lewego górnego rogu dokumentu, a niektóre przeglądarki współrzędne lewego górnego rogu okna. Właściwości screenleft (screenX) i screenTop (screenY) są tylko do odczytu i zwracają odpowiednio odległość poziomą i pionową od lewego rogu ekranu w pikselach.
Na przykład, wyświetlmy współrzędne x i y lewego rogu bieżącego okna przeglądarki (dokumentu) względem lewego górnego rogu ekranu jako komunikat:
Znajdź współrzędne
Właściwości pageXOffset (scrollX) i pageYOffset (scrollX)
Zostały zaprojektowane tak, aby uzyskać liczbę pikseli, o jaką dokument został przewinięty w poziomie (pageXOffset) lub w pionie (pageYOffset) względem lewego górnego rogu okna. Właściwości scrollX i scrollY są odpowiednikami odpowiednio właściwości pageXOffset i pageYOffset. Te właściwości są tylko do odczytu.
Na przykład wyświetl w wiadomości liczbę pikseli, o jaką dokument został przewinięty w kierunku poziomym (pageXOffset) i pionowym (pageYOffset).
Sprawdź pozycje paska przewijania
Witam! Kontynuując temat tej lekcji, rozważymy taką kwestię, jak przewijanie strony internetowej i manipulowanie rozmiarem przeglądarki. Jak znaleźć szerokość przeglądarki? Jak przewijać stronę internetową za pomocą JavaScript? Myślę, że w tej lekcji znajdziesz odpowiedzi na te pytania.
Szerokość/wysokość widocznej części okna przeglądarki
Właściwości clientWidth/Height dla elementu to tylko szerokość/wysokość widocznego obszaru okna.
Nie window.innerWidth/Height
Należy zauważyć, że wszystkie przeglądarki oprócz IE8- mogą również obsługiwać właściwości window.innerWidth/innerHeight. Zachowują aktualny rozmiar okna.
Jaka jest różnica? Ty pytasz. Z pewnością jest mały, ale niezwykle ważny.
Właściwości clientWidth/Height, jeśli jest pasek przewijania, zwrócą dokładnie szerokość/wysokość w jego wnętrzu, dostępną dla całego dokumentu, a window.innerWidth/Height zignoruje jego obecność.
Jeśli prawa strona strony jest zajęta przez pasek przewijania, te wiersze będą wyświetlać różne rzeczy:
Alert(okno.szerokość wewnętrzna); // alert o pełnej szerokości okna(document.documentElement.clientWidth); // szerokość minus przewijanie
Zwykle interesuje nas tylko dostępna szerokość okna, na przykład po to, aby coś narysować, czyli bez paska przewijania. Dlatego często używany jest documentElement.clientWidth.
Szerokość/wysokość strony internetowej, w tym przewijanie
Tak, teoretycznie widoczna część strony to documentElement.clientWidth/Height, ale pełny rozmiar, łącznie z paskiem przewijania, to analogicznie documentElement.scrollWidth/scrollHeight.
Dotyczy to wszystkich zwykłych elementów.
Ale w przypadku strony z tymi właściwościami problem może pojawić się, gdy przewijanie jest dostępne lub nie. W takim przypadku nie działają poprawnie. Muszę powiedzieć, że w przeglądarkach Chrome/Safari i Opera, przy braku paska przewijania, wartość documentElement.scrollHeight w tym przypadku może być nawet mniejsza niż documentElement.clientHeight, co oczywiście wygląda na coś nielogicznego
Ten problem może wystąpić w szczególności w przypadku documentElement.
Ale aby wiarygodnie określić rozmiar strony, biorąc pod uwagę przewijanie, możesz po prostu wziąć maksymalnie z tych kilku właściwości:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Wysokość z przewijaniem: " + scrollVisota);
Pobieranie bieżącego zwoju
Jeśli zwykły element ma bieżące przewijanie, możesz go pobrać w scrollLeft/scrollTop.
A co ze stroną?
Chodzi o to, że większość przeglądarek poprawnie obsłuży żądanie documentElement.scrollLeft/Top, ale są błędy w Safari/Chrome/Opera, które wymagają użycia document.body.
Cóż, aby całkowicie obejść ten problem, możesz użyć właściwości window.pageXOffset/pageYOffset:
Alert("Current Scroll Top: " + window.pageYOffset); alert("Bieżący zwój w lewo: " + window.pageXOffset);
Oto wszystkie właściwości:
- Nieobsługiwane przez IE8-
- Można je tylko czytać, ale nie można ich zmienić.
Jeśli IE8 to nie obchodzi, użyj tych właściwości.
Wariant dla różnych przeglądarek, biorąc pod uwagę IE8, udostępnia wariant na documentElement:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Bieżący zwój: " + scrollTop);
Zmień przewijanie strony: scrollTo, scrollBy, scrollIntoView
Aby przewijać stronę za pomocą JavaScript, wszystkie jej elementy muszą być w pełni załadowane.
Na normalnych elementach scrollTop/scrollLeft można w zasadzie zmienić, a element będzie się przewijał.
Nikt nie przeszkadza ci zrobić tego samego ze stroną. We wszystkich przeglądarkach z wyjątkiem Chrome/Safari/Opera przewijanie można wykonać po prostu ustawiając document.documentElement.scrollTop, a w tych przeglądarkach należy do tego użyć document.body.scrollTop. I wszystko będzie działać świetnie.
Ale jest inne, uniwersalne rozwiązanie - specjalne metody przewijania stron window.scrollBy(x,y) oraz window.scrollTo(pageX,pageY).
- Metoda scrollBy(x,y) przewinie stronę względem jej aktualnych współrzędnych.
- Metoda scrollTo(pageX,pageY) przewija stronę do określonych współrzędnych względem całego dokumentu. Będzie to równoznaczne z ustawieniem właściwości scrollLeft/scrollTop. Aby przewinąć do początku dokumentu, wystarczy podać współrzędne (0,0).
scrollIntoView
Metoda elem.scrollIntoView(top) musi zostać wywołana na elemencie i przewinąć stronę tak, aby element znajdował się na górze, jeśli parametr top ma wartość true, i na dole, jeśli wartość top ma wartość odpowiednio fałsz. Co więcej, jeśli ten górny parametr nie zostanie określony, będzie on równy prawdzie.
Zabroń przewijania
Zdarzają się sytuacje, w których konieczne jest, aby dokument był „nieprzewijalny”. Na przykład podczas wyświetlania dużego okna dialogowego nad dokumentem - w taki sposób, aby odwiedzający mógł przewijać to okno, ale nie sam dokument.
Aby wyłączyć przewijanie strony wystarczy ustawić właściwość document.body.style.overflow = "ukryty".
Zamiast document.body może istnieć dowolny element, który należy wyłączyć z przewijania.
Ale wadą tej metody jest to, że sam pasek przewijania znika. Jeśli zajmował określoną szerokość, to teraz odpowiednio ta szerokość zostanie zwolniona, a zawartość strony zostanie rozszerzona, tekst „przeskoczy”, zajmując całą zwolnioną przestrzeń.
Wyniki
- Aby uzyskać wymiary widocznej części okna, użyj właściwości: document.documentElement.clientWidth/Height
- Aby uzyskać wymiary strony uwzględniające przewijanie, użyj: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement . wysokość klienta);
