Element sizes and web page scrolling. How to determine "screen resolution" and "browser window size" in JavaScript and jQuery Where it might come in handy

When developing interfaces for websites, you often have to use JavaScript. Of course this is bad, but in some situations it is simply impossible to implement everything completely in CSS.

The most common need I have is to determine the width or height of the browser window for further manipulation. Below the cut is all the information on this topic.

Where can this be useful?

I won’t speak for everyone, but this comes in handy for me in integrating with Textpattern all kinds of galleries, sliders, etc., where everything is written in pure JS. Things that are strictly tied to JS are rare, but they do occur, which is why this note appeared.

You can define it in 2 ways: JS or jQuery.

Determining width or height using pure JS

This is the most preferred method, since almost every modern browser has a JavaScript engine. Even mobile browsers have learned to work with JS.

Of course, there is a possibility that the user himself disables JS processing in the browser, but it seems to me that there are not many such “strange people”, since almost every site uses some kind of solution that runs on JS.

In JS, to determine screen sizes, you need to use the functions:

Screen.width //Screen width screen.height //Screen height

Here's a pointless usage example:

alert(screen.width+"x"+screen.height);

If you are using this to position some elements on the page, then the best solution would be to use the browser window dimensions rather than screen sizes. In JS this is done like this:

Document.body.clientWidth //Browser width document.body.clientHeight //Browser height

Accordingly, here is a meaningless example of use:

alert(document.body.clientWidth+"x"+document.body.clientHeight);

Browser sizing with jQuery

Personally, I use the method described below. This method only works if you have previously installed the jQuery library on your site. On all the sites that I have to create, this library is a de facto standard.

To use jQuery for our task, we need to use the code:

$(window).width(); //Browser width $(window).height(); //Browser height

And in the end, I would like to say that if it is possible to do without JS and jQuery in general or partially, then this is exactly what you need to do.

Share on social media networks

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.

Width/height of the visible part of the browser window The clientWidth/Height properties for an element are exactly the width/height of the visible area of ​​the window.


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 small, of course, 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 scrolling

Yes, 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 scroll

If 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 left scroll: " + 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, scrollIntoView

In 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).

scrollIntoView

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-scroll

There 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);

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 properties

They 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 properties

They 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) properties

They 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) location in all browsers winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Window coordinates relative to the user's screen: X = " + winX + ", Y = " + winY + "."); ) Find out the coordinates

properties pageXOffset (scrollX) and pageYOffset (scrollX)

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 , by which the document was scrolled horizontally or vertically for Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //For all browsers: winOffsetX = window.pageXOffset || document.documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Number of pixels by which the document was scrolled horizontally and vertically: X = " + winOffsetX + ", Y = " + winOffsetY + "."); ) Find out the positions of the scroll bars