Develop Reference

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

How to get the actual width available for content on the browser window?

I'm positioning my elements using JavaScript. In order to do it perfectly I have to get the amount of horizontal space available. Badly, $(window).width() does not take in account the scrollbar width. The result is this:
bad http://dl.dropbox.com/u/62862049/Screenshots/fb.png
Here, "Pagina 1" is contained in a small div that was supposed to align with the right border of the window. Well, it does - literally - ignoring the scrollbar, which covers part of the div, throwing the "1" of "Página 1" to the next line.

use this function
function scrollbar_width() {
var calculation_content = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
jQuery('body').append(calculation_content);
var width_one = jQuery('div', calculation_content).innerWidth();
calculation_content.css('overflow-y', 'scroll');
var width_two = jQuery('div', calculation_content).innerWidth();
jQuery(calculation_content).remove();
return (width_one - width_two);
}
now calculate available with
var availableWidth = $(window).width() - scrollbar_width();

This is similar to two previous questions:
how to get innerWidth of an element in jquery WITHOUT scrollbar
and
How to get screen width without (minus) scrollbar?

How to get page's visual section's width and height?

How to get them by using JS and jQuery?
I know $(window).innerWidth() can get. But I don't hope it contains the width or height of the scroll bar.
Thank you!

From the jQuery website:
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
If you add overflow:hidden to the body of this page (so there's no scrollbar), then run $(window).width() in a JS console, notice this value increases!

i Have found the best way is with Javascript.
<script type="text/javascript">
var height = document.body.offsetHeight;
var width = document.body.offsetWidth;
//code goes here
</script>
Bear in mind that when you use these, they return an integer so if you are going to use them to apply a style to another object or element then you will have to append them as so:
var newHeight=height + 'px';
var newWidth=width + 'px';

jquery (or js general) splitter with dynamic height

There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?

You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.

Getting height and width of body or window of web page

Depending on which mode of IE8 i'm in (quirks or standard) i get different values for the height and width. I've tried standard javascript and jquery but both return different results.
In Quirks
$('body').width = 1239
$('body').height = 184
document.body.clientWidth = 1231
document.body.clientHeight = 176
In standards
$('body').width = 1260
$('body').height = 182
document.body.clientWidth = 1254
document.body.clientHeight = 176
Any ideas how to get a value unchanged by the mode of IE8.
Thanks in adv.

Perhaps the issue is due to the scrollbars being included in the width and height regardless of whether or not they are there. I don't have IE (on a mac) so can't verify.
However, I can tell you what does work as in my project jQuery Lightbox I have no such issue. We use the following code in it:
// Make the overlay the size of the body
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash
$('#lightbox-overlay').css({
width: $body.width(),
height: $body.height()
});
// ... some code ...
// Get the window dimensions
var $window = $(window);
var wWidth = $window.width();
var wHeight = $window.height();
And the overlay displays correctly. I would trust jQuery's result of the width and height compared to that of the native result, as jQuery should naturally be taking into account any quirks with the browser.
It is important to note that the lightbox script above tends to prefer $(document) over $(document.body) for some reason - I can't remember sorry :O - so perhaps this solves the issue as well?

Just a quickshot. Try to give your body #page:
function getPageHeight() {
var pageHeight = document.getElementById('page').offsetHeight;
var pageWidth = document.getElementById('page').offsetWidth;
alert(pageHeight);
alert(pageWidth);
}

Try this:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;