Develop Reference

Retrieving viewport height of screen in mobile browsers with jquery

I'm attempting to get the viewport height in mobile browsers WITHOUT the height of the browser bar but all of the solutions I've attempted have come up short.
What others have suggested is using the below, however it does not work for me. I still get a blank white bar at the bottom of the window when scrolling
var screenHeight = window.innerHeight;
$('.mobile-nav-wrapper').height(screenHeight)

I believe what you are looking for is scrollHeight
The scrollHeight property returns the entire height of an element in
pixels, including padding, but not the border, scrollbar or margin.
You can try this:
document.body.scrollHeight

Solution 1:
I don't have an answer using jQuery. But using a plain/vanilla JavaScript wouldn't cause any issue :).
Following script allows you to detect the Viewport size (height and width) reliably.
https://github.com/tysonmatanich/viewportSize
Sample usage:
<script type="text/javascript">
var width = viewportSize.getWidth();
var height = viewportSize.getHeight();
</script>
I have used it in couple of projects, were i have to re-initialize some widgets based on current Viewport width/height rather than using window width/height (Window width/height calculation isn't consistent in all browsers - some include scroll bar size 16px as a part of window width and some doesn't).
Sample Test page:
http://tysonmatanich.github.io/viewportSize/
Solution 2: (Just for reference - Not an answer to OP's question, though it is related so I thought that it can remain)
Well modernizr has a very good addition Modernizr.Mq. Through which you can cross check which break point range you are in...
if(Modernizr.mq("(min-width:320px)")){
//Do job 1
}
else if (Modernizr.mq("(min-width:768px)")){
//Do job 2
}
or
based on height
Modernizr.mq("(min-height: 800px)")
http://tysonmatanich.github.io/viewportSize/

Calculating Height of Sidebar Dynamically

I'm trying to work out the algorithm for a fixed div that grows in height (while scrolling) until it's equal to the height of the viewport or div with fixed position relative to another div and the bottom of the viewport
I am using Twitter Bootstrap affix to lock my secondary navigation bar (yellow) and my sidebar (black) to the top of the screen when the user scrolls that far. 
This works fine. The sidebar is the piece that's giving me trouble.  When it is in its in its starting position (as shown in the diagram belorw), I want the top of the bar to sit 30px
down from the secondary navigation bar (yellow) and 30px up from the bottom of the page. 
As the user scrolls, the bar should grow in height so that it remains 30px beneath the secondary navigation bar and 30px above the bottom of the screen (As shown in the diagram below)
After the bar is fixed position, I am able to do what I need to do.  
.sidebar { 
position:fixed;
top:100px;  
bottom:30px;
left:30px;
}
What I can't figure out is how to position the TOP of the sidebar relative to my
secondary navigation bar and the BOTTOM of my sidebar relative to the bottom
of the screen. I've tried calculating the height of the sidebar at the beginning and the end of the
scroll but this causes issues.
I've also tried calculating the final height of the sidebar and letting the bottom of
the sidebar just run off the edge of the screen (when it's in its initial position), but
if there's not enough content on the right side to warrant scrolling, I have no way
of getting to the bottom items in the scroll bar.  Plus my screen starts bouncing
in a really un­attractive way.
below is the current code in use:
ShelvesSideBar.prototype._resize_sidebar = function(_this) {
var PADDING = 50;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
sidebar_height = window_height - nav_bar_height - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);
/* reset the nanoscroller */
_this.$container.nanoScroller();
};
   
this code is called on page load and again on window resize. Any help would be greatly appreciated!

I've been trying to do something similar (minus the fixed elements and navbars). What I found was in order to do any sort of relative height scaling every element above the element I wished to scale all the way up to the opening html tags had to have a relative height set, even if it was just height:100%;. (here's my original question Variable height, scrollable div, contents floating)
My goal was to have the body height fixed to window size like a native full screen application would be with my content subareas scrolling, so this is a bit off topic for what you're wanting to accomplish. But I tried using JS/JQ to start off with as you're trying to do currently and found that I simply couldn't get the window height because the default behaviour for height management is to expand the page height until everything on the page fits. And all the getHeight methods I tried we're getting the page height not window/viewport height as promised. So you may wish to try fixing your body's height to the window and going from there using overflow:scroll; to scroll the page.
A quick note on overflow:scroll; if you have users who use WP8 IE (and probably other versions of IE) it may be advantageous to implement FTscroller to handle all your scroll elements as the overflow property defaults to hidden and is a fixed browser property. The only problem with FTscroller is because it uses CSS offsets to move the content container it may wreak havoc on elements that are designed to switched to fix when they reach x height from top of page because technically the top of page (or rather the top of the container they're in) isn't at the top of the page anymore it's beyond it. Just something to be aware of if you do need to cater for this browser.
And apologies for the complexity of my sentence structure. :/

so I was able to figure this out, for anyone still looking. What I ended up doing was binding to the window scroll event and - whenever the scroll occurred - I check if the class "affix" has been added to the sidebar. If it has, then I perform one set of calculations to determine sidebar height. Otherwise, I perform the other set of calculations. Code below:
/* called on window scroll */
var PADDING = 70;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
header_height = $('.prof_block').height() - nav_bar_height,
sidebar_height = _this.$container.hasClass("affix") ? window_height - nav_bar_height - PADDING : window_height - (header_height + nav_bar_height) - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);

Get height at which scroll bars will appear in javascript

Here's a couple of ways to ask this question:
How can I get the height (in pixels) at which the page will start having scroll bars? In other words, how do i get the window height at which a scroll bar will appear?
How can I get the maximum height of all elements on the page that don't have relative
heights (e.g. height: 100%)?
This question is related, but the answer doesn't do what I want in the case of relative heights: Finding the full height of the content of a page/document that can have absolutely positioned elements
I made a js fiddle of what I'm talking about: http://tinyurl.com/kgf8dae . Unfortunately, jsfiddle seems to break the relative height put on div e - run it as an html page in a normal browser to see the real behavior.

I might be misunderstand the question. In general, if the window height is less than the document height you will get a vertical scrollbar.
So in jQuery the check might look like this:
if( $(document).height() > $(window).height() ){ /* There will be a scrollbar */ }
You can perform this check within DOM changing and window resizing events to ascertain if a scrollbar has appeared. To preemptively determine if an event would cause a scrollbar to appear can be tricky and would likely require some understanding of the page and potential events to handle efficiently.

This is tagged through jQuery so I'm going to use jQuery; even though it's not mentioned in the question body.
a) It sounds like you want to get the height of the viewport (window); which can be retrieved like this:
var height = $(window).height();
If the height of the document (page) exceeds the height of the window, and there are no CSS properties blocking the display of scrollbars, then scrollbars will indeed by visible.
if( $(document).height() > $(window).height() )
b) This is going to be a bit trickier, in the sense the only way off the top of my head is to query every DOM element.. this is not a elegant solution; and in fact I'd ask you to reconsider your approach if you really you must do this. That said.. for curiosity...
If you're looking for the max height, in the sense of the largest element - then this would work:
// Get height of largest element.
var max_height = 0;
$('*').each( function(){
// skip <html> and <body>
if( ( $(this).get(0) == $('body').get(0) ) || ( $(this).get(0) == $('html').get(0) ) )
return;
var current_height = $(this).height();
if( current_height > max_height )
max_height = current_height;
});
For example, running that on this page...
> console.log( max_height );
570
However, I'm not sure if you want the maximum height of all combined elements.. In which case we obviously need to add all the elements up, but there's the obvious problem: elements are nested!
If this is what you want, then by using .children() we can just iterate through the lengths of the elements that are immediate children of your containing element/body.
// Get height of all combined elements
var combined_height = 0;
$('body').each( function(){ // replace with containing element?
combined_height = combined_height + jQuery(this).height();
});
For example, running that on this page:
> console.log(combined_height);
2176

Using the HTML/CSS from the example your provided via (jsfiddle.net/RMe3n/1). The answer is and always will be 242.
However, I assume you're looking for a more dynamic approach. Running the following after DOM ready will also produce 242:
var answer = 0;
$('#absolutes > div').each(function(){
var h = $(this).outerHeight(true);
if(answer < h) answer = h;
})
alert(answer);
While the above will solve for the particular HTML/CSS you provided it makes a lot of assumptions about the page's HTML structure and CSS.
Is it possible that the problem you are attempting to address with JS could be resolved in a "cleaner" way by adjusting the HTML/CSS of your page?
If you are looking for a fool proof JS method to account for ALL the multitude of unique layouts/styles that exist now and may exist as more CSS3 display types are adopted in the future I believe you're out of luck. There is no recommendable, consistent, efficient way to do so.
Note: If this is more than just a theoretical discussion, consider being more specific about the exact scenario you are faced with as there is likely a vastly different approach that may resolve the issue.

Truly cross-browser way to get document height?

I have a control contained in an iframe on a page of my ASP.NET web application.
Control changes its vertical size correspondingly to what user selects on it (some elements get in, others get out). So, I have to set the iframe size precisely to get the whole control shown and not to make gap between the iframe and the elements below it.
Somewhere on the web I have found a way to get the document height in a cross-browser way:
function getDocHeight(document) {
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
On self.document.body.onload on the control page, hence, I call this function:
function adjustIframeHeight() {
var iframe = window.parent.document.getElementById(window.frameElement.id);
var iframeHeight = getDocHeight(iframe.contentWindow.document);
iframe.style.height = iframeHeight + "px";
}
The problem is it works fine e.g. in Firefox, but in some cases bottom sections of the control are cutoff in Chrome and IE for example.
Is there some truly cross-browser way to get this height, or I am doing something else wrong?
Thank you for the time

I'd use something like jQuery to help out with this (since using height methods seem to vary from browser to browser) and here is some jQuery code that could help out:
$(document).height(); // height of HTML doc

div max-height set dynamically using javascript

I have a web app using master page and content pages (see the attached image). I need to set max-width of one div in content page dynamically accordint to the browser window size (so that the whole app stays on the page, without scrolling). I couldn't find the sloution (or couldn't replicate the results) using just html and CSS. So I'm thinking to do it using javascript. But the problem is, I NEVER used it, so I really have no clue how to do it. I'd really appriciate if someone took a couple of minutes and write the function that will do it. As I see it, I should take difference in height between bottom edge of the header and top edge of the footer and subtract height values of searchbar and button bar.
EDIT:
Thanks to maxedison for providing that code. But, how do I use it? :D I'm a total noob. I have a problem, since I use masterpage and content pages. Where do I put that code?
EDIT 2 - THE ANSWER:
I looked a little further into how to use jQuery, and searched here some more, and I found a solution. Next time I start developing an application, I'll use jQuery from the bottoms up...It just simplifies some things so much. :)
So for the solution: It's similar to what maxedison suggested, but I changed it so, that I set height with CSS and I just added a fixed value to deduct from window.height.
<script type='text/javascript'>
$(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
$(window).resize(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
});
});
</script>

Using jQuery, it would look something like:
function resetHeight(){
var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight();
$('.content').height(newHeight);
}
$(function(){
newHeight();
$(window).resize(function(){
resetHeight();
});
});