We Keep Coding

Refresh height after resizing with js

I have a nice script which let 2 divs have equill height.
but after I resize my browser the height keeps the same while I need it to be responsive and refreshes.
Really have no idea how to do this.
$(document).ready(function() {
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
});
Do I need to add a "document on refresh / resize" function?

try this:
$(window).resize(function (e) {
$(".h-txt, .h-img").css("height", "auto");
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
});
$(window).trigger("resize");
First we're resetting height to "auto" to make sure we always get height of the higher of the two <div>s later on.
Then - we actually get the height of the bigger one, and force it onto both elements.
Whole cycle repeats each time the window is resized - our function is bound to the "resize" event of the window. ($(window).resize(...);)
Last line is just triggering it on the initial load of the page, so we won't have to actually resize the window to get it launched for the first time.
jsfiddle: http://jsfiddle.net/5z0ett7e/

Just put your code into a function, and call it with '.resize()'
var responsiveSize = function() {
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
}
// This will call it on page load
responsiveSize();
// This will call it on window resize
$(window).resize(function(){
responsiveSize();
});

How to resize windows with help of jquery on change event?

I am trying to change the width of windows on dropdown change event. But I am stuck on it. The window is not resizing. here is my code:
$(".optionextended-narrow-swap-select select").change(function() {
$(window).resize(function(){
// here comes the code for resize.
alert (""); // for now it is not event alerting
});
});
Please help me to resize window. I just want to reduce it by 1 px just to trigger some event.

You can simply use:
window.resizeTo(window.innerWidth-1, window.innerHeight);
resizeTo():
The resizeTo() method resizes a window to the specified width and height.
For reducing width by 1 px: Get current width usingwindow.innerWidth and subtract 1 from it.

you need to trigger the window resize event.
Check the below article.
How to trigger the window resize event in JavaScript?

Try like
$(".optionextended-narrow-swap-select select").change(function() {
$(window).trigger( "resize" );
});
This was demo How it works
fiddle

Set min-height and min-width on window resize

First of all pardon me if this is a duplicate , but I have been trying solutions from other posts but none of them seems to work for me.
This is what I am trying to achieve:
I want to set the min-height and min-width of a div with the current width and height of the document. The Event should trigger on every resize of the document window.
This is what I have tried so far:
$(document).ready(function() {
function reset_demensions() {
doc_height = $(document).height();
doc_width = $(document).width();
$(".flicker-div").css("min-width", doc_width + "px");
$(".flicker-div").css("min-height", doc_height + "px");
alert("From - Function" + doc_width + "x" + doc_height);
}
reset_demensions();
$(window).resize(function() {
reset_demensions();
});
});
The problem I am facing:
First time when the window loads it shows me the correct width and height. But when I try to resize the window manually two problems are being noticed:
1> The function is called twice i.e. alert box
2> The captured height of the document doesn't change.
3> The captured width of the document keeps increasing rapidly , and the values are not garbage as it's static for every run.
Test Run OUTPUT:
On Load:
1349x626
On Resize:
1369x3130
1389x15650
I am sure I missed something here , might be something very silly. Kindly help me figure this out.

I think your mistake is that you are capturing the height of the DOCUMENT .. instead of the window.
You are changing the window size and expecting the document size to change.
change your code to check for $(window).height() and $(window).width()

First you don't need the + 'px';
When you reload your browser after refreshing. it should be working or?
A few days ago i had the same issue and recognized its because of the document.width/document.height.
Is it possible to calculate the same with window.width/window.height?
the function is called every step you resize your window but you can add a timeout, so it will be only once executed. --> timeout plugin http://benalman.com/projects/jquery-dotimeout-plugin/

Not sure if this will make a difference, but you don't need to have your function definitions nested in the onready function. It may be having some effect on the scope of the function/garbage collection etc? You can safely define the functions before the onready, as it won't be called until the document is ready. Also take out the alert from where it is. Doing that has caused me many a browser crash because of the speed that the event fires and it tries to fire an alert when you resize the window!
You might want to try $(window).width() too as that might explain your cumulative results as your document is getting bigger as you resize your div, especially if there is padding/margins involved somewhere.

Using Javascript to resize a div to screen height causes flickering when shrinking the browser window

The Background:
I tried to solve the StackOverflow question yet another HTML/CSS layout challenge - full height sidebar with sticky footer on my own using jQuery. Because the sidebar in my case may be longer than the main content it matches the case of comment 8128008. That makes it impossible to have a sidebar longer than the main content and having a sticky footer without getting problems when shrinking the browser window.
The status quo:
I have a html page with a div, which is automatically stretched to fill the screen. So if there is empty space below the element, I stretch it downwards:
But if the browser viewport is smaller than the div itself, no stretching is done but the scrollbar shows up:
I've attached jQuery to the window's resize event to resize the div, if the browser window is not to small and remove any resizing in the other case. This is done by checking if the viewport is higher or smaller than the document. If the viewport is smaller than the document, it seems like the content is larger than the browser window, why no resizing is done; in the other case we resize the div to fill the page.
if ($(document).height() > $(window).height()) {
// Scrolling needed, page content extends browser window
// --> No need to resize the div
// --> Custom height is removed
// [...]
} else {
// Window is larger than the page content
// --> Div is resized using jQuery:
$('#div').height($(window).height());
}
The Problem:
Up to now, everything runs well. But if I shrink the browser window, there are cases, where the div should be resized but the document is larger than the window's height, why my script assumes, that no resizing is needed and the div's resizing is removed.
The point is actually, that if I check the document's height using Firebug after the bug appeared, the height has just the value is was meant to have. So I thought, the document's height is set with a little delay. I tried to run the resize code delayed a bit but it did not help.
I have set up a demonstration on jsFiddle. Just shrink the browser window slowly and you'll see the div "flickering". Also you can watch the console.log() output and you will notice, that in the case of "flickering" the document's height and the window's height are different instead of being equal.
I've noticed this behavior in Firefox 7, IE 9, Chrome 10 and Safari 5.1. Can you confirm it?
Do you know if there is a fix? Or is the approach totally wrong? Please help me.

Ok -- wiping my old answer and replacing...
Here's your problem:
You are taking and comparing window and document height, without first taking into consideration the order of events here..
Window loads
Div grows to window height
Window shrinks
Document height remains at div height
Window height is less than div height
At this point, the previously set height of the div is keeping document height greater than the window height, and this logic is misinterpreted:
"Scrolling needed, no need to extend the sidebar" fires, erroneously
Hence the twitch.
To prevent it, just resize your div along with the window before making the comparison:
(function () {
var resizeContentWrapper = function () {
console.group('resizing');
var target = {
content: $('#resizeme')
};
//resize target content to window size, assuming that last time around it was set to document height, and might be pushing document height beyond window after resize
//TODO: for performance, insert flags to only do this if the window is shrinking, and the div has already been resized
target.content.css('height', $(window).height());
var height = {
document: $(document).height(),
window: $(window).height()
};
console.log('height: ', height);
if (height.document > height.window) {
// Scrolling needed, no need to externd the sidebar
target.content.css('height', '');
console.info('custom height removed');
} else {
// Set the new content height
height['content'] = height.window;
target.content.css('height', height['content']);
console.log('new height: ', height);
}
console.groupEnd();
}
resizeContentWrapper();
$(window).bind('resize orientationchange', resizeContentWrapper);
})(jQuery);
Per pmvdb's comment, i renamed your $$ to "target"

$(window).bind('resize',function(){
$("#resizeme").css("height","");
if($("#resizeme").outerHeight() < $(window).height()){
$("#resizeme").height($(window).height());
$("body").css("overflow-y","hidden");
}else{
$("body").css("overflow-y","scroll");
}
});

Maybe I am misunderstanding the problem, but why are you using Javascript? This seems like a layout (CSS) issue. My solution without JS: http://jsfiddle.net/2yKgQ/27/

How can I get the full height of a web page that uses a master page?

I'm writing a script that creates a popup that dims the screen behind the popup. I'm using JQuery's $("#dim").css("height", $(document).height()); to resize the div element in question, but it doesn't cover the master page area. Is there a way I can get the height of the WHOLE page and not just the child page?
EDIT: The problem may actually lie in the positioning, and not the size, of my div. I have it set to top:0, but maybe I need to move it using javascript?

Give this a shot:
var width = screen.availWidth;
var height = screen.availHeight;

Since .outerHeight() isn't supported for window or document, you'll have to add the padding to the height() yourself.
$("#dim").css( "height", $(document).height() + 2*parseInt($(document).css("padding"),10) );