Develop Reference

Calculating a responsive header's height and using the result in the style of another div's height

Please bear with me as I attempt to explain the issue I'm having. It's kinda tricky!
I have a fixed header that includes a responsive image, because of this, the height of the header depends on the width of the device. I also have a fixed footer sitting on the bottom of the screen. In-between the header and footer I have a fixed div with scrollable overflow positioned towards the left side of the screen. I need the fixed div in-between the header and footer to have a HEIGHT that is the following:
calc(100% - the header's height in px - the footer's height in px)
To do this, I know I need to use Javascript or jQuery, but I'm unsure how to go about setting that up. Furthermore, I need that styling to only be applied on a specific media query.
I have similar code that adds padding to the top and bottom of another div that is centered between the header and footer. This is the code that I'm using and it works perfectly (in the fiddle I've provided at the bottom, I don't use "DOMContentLoaded" because it doesn't quite work with JSFiddle like it should. same idea slightly different syntax in the fiddle) :
document.addEventListener("DOMContentLoaded", function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight+ "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
I need to use code similar to that, but instead of styling the div "content", I need to be styling a div titled "description" and instead of styling the padding, I need to be styling the height. The last difference is that the styling should only be applied to this media query:
#media screen and (orientation: landscape)
I've created a JSFiddle: http://jsfiddle.net/yg7mjhvn/
Thank you guys so much! I really appreciate it.

If I get it correctly, you just need to set the height of content/description div calc(100% - <header-height> - <footer-height>) with javascript.
So, to do that add a function setDescriptionHeight to your js code which sets the height of description div and add it as a load and resize event handler. All this will be done like this.
function setContentHeight() {
if (window.innerWidth > window.innerHeight) { // window.orientation === 90 for checking the real orientation
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("description").style.height = `calc(100% - ${headerHeight}px - ${footerHeight}px)`;
} else{
document.getElementById("description").style.height = "";
}
document.getElementById("description").style.top = `${headerHeight}px`;
}
window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);
Now, you see that it has a condition window.orientation === 90. That is there to check whether the device is in landscape orientation, and if it is then the styling is done.
note that window.innerHeight < window.innerWidth simply detects whether the width is greater than the height. And, window.orientation === 90 checks the device orientation and it won't be 90 for a laptop or a dekstop screen. Moreover, it is deprecated now and you can see more about it here

Can't reliably detect scroll bottom between iPhone portrait and landscape modes

I'm trying to detect when a user has scrolled to the bottom of the document. My current solution works fine in desktop browsers, and with Mobile Safari in landscape mode (with a 1px variance that I can't yet explain). However, I'm getting a completely different result for Mobile Safari in landscape mode.
I have a working example here: http://dl.dropbox.com/u/5634676/checkbottom.html
The detection routine boils down to:
if ($(window).scrollTop() + $(window).height() >= $(document).height())) {
// Bottom reached
}
Can you explain the difference between the two modes and help me reliably detect when the user has scrolled to the bottom of the document?
Update
I've updated the linked example fixing the bug pointed out by theflyingbrush. The results for landscape and portrait modes are now closer together (but there is still an as yet unexplained variance of 52px). Importantly though, for both portrait and landscape modes scrolling to the bottom of the page is still not detected.

I had the same issue on IOS mobile devices. Replace 'document' with 'body' fixed my issue.
if($(window).scrollTop() + $(window).height() > $('body').height() - 200 )
Also, it is better to check if 'near' bottom of the screen.

The height of the window changes when the device orientation changes, invalidating your windowHeight var stored on doc ready. Update it by listening for the orientationchange event and recalculating the window height. Something like:
window.addEventListener("orientationchange", change);
function change(){
windowHeight = $(window).height();
}
Edit: Confusing this, because it also involves the viewport scale. Here's a link to a working version: http://appunit.co.uk/scroll
You need to account for the height of the address bar in your calculations, because $(window).scrollTop() returns 0 until the address bar is scrolled offscreen. So, add the address bar height (60px) to scrollTop to get the distance scrolled. This is made more complicated if you haven't set a viewport meta tag in your html specifying width=device-width. In that case the viewport will be scaled from 320x356 to 980x1091, and the amount of virtual height the address bar takes up is scaled also. Summary:
var scaleFactor = ($(window).height()/356).toPrecision(2);
// toPrecision(2) prevents rounding error..
var addressBarHeight = 60 * scaleFactor;
// and when calculating scrollTop
var scrollTop = addressBarHeight + $(window).scrollTop();

How do I dynamically center an easySlider slide depending on user's browser width?

Here is the code relevant to my question: http://jsfiddle.net/mkerny45/V23NK/
As you can see there are a long horizontal chain of image slides. I would like it so that one of the slides is always at the center of the user's page both when the page initially loads and when the user resizes their browser.
This site illustrates the functionality I am interested in: http://www.freundevonfreunden.com/

I think the best way to do this is to use position: absolute or padding-left on the container of your slides and calculate the left position in pixels with browser_width - image_width / 2.
Here is an exemple of code :
var image_width = 940; //You can also get it dynamically
$(document).ready(function() {
$('#slider').css('padding-left', ($(window).width() - image_width) / 2);
});
$(window).resize(function() {
$('#slider').css('padding-left', ($(window).width() - image_width) / 2);
});

dynamically change height attribute

I am currently re-sizing a DIV class based on the users window size / resolution - I tested it and once I re-size my browser window to below 1024 x 768 the css attribute changes properly. The problem is now, when I maximize the window the attribute stays with the new properties (400 / 380). Is there a way to have it reset once my resolution goes back to over 1024 x 768?
$(function(){
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
$("#scrollbar1").css('height',(h < 1024 || w < 768) ? 400 : 380);
});
});
Some advice would be appreciated, thank you.

Assuming your screen-resolution is height:768 * width:1024 :
First see the comment by https://stackoverflow.com/users/222714/mdmullinax , you currently detect if the width is < 768 or height is < 1024 , you should switch this.
Then: you cant rely on the fact that a maximized browser-window will have a inner size similar to the screen-size.
width()/height() will return the size of the viewport, so when the window is maximized there still may be some bars on the desktop (and the browsers bars like toolbar, adressbar etc. too) that let the browser-windows size differ from the screen-size)

Assigning custom starting position on a website

I want to create a website scrolled vertically. The problem I have is that I want starting point on the website to be on the center. I guess I need to use JS for this, but I don't know how.

Apparently outerHeight is only supported in Firefox. How about this?
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
window.scrollTo(winWidth, winHeight / 2);

This should work on most browsers. window.outerHeight is the height of the entire content of the page. window.scrollTo scrolls the browser to the specified x and y coordinate.
window.scrollTo(0, window.outerHeight / 2);