Develop Reference

jQuery - resize an elements height to match window without refreshing, on window resize

I have the following script that works okay if page is refreshed but I want to be able to dynamically get the size of the resized window without refreshing the page and apply respective height to a section.
var w = $(window).width();
var h = $(window).height();
$('section').height(h);
What am I missing to make it work more dynamically?

Try the following, the function will be called every time the window is loaded or resized:
$(window).on('load resize', function(){
var w = $(window).width();
var h = $(window).height();
$('.section-content').height(h);
});
You confirmed in the comments that section should in fact be .section-content.
JSFiddle

$(window).resize(function(){
var w = $(window).width();
var h = $(window).height();
$('.section-content').height(h);
});

Try setting height width on window resize.
Window resize height/width change Fiddle
Jquery:
$(window).on('resize', function(){
var h=($(window).height();
var w=$(window).width();
$('.section-content').height(h);
});

function setToWinSize(){
var win = $(window);
$('section').width(win.width()).height(win.height());
}
$(function(){ // on DOM ready
setToWinSize();
$(window).resize(function(){
setToWinSize();
});
});

how to get html content width not window's width

I want to retrieve the html content width. Suppose when we resize the window to smaller size then scrollbar comes, so I want to get the width of the entire html content content that is visible and also the content the that is not visible due to the vertical scrollbar.

You can use window.outerWidth and window.innerWidth.

You may try this:-
var width = document.getElementById('foo').offsetWidth;
Try this code:
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
var navButtonsEtcHeight = screen.height - window.innerHeight;
var navButtonsEtcWidth = screen.width - window.innerWidth;

Here's a Fiddle
<div></div>
$(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').append('<h2>'+dWth+'px X '+dHgt+'px</h2>');
$(window).resize(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').html('<h2>'+dWth+'px X '+dHgt+'px</h2>');
});
});
$(window).width(); // Returns width of browser viewport
$(document).width(); // Returns width of HTML document

You want the Element.clientWidth property. It gives the content width of the element.
Here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Content Height Based On Browser Viewport

I have some Javascript using JQuery to give my main content's container a height if it is smaller than the browser's viewport. This is to ensure the footer is always at the bottom of the page. Wen I call it like this, it works:
$(document).ready(function() {
var windowHeight = $(window).height();
var contentHeight = windowHeight - 325;
if($("#content").height() <= contentHeight) {
alert(contentHeight);
$("#content").height(contentHeight+"px");
}
});
But I want to declare it as a function so I can use it on the page resize event, but when I do that, it doesn't work. Here is the code I am trying to use:
function pageSizer() {
var windowHeight = $(window).height();
var contentHeight = windowHeight - 325;
if($("#content").height() <= contentHeight) {
alert(contentHeight);
$("#content").height(contentHeight+"px");
}
}
$(document).ready(pageSizer());
$(window).resize(pageSizer());
Any ideas?

$(document).ready(pageSizer());
$(window).resize(pageSizer());
change to
$(document).ready(pageSizer);
$(window).resize(pageSizer);
You are invoking your functions instead of passing them as a reference which jQuery expects.

window.resize for calculating a box

I have this js code:
$(window).resize(function() {
var formHeight = $(".box-demo").outerHeight() + 40;
$(".box-demo").css("top",-formHeight+"px");
});
When you resize the window. The box-demo is recalculating the height of the form. But now i have a problem with this on mobile devices.
Only when the change width. Then this function must be performed. Now it happened when the document changing the height and width. How can i make this. That is only performed when i changed the width of the document.
Thanks for helping!

There's possibly a better way of doing this, but you could base it on a preset window width value. Only if the width changes should the resizing occur:
var windowWidth;
$(document).ready(function() {
windowWidth = $(window).width();
})
$(window).resize(function() {
if($(this).width() != windowWidth)
{
var formHeight = $(".box-demo").outerHeight() + 40;
$(".box-demo").css("top",-formHeight+"px");
windowWidth = $(this).width();
}
});
Edit: You can also avoid having to append the "px" by using:
$(".box-demo").css({top: -formHeight});
Edit 2: If you want to make it change when only the width has changed, you could also add a height check as well:
var windowHeight;
...
if($(this).width() != windowWidth && $(this).height) == windowHeight)

Extract the the method, and bind it on document ready too.

Continuously check page (client) height and change footer height according to that value

At my website, I try to accomplish (with javascript) that the footer height changes if the page height is larger then a specific value (907 pixels, the body height). It also needs to change if the page height changes (so if the viewer changes his client height).
I use jQuery to get the page height, but I need it's continuously checked, and not only when the page loads.
This is the snippet I use:
$(document).ready(function(){
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
Thanks for your help.

I suggest attaching to the resize event of the window using jQuery:
$(document).ready(function(){
$(window).resize(function() {
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
});
Take a look at the jQuery resize() docs.