Js determine the page height. Element sizes and web page scrolling
In this lesson, we will look at the properties of the window object, with which you can get the dimensions of the working area of the browser window (innerWidth and innerHeight), the dimensions of the window itself (outerWidth and outerHeight), its location relative to the upper left corner of the user's screen (screenLeft and screenTop) and positions scroll (pageXOffset and pageYOffset).
innerWidth and innerHeight propertiesThey are designed to obtain the dimensions of the visible working area of the browser window. Those. The innerWidth and innerHeight properties are intended to obtain the width and height of the area in which the HTML document is displayed. These properties are read-only and return pixel values.
For example, get the height and width of the visible working area of the browser window:
Width of the visible viewing area (widthContenArea):
Width of the visible viewing area (heightContenArea):
// width of the visible viewport (for all browsers except Internet Explorer 8) var widthContenArea = window.innerWidth; // height of the visible viewport (for all browsers except Internet Explorer 8) var heightContenArea = window.innerHeight; // width of the visible viewport (for Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // height of the visible viewport (for Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // width of the visible viewport (for all browsers) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // height of the visible viewport (for all browsers) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea; outerWidth and outerHeight propertiesThey are designed to get the dimensions of the entire browser window, i.e. including toolbars, scroll bars, status bar, window borders, etc. The outerWidth and outerHeight properties are read-only and return the width and height of the window in pixels, respectively.
For example, get the height and width of the browser window:
Browser window width (widthWindow):
Browser window height (heighWindow):
// browser window width var widthWindow = window.outerWidth; // browser window height var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow; screenLeft (screenX) and screenTop (screenY) propertiesThey are designed to obtain the coordinates of the upper left corner of the browser window or document relative to the upper left corner of the user's screen.
In this case, the screenLeft and screenTop properties work in Internet Explorer, and the screenX and screenY properties work in Mozilia Firefox. In Chrome, Safari, and other similar browsers, you can use both the screenLeft and screenTop properties, as well as the screenX and screenY properties.
When using these properties, you must take into account the fact that some browsers may return the coordinate of the upper left corner of the document, and some browsers may return the coordinate of the upper left corner of the window. The screenleft (screenX) and screenTop (screenY) properties are read-only and return the horizontal and vertical distances relative to the left corner of the screen in pixels, respectively.
For example, let's display in the form of a message the x and y coordinates of the left corner of the current browser window (document) relative to the upper left corner of the screen:
function windowXY() ( // Using the screenleft and screenTop properties, we get the coordinates of the window (document) location var winX = window.screenLeft; var winY = window.screenTop; // Using the screenX and screenY properties, we get the coordinates of the window (document) location winX = window.screenX; winY = window.screenY; // Get the coordinates of the window (document) in all browsers winX = window.screenX: window.screenLeft; winY = window.screenY: window.screenTop ; window.alert ("Window coordinates relative to the user's screen: X = " + winX + ", Y = " + winY + "." ) Find out the coordinates.
They are designed to get the number of pixels by which the document has been scrolled in the horizontal (pageXOffset) or vertical (pageYOffset) direction relative to the top-left corner of the window. The scrollX and scrollY properties are equivalent to the pageXOffset and pageYOffset properties, respectively. These properties are read-only.
For example, display in a message the number of pixels by which the document was scrolled in the horizontal (pageXOffset) and vertical (pageYOffset) directions.
function scrollContent() ( //Scroll the current document 200px to the right and down window.scrollBy(200,200); //Get the values using the pageXOffset and pageYOffset properties var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset; //Get the values , on which the document was scrolled in the horizontal or vertical direction for Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //For all browsers: winOffsetX = window.pageXOffset || winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Number of pixels the document was scrolled horizontally and vertically: X = " + winOffsetX + ", Y = " + winOffsetY + "."); Find out the positions of the scroll bars
What is this for? For example, we have a beautiful website layout, which shows all its beauty only at a resolution of, say, 1600 by 1200. For example, it has a very large beautiful header. What happens if a person visits the site at a resolution of 1024 by 768? Yes, only the hat will be visible. Not good? Perhaps. Then why not do such a thing that, given the height of the browser/screen, the header would simply be cut off, and the menu and the rest of the site would go? Wow, just what you need.
Actually, I described one of the examples that I encountered in practice (see picture). I solved the problem simply - through javascript. Or maybe through jQuery, I don’t remember. I will describe both methods here.
First of all, it is necessary to distinguish between the definitions of “screen resolution” and “browser window size” (since in some articles there were incidents - they criticized some methods, proposed others, although in one case they measured the browser resolution, in the other - the monitor resolution).
You need to determine from the very beginning what is more important to you. In the case of that example with the header, I was guided by the screen (monitor) resolution: after all, the site is beautiful, if the browser window is manually reduced, then let them expand their browser to the full screen when viewing this site (they have no business, you know - editor's note). But, for example, to adjust the jQuery Lightbox gallery's expanded image, I used the browser's width and height.
And after we have chosen, we write the code, maybe in the header of the site. First an example focused on screen resolution.
Lines 3-6 are purely javascript, lines 7-11 are an example in jQuery. To determine the width and height, the javascript methods screen.width and screen.height are used. What the lines do is clear: the first script specifies the path to an additional CSS file, and the second script sets the “background-position” CSS property for the block with the identifier total.
Let's look at the second example, but which will focus on the browser resolution. Everything is the same, the methods have changed.
So, from two examples, a brief overview of what to use for what:
It is clear that if you use jQuery, then option 5 is preferable to 3, and 6 to 4 - they are simply shorter. Well, it depends on the taste and color.
As for the specific jQuery screen height and width entries, to be honest, I don't know them. In theory there should be a structure like 5-6 lines, but somehow I haven’t come across it in practice, it seems to me that they don’t exist. And it’s not necessary, screen.width is a short enough construction, it’s enough.
Yes, there is also $(document).width() - determines the width of the HTML document. Use in practice is somehow doubtful. Who knows, I will be glad if you share.
That's all for today! Let's hold out until the weekend and go to barbecues en masse! (unless you are sick with something, like some - editor's note). Good luck!
Hello! Continuing the topic in this lesson, we will look at the issue of scrolling a web page and manipulating browser sizes. How can you find the browser width? How to scroll a web page using JavaScript? I think you will find the answers to these questions in this lesson.
Not window.innerWidth/Height
It should be noted that all browsers except IE8 can also support the window.innerWidth/innerHeight properties. They save the current window size.
What's the difference? You ask. It is of course small, but extremely important.
The clientWidth/Height properties, if there is a scrollbar, will return exactly the width/height inside it, available for the entire document, and window.innerWidth/Height will ignore its presence.
If the right side of the page is occupied by a scroll bar, then these lines will display different things:
Alert(window.innerWidth); // the entire full width of the window alert(document.documentElement.clientWidth); // width minus scrolling
Usually we are only interested in the available width of the window, for example, to draw something, that is, minus the scrollbar. Therefore, documentElement.clientWidth is often used.
Width/height of a web page taking into account scrollingYes, theoretically, the visible part of the page is documentElement.clientWidth/Height, but the full size including the scroll bar is, by analogy, documentElement.scrollWidth/scrollHeight.
This is true for all regular elements.
But for a page with these properties, a problem may arise when scrolling is either there or not. In this case they do not work correctly. It must be said that in the Chrome/Safari and Opera browsers, if there is no scrollbar, the value of documentElement.scrollHeight in this case may be even less than documentElement.clientHeight, which, of course, looks like something illogical
This problem may occur specifically for documentElement.
But you can reliably determine the page size taking into account scrolling by simply taking the maximum of these several properties:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Height including scrolling: " + scrollVisota);
Getting the current scrollIf a regular element has a current scroll, you can get it in scrollLeft/scrollTop.
So what about the page?
The point is that most browsers will handle a request to documentElement.scrollLeft/Top correctly, but Safari/Chrome/Opera has bugs that require you to use document.body.
Well, to get around this problem altogether, you can use the window.pageXOffset/pageYOffset properties:
Alert("Current scroll top: " + window.pageYOffset); alert("Current scroll left: " + window.pageXOffset);
These are all properties:
- Not supported IE8-
- They can only be read and cannot be changed.
If IE8 doesn't matter, then we just use these properties.
A cross-browser option taking into account IE8 provides an option on documentElement:
Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Current scroll: " + scrollTop);
Changing page scrolling: scrollTo, scrollBy, scrollIntoViewIn order to scroll a page using JavaScript, all its elements must be fully loaded.
On regular elements, scrollTop/scrollLeft can, in principle, be changed, and the element will scroll.
No one is stopping you from doing the same with the page. In all browsers except Chrome/Safari/Opera, you can scroll by simply setting document.documentElement.scrollTop, and in these browsers you should use document.body.scrollTop for this. And everything will work great.
But there is another, universal solution - special page scrolling methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY).
- The scrollBy(x,y) method will scroll the page relative to its current coordinates.
- The scrollTo(pageX,pageY) method scrolls the page to the specified coordinates relative to the entire document. It will be equivalent to setting the scrollLeft/scrollTop properties. To scroll to the beginning of the document, you just need to specify the coordinates (0,0).
The elem.scrollIntoView(top) method must be called on the element and scrolls the page so that the element is at the top if top is true, and at the bottom if top is false. Moreover, if this top parameter is not specified, then it will be equal to true.
Anti-scrollThere are situations when it is necessary to make a document “non-scrollable”. For example, showing a large dialog box above a document so that the visitor can scroll through the dialog box but not the document itself.
In order to prevent page scrolling, just set the document.body.style.overflow = “hidden” property.
Instead of document.body there can be any element that needs to be disabled from scrolling.
But the disadvantage of this method is that the scroll bar itself disappears. If it occupied a certain width, then now this width will be freed up, and the content of the page will be expanded, the text will “jump”, taking up all the free space.
Results- To get the dimensions of the visible part of the window, use the property: document.documentElement.clientWidth/Height
- To get page dimensions taking into account scrolling, use: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement .clientHeight);
