Develop Reference

Window width changes when 1 element resized?

I'm making a 2 block web page, 1 needs to be resizable using the resizable() function of jquery. when one is resized, the second block needs to change its width as well.
I use the following jquery code :
$(document).ready(function(){
$(window).bind('resize', function(){
var left_width = $(".left").width();
var right_width = $(".middle").width() - left_width;
$(".right").width(right_width);
});
$(".left").resizable();
});
the problem is, for some reason $(window).width() keeps changing and i cant assign the width to the right block correctly
Example
the problem
this is what comes up in the console when i log $(window).width() ,
sometimes its 1166 , sometime 1183.

The scroll bar is being displayed for a fraction of a second while resizing, slightly reducing the size of your window.
This seems to sometimes clash with when you calculate the new width of the second area, which reduces the width slightly.

Use Jquery .css.
$(document).ready(function(){
$(window).bind('resize', function(){
var left_width = $(".left").width();
var right_width = $(".middle").width() - left_width;
console.log(right_width);
console.log(left_width);
console.log('window ' + $(".middle").width());
$(".right").css("width",right_width+"px");
});
$(".left").resizable();
});
[EDIT] I misunderstood the problem but the difference is about right scroll of browser

The window size changing is due to the scrollbar appearing on the right of the browser window as $(window).width() calculates the size of the viewing area. My recommendation would be to change the overflow of the body to hidden whilst you are resizing the object. It seems to work on your Fiddle at least.

Use javascript to calculate div height as a percentage?

After some searching I've come across code similar to the demo below that uses js to calculate the height of a div and then sets that number as a margin top to the div below.
This works fine however I need it to calculate as a percentage rather than a 'px' as when I scale down and the responsive image gets smaller the margin-top obviously doesn't scale with it. I'm not sure if this is possible or how I would achieve it?
jsFiddle
JS:
$(document).ready( function(){
var fixedHeight = $(".fixed-container").outerHeight(true);
$(".scrolling-container").css({"float":"left", "margin-top":
fixedHeight + "px"});
});
Any suggestions or solutions would be most appreciated.

You don't need a percentage if you're using jQuery. Use $(window).resize() to update it any time the window updates.
The other reason you can't use a percentage on the height is that you have no container that has a set height. This means it's going to be a percentage of the entire page. The more content you add, the bigger the margin will be. Use this code to achieve what you're doing:
function extraMargin() {
var xMar = $('.fixed-container').outerHeight();
$('.scrolling-container').css({"margin-top":xMar+"px"});
}
$(document).ready(function(){
extraMargin();
});
$(window).resize(function(){
extraMargin();
});
This will run extraMargin() function when the page loads and when the page is resized.
Here's a fiddle

I hope the following steps work if i understand your problem in right way .
$(document).ready( function(){
var fixedHeight = $(".fixed-container").outerHeight(true);
fixedHeight = (fixedHeight/screen.height)*100
$(".scrolling-container").css("margin-top", fixedHeight + "%");
});

Actually repeat the complete code on resize window function too:
$( window ).resize(function() {
var fixedHeight = $(".fixed-container").outerHeight(true);
$(".scrolling-container").css({"float":"left", "margin-top":fixedHeight + px"});
});

Bind function to custom condition

Note: I rarely use JS and jQuery so please excuse if the question is odd.
I am trying to add a div to my page (to a menu specifically) but only if the page is smaller than a certain width. Basically I need an event handler that allows me to wait for that condition to be met and run a function once it is (similar to how you would do with on.("click")) but I have no idea how to accomplish that.
Any help would be greatly appreciated!

have a look at the following code:
var $myDiv = $("<div class='myDiv'></div>");
$(window).resize(function () {
var windowWidth = $(this).width();
if (windowWidth < 200) {
$("body").append($myDiv);
} else {
$myDiv.remove();
}
});
we monitor the window resize event, and append/remove the div as per your condition.
Live Example
play around with the bottom right side of the fiddle (the result pane) and resize it to see what happens.

This is without the event handler, but you can add it in a resize event handler:
if (window.matchMedia("(min-width:700px)").matches) {
// viewport width is at least 700px
} else {
// viewport is smaller than 700px
}

jQuery window resize function not working

Sorry in advance if this is a minor question, but I'm new to javascript. I'm writing code for a webpage with full-width color backgrounds. Essentially, what I'm trying to do is detect the height of the window, and then make sure that the color block is the size of the window. The function works well on page load.
The problem is when I shrink the window, the div height doesn't change with the window size. I get all sorts of errors, like graphics poking out from behind the div.
I think what I'm missing is a way to detect the height of the content within each div and resize the height accordingly.
You can see how it works at http://pressshoppr.com
Here's the code:
$(function(){
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.fullWidthSectionBG').height();
var newH = wrapperH + differenceH;
var truecontentH = $('.fullWidthSection').height();
if(windowH > truecontentH) {
$('.fullWidthSectionBG').css('height', (newH)+'px');
$('.fullWidthSectionBGFirst').css('height', (newH)-120+'px');
}
});
});

I am not sure I totally understand the effect you are going for here, but I would imagine that if your initial bit of code achieves it, all you have to do is reuse exactly that. Treat each resize as if the page had just loaded, and get the results you want, eg:
$(function(){
// encapsulate the code that we know WORKS
function init() {
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
}
// call on page ready
init()
// ...and call again whenever the page is resized
$(window).resize(init)
});

Get Default Height Of Element On Webpage after css height has been applied)

How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.

I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.

I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.