Главная » Языки программирования

Javascript window toolbar height

Содержание
  1. JavaScript — Get Browser Height
  2. 10 Answers 10
  3. Get Chrome Browser Height or NavMenuToolbars Height
  4. Questions : Get Chrome Browser Height or NavMenuToolbars Height
  5. Answers 1 : of Get Chrome Browser Height or NavMenuToolbars Height
  6. How would I go about calculating the window toolbar area height?
  7. 1 Answer 1
  8. How do i calculate the height of toolbars, address bars and other navigation tools in pixels?
  9. 4 Answers 4
  10. Tested working in the following browsers :
  11. Using JQuery :
  12. Without JQuery

JavaScript — Get Browser Height

I am looking for a code snippet to get the height of the viewable area within a browser window. I had this code, however it is somewhat bugged as if the the body doesn’t exceed the height the of the window then it comes back short.

I have tried a couple of other things but they either return NaN or the same height as the above. Does anyone know how to get the real height of the browsing window?

10 Answers 10

function alertSize() < var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) < //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; >else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) < //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; >else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) < //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; >window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); >

So that’s innerHeight for modern browsers, documentElement.clientHeight for IE, body.clientHeight for deprecated/quirks.

window_size = $(window).height();

You can use the window.innerHeight

We don’t need to support Internet Explorer 🙂 If you must, try document.documentElement.clientHeight or using jquery instead.

The way that I like to do it is like this with a ternary assignment.

 var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth; var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.

Читайте также:  Php file search engine

Works on IE and other browsers as far as I know (I have only tested it on IE11).

Super clean and, if I am not mistaken, efficient.

I’m interested to know if there is a technical reason why the pattern var width = window.innerWidth || window.clientWidth; is not used.

Well the first reason is that only one of the two properties is defined, depending on the browser type used. As for why not just use the coalesce operator, technically that should be used when the items are defined, but one of them might be some false value. Chrome is smart enough to still give a value, but at least historically, Firefox would complain that the first variable doesn’t exist. Not sure how it is now, but that’s the reason why.

Ok, just for reference, I tested this in the latest versions of Firefox, Chrome, Safari, and IE Edge. Using coalesce on undefined variables works fine, so it looks like that issue has been fixed. So with that in mind, the only reason you would prefer using ternary statements over the coalesce form is for personal style reasons, or so you can support older browsers. Keep in mind that when this andwer was written, we had to support IE6 and FF3, and if I had to guess, I would say it was FF3 that had the issue with the coalesce syntax.

There’s a simpler way than a whole bunch of if statements. Use the or (||) operator.

function getBrowserDimensions() < return < width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth), height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) >; > var browser_dims = getBrowserDimensions(); alert(«Width = » + browser_dims.width + «\nHeight mt24″>

)» data-controller=»se-share-sheet» data-se-share-sheet-title=»Share a link to this answer» data-se-share-sheet-subtitle=»» data-se-share-sheet-post-type=»answer» data-se-share-sheet-social=»facebook twitter devto» data-se-share-sheet-location=»2″ data-se-share-sheet-license-url=»https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f» data-se-share-sheet-license-name=»CC BY-SA 3.0″ data-s-popover-placement=»bottom-start»>Share
)» title=»»>Improve this answer
Add a comment |
3

This should works too. First create an absolute element with absolute position and 100% height:

Then, get the window height from that element via offsetHeight

var winHeight = document.getElementById('h').offsetHeight; 
function getBrowserSize() < var div = document.createElement('div'); div.style.position = 'absolute'; div.style.top = 0; div.style.left = 0; div.style.width = '100%'; div.style.height = '100%'; document.documentElement.appendChild(div); var results = < width: div.offsetWidth, height: div.offsetHeight >; div.parentNode.removeChild(div); // remove the `div` return results; > console.log(getBrowserSize());

Источник

Get Chrome Browser Height or NavMenuToolbars Height

Questions : Get Chrome Browser Height or NavMenuToolbars Height

How do we get the actual browser height of a articles ourcodings jquery Chrome Browser window? In my testing, if the articles ourcodings jquery browser is not using the full height articles ourcodings jquery available I am having a hard time articles ourcodings jquery calculating its actual height with articles ourcodings jquery Javascript.

For the purpose of my example, my browser articles ourcodings jquery window has a height of 1033px. There are 7px articles ourcodings jquery separating the bottom of the Chrome Browser articles ourcodings jquery Window and the Windows Toolbar.

I am unable to figure out a way to calculate articles ourcodings jquery the actual height of 1033px from Javascript. articles ourcodings jquery If I knew the Nav/Menu/Toolbars Height articles ourcodings jquery (109px in my example) I could figure the articles ourcodings jquery height out.

 1040px (screen.availHeight) - 109px (Nav/Menu Toolbars Height) - 1px (bottom border) - 923px (window.innerHeight) ------- 7px (Height Pixels not used by Browser) 1040px - 7px = 1033px (Browser Actual Height) Nav/Menu/Toolbars Height: 109px Browser Height: 1033px Windows Toolbar: 40px Values from Javascript: Screen Size: 1080px screen.height = 1080 screen.availHeight = 1040 window.outerHeight = 1040 window.innerHeight = 923 $(window).height() = 923

Are there any Javascript methods to obtain articles ourcodings jquery either the Navigation Menu’s Height or the articles ourcodings jquery actual Height of the Chrome Browser Window?

Below is an example image of what I am articles ourcodings jquery trying to calculate.

Answers 1 : of Get Chrome Browser Height or NavMenuToolbars Height

window.outerHeight is the size of the query ourcodings jquery entire Chrome window. If you want to query ourcodings jquery know how much space Chrome’s chrome is query ourcodings jquery taking up, you can subtract query ourcodings jquery window.innerHeight from query ourcodings jquery window.outerHeight

Источник

How would I go about calculating the window toolbar area height?

enter image description here

So I’m trying to get the height of the top toolbar area as shown in the image. I’m aware of window.outerHeight — window.innerHeight but that also includes the bottom status bar area, giving me an innacurate number. How would I go about calculating just the top section height? Any help is appreciated.

Why would you need to know this? In my opinion this is user specific data, you shouldn’t be able to access this.

I’m using the screen capture api to capture a tab window and cropping a certain area to capture. I have it working in Chrome, but in firefox, the captured area includes the top toolbar, unlike Chrome which just includes the viewport. So I need the height of the toolbar so I know how much space to crop out from the top of the video capture.

1 Answer 1

So I figured out a hacky way to do it. You have to trigger a pointerEvent and get the screenY and clientY of the mouse position. Subtract the clientY position from the screenY position. This will then give you the top viewport screenY position. Then you subtract the window.screenY from the top viewport screenY position and this will give you the tab\toolbar\bookmark height.

When testing the code snippet, use the JSFiddle link below to run it in a full view. Running it on here will return an inaccurate result.

document.querySelector('button').addEventListener('pointerup', (e) => < let toolbarHInaccurate = window.outerHeight - window.innerHeight; let toolbarH = e.screenY - e.clientY - window.screenY; console.log('Toolbar Height Innacurate:', toolbarHInaccurate + 'px'); console.log('Toolbar Height Actual:', toolbarH + 'px'); >)

enter image description here

Measured, actual pixels: 114px

enter image description here

Result from toolbarH in code snippet: 114px

I’m using Windows 10 and window.outerHeight — window.innerHeight returned 120px which is inaccurate, but as stated by xyz, when he used that, it was accurate on his mac.

Источник

How do i calculate the height of toolbars, address bars and other navigation tools in pixels?

Basically i need to know how many pixels the y axis is from the top left of the screen until i reach the actual web window. Does anyone have any ideas.

Just wondering: why do you want to know this? Is it to calculate the inner size of the browsing viewport?

4 Answers 4

I don’t know how you can return the height of external component, but I took this from http://www.alexandre-gomes.com/?p=115 and adapted it to also return scroll bar height.

Tested working in the following browsers :

If anyone can test it in other browsers and give me feedback, I will modify this answer accordingly.

Using JQuery :

jQuery.getScrollBarSize = function() ').css(< 'width':'100%', 'height':'100%' >); var outer = $(' ').css(< 'position':'absolute', 'width':'100px', 'height':'100px', 'top':'0', 'left':'0', 'visibility':'hidden', 'overflow':'hidden' >).append(inner); $(document.body).append(outer); var w1 = inner.width(), h1 = inner.height(); outer.css('overflow','scroll'); var w2 = inner.width(), h2 = inner.height(); if (w1 == w2 && outer[0].clientWidth) < w2 = outer[0].clientWidth; >if (h1 == h2 && outer[0].clientHeight) < h2 = outer[0].clientHeight; >outer.detach(); return [(w1 - w2),(h1 - h2)]; >; alert( $.getScrollBarSize() ); // in Chrome = [15,15] in FF = [16,16]

Without JQuery

function getScrollBarSize () < var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "100%"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "100px"; outer.style.height = "100px"; outer.style.overflow = "hidden"; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; var h1 = inner.offsetHeight; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; var h2 = inner.offsetHeight; if (w1 == w2) w2 = outer.clientWidth; if (h1 == h2) h2 = outer.clientHeight; document.body.removeChild (outer); return [(w1 - w2),(h1 - h2)]; >;

In windows chrome, works fine. unless you change the display size to, say, 50% then this utility will report 34px, while they remain at 17px. 200% reports 8px.

read here stackoverflow.com/questions/1713771/…. this detail was not mentioned in the original question, and the average users do not even know about that feature. In any case, you can just scale the function’s returned value with the browser zoom factor.

Unfortunately, I don’t think there’s a way to do this in all browsers at the minute. Chrome, Firefox, Safari and Opera all support window.innerHeight and window.outerHeight, so in those browsers, assuming you’re not executing the code from within a frame, it’s a case of:

var chromeH = window.innerHeight - window.outerHeight;

That leaves (you guessed it) Internet Explorer, which doesn’t support either of those properties. It’s not even in IE9 PP3. To be fair to IE, they’re not defined in the DOM spec Screw the fairness, they’re defined in the w3c CSSOM working draft. There is a «solution» 1 that involves resizing the window and resizing back again, but it causes the window to flicker and it will not work with a tabbed window.

1 (scroll to the second example)

Источник

Оцените статью
© 2024 Программирование