Develop Reference

Centering div margin top and margin bottom

I'm trying to get margin-top and margin-bottom to center my <div>. This JavaScript, which I wrote, works. However, if the site is cached once, CTRL+F5 refresh causes the script to receive a wrong clientHeight. Refreshing second time, retrieves the correct clientHeight.
I've tried using window.load and this works. However, it is so slow that the <div> loads and after 2 seconds, it shifts to the middle.
<script type="text/javascript">
var height = $(window).height();
var clientHeight = document.getElementById('account-wall').clientHeight;
var calc_height = (height - clientHeight) / 2;
document.getElementById("account-wall").style.marginTop = calc_height + 'px';
document.getElementById("account-wall").style.marginBottom = calc_height + 'px';
</script>
<script type="text/javascript">
$(window).load(function() {
var height = $(window).height();
console.log(height);
var clientHeight = $('.account-wall').height();
console.log(clientHeight);
var calc_height = (height - clientHeight) / 2;
document.getElementById("account-wall").style.marginTop = calc_height + 'px';
document.getElementById("account-wall").style.marginBottom = calc_height + 'px';
});
</script>

Use a resize event since you need it to be centered even if the window.height changes. To make sure it is centered from the beggining use .resize() to trigger the event.
$(window).on('resize', function(event){
var height = $(window).height();
console.log(height);
var clientHeight = $('.account-wall').height();
console.log(clientHeight);
var calc_height = (height - clientHeight)/2;
document.getElementById("account-wall").style.marginTop = calc_height+'px';
document.getElementById("account-wall").style.marginBottom = calc_height+'px';
}).resize();

Background scrolling with content matching top and bottom?

I have a page with a simple div. If the div is at the top of the page, the background image (a very long vertical wallpaper) should also only be displaying the top section. If we scroll all the way down, then at the last area way at the bottom, the bottom of the background will show. The effect is that it's like a parallax where the scrolling of the content and background image occur in tandem and are scaled to each other.
How would I do this?
Update: My attempt is something like this:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom);
$('body').css({
'background-position':scale+'%'
});
});
}
I don't really know how to work with variables within quotes however.
Update: I got it to work using this:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
});
}
But there seems to be very bad impact on performance. Is there any way to make it more responsive and faster?

CSS:
background-attachment: fixed;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

This worked for me:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
*/
});
}

Viewport height and .css()

What I'm trying to achieve is to get the browser's viewport height and add it to several classes of my css. So far I have this:
Get viewport height:
var width = $(window).width();
var height = $(window).height();
Add to css
$('divOne').css({"height": " *viewport height* "});
$('divTwo').css({"top": " *viewport height* "});
$('divThree').css({"top": " *viewport height* + 200px"});
$('divTwo').css({"top": " *viewport height* + 400px "});
Sample:
It would be really great if someone could provide some working piece of code here. My coding skills are very limited.

Your code looks about right to me, except you have to do the math outside of the string literals, and because you're using classes, you need a class selector (e.g., ".divOne", not "divOne"), e.g.:
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({"top": height + "px"});
$('.divThree').css({"top": (height + 200) + "px"});
$('.divTwo').css({"top": (height + 400) + "px"});
You probably also want to give divs two through four height, because otherwise they'll only be as tall as their content. And you need to be certain that the script operating on the divs is after the divs in the markup, so that they exist when the code runs. (Or use jQuery's ready event, but there's no need for that if you control where the script tags go.)
Here's an example that adds heights, etc.: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div Height And Such</title>
</head>
<body>
<div class="divOne">divOne</div>
<div class="divTwo">divTwo</div>
<div class="divThree">divThree</div>
<div class="divFour">divFour</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({
"top": height + "px",
"height": "200px"
});
$('.divThree').css({
"top": (height + 200) + "px",
"height": "200px"
});
$('.divTwo').css({
"top": (height + 400) + "px",
"height": "200px"
});
</script>
</body>
</html>

$('.divOne').css({
"height": $(window).height()
})
Try that... Remember the . Before divOne

Is that what you're asking for?
var height = $(window).height();
$('.divOne').css({"height": height+"px"});
$('.divTwo').css({"height": height+"px"});
$('.divTwo').css({"top": height+"px"});
$('.divThree').css({"top": height+200});
$('.divTwo').css({"top": height + 400});

Choose whichever suits you the best. I suggest pure JavaScript with variables.
// NO VARIABLES
// pure JavaScript
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 200 + "px";
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 400 + "px";
// jQuery
$("#divOne").style.height = $(window).height();
$("#divTwo").style.height = $(window).height();
$("#divThree").style.height = parseFloat($(window).height()) + 200 + "px";
$("#divFour").style.height = parseFloat($(window).height()) + 200 + "px";
// WITH VARIBLES
// pure JavaScript <-- SUGGESTED
var viewportHeight = parseFloat(document.documentElement.clientHeight);
document.getElementById("divOne").style.height = viewportHeight + "px";
document.getElementById("divTwo").style.height = viewportHeight + "px";
document.getElementById("divThree").style.height =
viewportHeight + 200 + "px";
document.getElementById("divFour").style.height =
viewportHeight + 400 + "px";
// jQuery
var viewportHeight = parseFloat($(window).height());
$("#divOne").style.height = viewportHeight + "px";
$("#divTwo").style.height = viewportHeight + "px";
$("#divThree").style.height = viewportHeight + 200 + "px";
$("#divFour").style.height = viewportHeight + 400 + "px";

"full-window" slideshow image stretching bug

If you go to the slideshow I am working on here, you can see that the image resizes and moves correctly if you resize the browser window.
...unless you make the browser window's width smaller than a certain amount (i can't tell what defines that amount) and then it stretches the image instead of scaling it. How can I fix this?
Here is my resize code:
winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
$('#curImg img').css({width:winWidth});
imgWidth = winWidth;
imgHeight = $('#curImg img').height();
$("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
$("#curImg").css({height: winHeight + "px"});
}else{
$('#curImg img').css({height:winHeight});
imgHeight = winHeight;
imgWidth = $('#curImg img').width();
$("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
$("#curImg").css({width: winWidth + "px"});
}

You could also check out this jQuery plugin:
http://srobbin.com/jquery-plugins/backstretch/
Or CSS tricks which looks at multiple solutions:
http://css-tricks.com/perfect-full-page-background-image/

You should take a look to tha background-size properties, especially at the cover values

Something I wrote that works:
//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height
iRatio = iWidth/iHeight;
wRatio = oWidth/oHeight;
if(iRatio<wRatio){
imageWidth = oWidth;
imageHeight = Math.ceil(iHeight*(oWidth/iWidth));
}
else{
imageHeight = oHeight;
imageWidth = Math.ceil(iWidth*(oHeight/iHeight));
}
$('#backgroundResizeImage').css({
'height': imageHeight,
'width': imageWidth
});
Hope this helps!

I rewrote your example a bit to make a self-contained demonstration.
Two notes unrelated to your question.
Make sure to cache any of your jQuery objects. You don't want to fetch items repeatedly, as that comes with an unnecessary performance cost.
My example shows this happening in the resize event for the window - I'm not sure how you had yours set up. For production, it's very important to throttle events bound to things like the window resize event, since they can be fired as fast as a browser can manage, which can lead to bad consequences. See this excellent article by John Resig on a time this bit Twitter in the ass.
The biggest relevant change is that I altered the way it's setting the heights and widths of images depending on how their ratio compares to the window. I think this way is a little clearer, but that's subjective. But it does work!
http://jsfiddle.net/L4k3s/2/
var $window = $(window),
$img = $('img'),
imgRatio = $img.width() / $img.height();
$window.on('resize', function (event) {
var imgWidth = $img.width(),
imgHeight = $img.height(),
winWidth = $window.width(),
winHeight = $window.height(),
ratio = winWidth / winHeight;
// The image is wider than the window
if (ratio < imgRatio) {
$img.width(winWidth);
$img.height(winWidth / imgRatio);
$img.css({
left: 0,
top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
});
// The image is taller than the window
} else {
$img.width(winHeight * imgRatio);
$img.height(winHeight);
$img.css({
left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
top: 0
});
}
});
​

Edit this expression to turn fixed bottom in fixed top

this function is supoused to work in iphone,
$(document).ready(function() {
$('#head').css('position','fixed');
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset + window.innerHeight + 25) + 'px';
// alert((window.pageYOffset + window.innerHeight - 25) + 'px');
};
});
but it's supoused to keep the div (25px) at the bottom of the page, i need it on top of the page no matter how much i scroll
i'm tring like this
$(document).ready(function() {
$('#head').css('position','fixed');
var height = $('#head').height();
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset) - height + 'px';
// alert(window.pageYOffset); alert(window.innerHeight);
};
});
but it seems that the #head div is not following properly the scroll (it seems like it bounces), any idea what i'm missing??

Position fixed do not work in iPhone. So it is bound to bounce whenever you scroll the page until the scroll handler set its new position.
$(document).ready(function() {
$('#head').css('position','absolute');
$(window).scroll(function() {
$('#head').css({
top: window.pageYOffset
});
});
});

Try a little more jQuery:
window.onscroll = function() { $('#head').offset(0,0); }