We Keep Coding

Full viewport height image with parallax scrolling

I wish for certain sections of a page to fill out at least 100% of the viewport height regardless of the screen size. I also want the content and background of sections to scroll with a parallax effect.
I have jQuery on the page and use the following to resize the section .parallax to full viewport height:
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight);
};
$(document).ready(imageFit);
$(window).resize(imageFit);
I'm aware of the units vh and vw but I don't want to use them because of poor browser support. (By the way, I'm really bad at javascript so please help me improve this if possible).
Here's a pen with the 100% viewport height section: http://codepen.io/Mest/full/GpycL (If unfamiliar with Codepen; click Edit in the bottom left corner to edit the code).
This works fine, however I'm not how to implement the parallax effect. I've tried using Skrollr to modify CSS properties in order to create the parallax effect. However since my section gets it's full viewport height height-value from the script above it seems like Skrollr doesn't consider it to have any height and thus makes the parallax "transition" to occur instantly as I scroll. It works great without the resizing script above.
Sadly I'm unable to set up an example with Skrollr for you, but I confirmed this is what happens by giving my section a height value of X px in my CSS and then Skrollr functioned as it should while scrolling for the first X px.
Thus, my question is the following:
How can I make Skrollr recognize the height set by the script above?
or,
Is there a better/easier way to create the effect I want? Either through another scrolling animation library or with a different approach to fill out the viewport height?

Don't forget to call refresh() at the end of imageFit.
If you include https://gist.github.com/Prinzhorn/5796546 as well, it would be as simple as
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight).refresh();
};

Height auto - displaying hidden content when the browser is resized

Here is the site im working on, forgive me if im not being specific enough, im new to this.
http://daniel.grocock.me/portnew
Setting the paragraph height for the #introexpand div and have a resize function that
checks to see the if the #introexpand needs to fit in a bigger or smaller area when the browser has resized.
function resize() {
$("#introexpand").css("height", "auto").show();
var pHeight = $("#introexpand p:first").height() + 15;
$("#introexpand").css("height", pHeight);
}
So im setting the pHeight to auto before resetting height and to show it for a brief second so the correct height can be obtained.
The problem is now when i resize the browser the #introexpand div pops down before the link span.learnmore is clicked.
If i remove height auto from the CSS it seems to fix it but then the #introexpand div dosent function when clicked.

You could let this function run in a onresize-handler (jQuery), but it's simpler be solved with CSS:
#introexpand {
padding-bottom: 15px;
}

Why not approach this differently. Rather than trying to calculate the height that #introexpand needs to be, let it always be auto and just toggle display:none; when you click on span.learnmore.
To do that, you'll need to remove position:relative from #introexpand and position:absolute from #introexpand p.
After you've done that, just default #introexpand to display:none and then on click on span.learnmore you can either .show() the div or .slideToggle() it for something a little fancier.
I just think you're trying to make it more complex than it needs to be.

Set initial height of div based on how much space is left inside of parent div

I have 3 divs:
.main_content, .content_top, .content_bottom
.main_content is set to 100% but 100% is not the size of the browser window, it's inside the middle of my page.
.content_top is set at 60% height.
I want to set the height of .content_bottom to the rest of the space available inside .main_content via javascript.
For example, if .main_content was 800px high, and .content_top was 600px high, I want to set .content_bottom to 200px.
This is a simplified example, my situation is not as easy as specifying 40% or leaving the browser to decide. For one, there's currently 46px of padding on .content_top. I'm doing a split screen like interface between .content_top and .content_bottom dragging a bar to resize both. This is mostly working, just having trouble with the bottom portion. Being able to set .content_bottom to a specific height(i.e. 198px) would solve all of my current problems. Happy to elaborate on this example, as well as dig into some actual code, but was hoping there was an easy method for calculating this and was having trouble finding a good example that worked cross-browser, thanks!

Assuming you're using vanilla JavaScript (and not a library), I'd suggest:
​var cBs = ​document.getElementsByClassName('content_bottom');
for (var i=0,len=cBs.length; i<len; i++){
var p = cBs[i].parentNode;
cBs[i].style.height = (parseInt(p.offsetHeight,10) - parseInt(p.getElementsByClassName('content_top')[0].offsetHeight,10)) + 'px';
}​​​​​​​​​​
JS Fiddle demo.

Simple jQuery solution:
$("content_bottom").css({"height": $("main_content").height() + $("content_top").height());

Javascript mobile - calculate element dimensions in pixels based on screen dimensions

I want to calculate the dimensions of certain elements (img, ul, div, etc.) based on screen size. I can't to use percent values. I need pixel values. I also don't want to 'hardcode' everything using media queries and a new set of images for every resolution or screen size.
I thought about making this using screen size. I only need width calculation. So I add the initial width of my images and some initial space between them -> total width, and I then get scaling factor using: screenwidth / totalwidth
Now I scale all of my images and also the space between with this factor.
It's a very simple layout, only a few images and HTML elements. So this scaling should not be expensive.
It would work if the devices gave me reliable width measure for the screen. But depending of the device, I get a different meaning of this value. I'm using screen.width
In some cases screen.width is what the currently width is - in portrait it's a small value, in landscape a large one. But in other ones, width is always the same - the value which is defined as device's width.
So how do I scale my layout according to what's currently screen width in a consistent way with rotation, and without CSS % values? Is this an acceptable way to do layout scaling or am doing no-go?
Edit: I have to add more details after trying Jasper's solution. The images are used in a slider. The slider is basically an UL and each LI contains an image with float:left - so all the images are appended horizontally one after the other. With overflow hidden and stuff only the current slide is visible. Now, the official width of the UL is the sum of the width of all contained LIs. And this means, at least with my current state of knowledge, that I can't use percentage size for the LI elements, because if I did, this will be % of this total width of the UL, which is very large, and I end with immense LI elements/images.
Isn't there any reliable way to get current screen width for all devices ? I already have working code, I only need that the value of screen width is correct.
New update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011 "One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....

This is most likely accomplish-able with CSS alone (which is usually good for performance):
img {
width : 100%;
height : auto;
}
That will keep all the image's aspect ratios but re-size them to 100% width. Now that width is set based on the image's parent element(s) width. If you are using jQuery Mobile then the data-role="content" elements have a 15px padding, so to remove that you can just add a container to the image elements that removes the padding:
HTML --
<div class="remove-page-margins">
<img src="http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />
</div>
CSS --
.remove-page-margins {
margin : 0 -15px;
}​
And walaa, you've got responsive images without loads of code or overhead.
Here is a demo using a container and not using a container: http://jsfiddle.net/EVF4w/

Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.

Scrollable div show content outside of window?

I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )

You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.

The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)

OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!