In this lesson, we consider the properties of the Window object, with which you can get the size of the workspace window of the browser window (innerwidth and innerheight), the size of the window itself (OuterWidth and OuterHeight), its location relative to the left top corner User Screen (Screenleft and ScreenOnt) and Scroll Provisions (PAGXOFFSET and PagetyoffSet).
Innerwidth and Innerheight properties
They are designed to obtain the sizes of the visible workspace window of the browser. Those. Innerwidth and Innerheight properties are designed to obtain the width and height of the area in which the HTML document is displayed. These properties are read only and return values \u200b\u200bin pixels.
For example, get the height and width of the visible workspace window of the browser:
The width of the visible viewport (widthcontenarea):
The width of the visible viewport (HeightContenarea):
Outerwidth and OuterHeight Properties
They are designed to obtain the size of the entire browser window, i.e. Including toolbars, scroll bar, status bar, window boundaries, etc. OuterWidth and OuterHeight properties are read only and returned the width and height of the window in pixels.
For example, get the height and width of the browser window:
Browser windows width (widthwindow):
Browser window height (Heighwindow):
Properties ScreenLeft (ScreenX) and ScreenOnt (Screeny)
They are intended to obtain the coordinates of the left upper angle of the browser window or document on the upper left corner of the user screen.
In this case, the SCREENLEFT and SCREENTOP properties work in Internet Explorer, and the properties of ScreenX and Screeny in Mozilia Firefox. IN chrome browsers, Safari and other similar browsers can be used both the properties of Screenleft and ScreenOnt and the properties of Screenx and Screeny.
When using these properties, it is necessary to take into account the fact that some browsers can return the coordinate of the left upper angle of the document, and some browsers coordinate the upper left corner of the window. Screenleft properties (ScreenX) and ScreenOnt (Screeny) are read-only and returned the distance values \u200b\u200brelative to the left corner horizontally and vertical in pixels.
For example, withdraw a message of the coordinate x and at the left corner of the current browser window (document) relative to the upper left corner of the screen:
Find out coordinates
PageXOFFSET properties (Scrollx) and pagetyoffset (ScrollX)
They are intended to obtain a number of pixels to which the document was scrolled in a horizontal (PAGNEFFSET) or vertical (pagetyoffset) direction of the relative upper left corner of the window. Properties Scrollx and Scrollly are equivalents according to the properties of PageXoffSet and Pagetyoffset. These properties are read only.
For example, to display the number of pixels to which the document was scrolled in the horizontal (PageXofFSET) and vertical (pagetyoffset) direction.
Learn the positions of the scroll bar
Hello! In continuing the topic in this lesson, we will consider such a question as a webpage scrolling and manipulate the browser sizes. How can I find a browser width? How to scroll through javascript web page? Answers to these questions I think you will find in this lesson.
Width / Height of the visible part of the browser window
The clientwidth / height properties for the element is just the width / height of the visible window area.
Not window.innerwidth / height
It should be noted that all browsers, except IE8, can also support the properties of Window.innerwidth / innerheight. They save the current window size.
What is the difference? You ask. It is certainly small, but extremely important.
ClientWidth / Height properties, if there is a scroll bar, return the width / height inside it, accessible to the entire document, and window.innerwidth / height - will ignore its presence.
If a right part Pages take the scroll bar, then these lines will remove different things:
Alert (Window.innerwidth); // All the full ALERT window width (document.documentElement.clientWidth); // width less scroll
Usually we are only interested in the available window width, for example, to draw something, that is, minus the scroll bar. Therefore, DocumentElement.clientWidth is often used.
Width / Height of the Web Page taking into account scroll
Yes, theoretically, the visible part of the page is DocumentElement.clientWidth / Height, but the full size taking into account the scroll bar is by analogy, documentElement.scrollwidth / scrollheight.
This is true for all ordinary items.
But for the page with these properties, there may be a problem when the scrolling is there, then it is not. In this case, they work incorrectly. I must say that in Chrome / Safari and Opera browsers, in the absence of a scroll bar, the value of DocumentElement.scrollheight in this case may even be less than documentElement.clientHeight, which, of course, looks like something not logical
This problem may occur specifically for DocumentElement.
But it is possible to reliably determine the size of the page, taking into account the scroll, simply taking the maximum of these several properties:
Var scrollvisota \u003d math.max (document.body.scrollvisota, document.documentelement.scrollheight, document.body.offsetvisota, document.documentelement.offsetheight, document.body.clientvisota, document.documentelement.clientHeight); Alert ("Height, taking into account scroll:" + scrollvisota);
Obtaining current scroll
If the conventional element has a current scrolling in ScrollLeft / ScrollTop.
What about the page?
The fact is that most browsers will correctly process the DocumentElement.scrollLell / TOP query, however, Safari / Chrome / Opera has errors because you should use document.body.
Well, in order to completely bypass this problem, you can use the properties of the Window.pagexoffset / Pagetyoffset:
Alert ("Current scrolling from above:" + window.pageyoffset); Alert ("Current scrolling on the left:" + window.pagexoffset);
These all properties:
- IE8 is not supported.
- They can only read them, but it is impossible to change.
If IE8 is not worried, then we simply use these properties.
Cross-browser version with IE8 provides option on DocumentElement:
Var scrollltop \u003d window.pageyoffset || document.documentElement.scrollTop; Alert ("Current Scroll:" + ScrollTop);
Scroll Changing Page: Scrollto, Scrollby, Scrollintoview
In order to scroll through the page using JavaScript, it all elements must be fully loaded.
On the usual elements of ScrollTop / ScrollLeft, in principle, you can change, and at the same time the item will scroll.
No one bothers you in the same way and with the page. In all browsers, in addition to Chrome / Safari / Opera, you can scroll by simple installation document.documentelement.scrolltop, and in the specified - you should use Document.body.ScrollTop for this. And everything will work perfectly.
But there is another, a universal solution - special methods Scroll pages window.scrollby (x, y) and window.scrollto (Pagec, Pageang).
- The SCROLLBY (X, Y) method will scroll through its current coordinates.
- ScrollTo (PageX, Paget) scrolls the page to specified coordinates Regarding all the document. It will be equivalent to installing the ScrollLelFT / ScrollTop properties. To scroll into the beginning of the document, you can specify the coordinates (0.0).
scrollindoview.
The elem.scrollLintoview method (TOP) must be called on the element and scrolls the page so that the element is up to the top, if the Top parameter is true, and at the bottom, if the Top is equal to false. Moreover, if this Top parameter is not specified, it will be equal to true.
Prohibition scroll
There are situations when it is necessary to make a document "non-crushed". For example, when the large dialog box is displayed above the document, so that the visitor can scroll through this window, but not the document itself.
In order to prohibit the scrolling of the page, it is enough to deliver the document.body.Style.Overflow \u003d "Hidden" property.
Instead of Document.Body, there may be any element whose scrolling must be prohibited.
But the disadvantage of this method is that the scroll bar itself disappears itself. If she occupied some width, then now this width is liberated, and the contents of the page will be expanded, the text "jump", taking everything the vacant place.
RESULTS
- To obtain the sizes of the visible part of the window, uses property: document.documentElement.clientWidth / Height
- For taking into account the size of the scroll bar should be used: var scrollHeight \u003d Math.max (document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement .ClientHeight);
When developing interfaces for sites often you have to use JavaScript. Of course it is bad, but in some situation it is simply impossible to implement everything completely on CSS.
The most captive need for me to have in determining the width or height of the browser window for further manipulations. Under the cut all information on this topic.
Where can it come in handy?
I will not speak for everyone, but it is impressed to me in integration with TextPattern` by all kinds of galleries, sliders, etc., where everything is written on pure JS. Things that are tightly tied to JS are rare, but still meet, so this note appeared.
You can define 2 ways: js or jQuery.
Determination of width or height using pure JS
This is the most preferred way, since the JavaScript engine is almost every modern browser. Even mobile browsers learned to work with JS.
Of course, there is a possibility that the user is handled to turn off JS processing in the browser, but it seems to me, such "strange people" are not so much, since almost every site uses any solutions that work on JS.
In js to determine screen sizesYou need to use functions:
Screen.width // screen width screen.height // screen height
Here is a meaningless example of using:
If you use it for positioning some items on the page, then better decision will use not screen sizes, but browser window sizes. In js it is done like this:
Document.body.clientWidth // Browser Width document.body.clientHeight // Browser Height
Accordingly, here is a meaningless example of use:
Definition of browser sizes using jQuery
Personally, I use the method that is described below. This method only works if you have previously connected the jQuery library on the site. On all sites that I have to do this library is the standard de / infact.
To use for our JQuery task, you must use the code:
$ (Window) .width (); // Browser width $ (Window) .Height (); // Browser height
And at the end I would like to say that if it is possible to do without JS and jQuery in general or partly, then it is necessary to act.
To tell in social. Networks
What is it necessary for? For example, we have a beautiful layout of the site, which all its beauty exhibits only when resolving, say, 1600 per 1200. For example, he has a very big beautiful hat. What will happen if a person goes to the site at a resolution of 1024 to 768? Yes, only the hat will be visible. Not good? Perhaps. Then why not make such a thing that when the browser's height / screen, the hat would simply cut off, and went to the menu and the rest of the site? In, what is needed.
Actually, I described one of the examples that I encountered in practice (see Cartigintka). Solved the problem simply - via JavaScript. And maybe through jQuery, I do not remember. I will describe both methods here.
First of all it is necessary to distinguish the definition " screen resolution"And" browser window size"(Since in some articles there were incidents - hail alone methods, they were offered others, although in one case I measure the resolution of the browser, in the other - the resolution of the monitor).
It is necessary to determine from the very beginning that it is more important for you. In this case of an example with a cap, I focused on the screen resolution (monitor): All the same, the site is beautiful if the browser window is reduced manually, then let the browser start when viewing this site (there is nothing to eat approx.). But, for example, to adjust the expanded image of the gallery jQuery Lightbox I used the width and height of the browser.
And after you have chosen, write the code, you can in the header of the site. First, an example oriented on screen resolution.
3-6 lines - Pure JavaScript, 7-11 lines - an example on jQuery. To determine the width and height are used javaScript Methods Screen.width and screen.Height. What rows do, it is clear: the first script prescribes the path to the additional cSS fileand the other - for a block with a Total identifier puts cSS property "Background-Position".
We look at the second example, but which will focus on the resolution of the browser. All the same, the methods have changed.
So, from two examples short review - What to use for what:
- screen.width.. Defines the screen width (monitor).
- screen.Height. Determines the height of the screen (monitor).
- document.body.clientWidth.. Determines the width of the browser.
- document.body.clientHeight. Determines the height of the browser.
- $ (Window) .width (). Determines the width of the browser, but only if you have jQuery.
- $ (Window) .Height (). Determines the browser height, but only if you have jQuery.
It is clear that if you are using jQuery, it is preferable to 5 option than 3, and 6 rather than 4 - they are shorter. Well, and so - the taste and color.
As for specific height records and widths of the screens for jQuery - then, in truth, I do not know them. In theory, the design of type 5-6 rows should be, but somehow it did not come across the practice, I give me, they are not. Yes, and no need, screen.width is a short enough design, it is enough.
Yes, there is still $ (Document) .width () - determines the width HTML document. Use in practice - somehow doubtful. Who knows - I will be glad if you share.
Today everything! Keep up to the weekend and massively go on kebabs! (Unless you are sick with something like some - approx.). Good luck!
