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();
});

Jquery .Scroll function

I'm trying to use a function that checks the window height when the user scrolls and 'if' the window height is at a certain level then an action is fired.. but I can't seem to get it to work... The code I have is:
$(window).scroll(function() {
if ($(window).height() < 100) {
$(".mobnav").slideUp(10);
}
});
Any reason why this shouldn't work? Some help would be much appreciated.
Cheers

I think you are looking for the the scrollTop method. The height method will return the actual window height, that will only change if the window is resized.
More info: http://api.jquery.com/scrollTop/

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.

How to dynamically change Javascript Height

I know that this question has been asked a lot and I assure you I have read a majority of the answers. However, in my case, none of it has worked for me. I am currently trying this:
window.onload = function(){
var winWidth = parseInt(window.innerWidth);
var winHeight = parseInt(window.innerHeight);
document.getElementById("copyRight").innerHTML = winHeight;
//This is so I could make sure the height was actually changing. It is.
document.getElementById("grandeContain").style.width = winWidth-15+"px";
document.getElementById("grandeContain").style.height = winheight+"px";
document.getElementById("contain").style.width = winWidth-105+"px";
document.getElementById("contain").style.height = winHeight-90+"px";
document.getElementById("outside").style.width = winWidth-105+"px";
document.getElementById("outside").style.height = winHeight-90+"px";
document.getElementById("aroundToolBar").style.height = winHeight-90+"px";
}
However, no matter what I do the height is not changing onload (I also have this copy and pasted into an onresize function and that doesn't work either). The width parts work fine (not just because that is the default setting for divs; I've tested with many different widths based on window.innerWidth and it changed) but the heights refuses to change. What am I doing wrong? I've always had trouble dynamically changing height and it would be great if I could figure this out once and for all.
Also, if css has anything to do with it, the div tree is like this: grandeContain>contain>(aroundToolBar+outside) where contain is position:relative, aroundToolbar is float:left and width:125px, and outside is position:relative with margin 0 0 0 125px.
Does anyone know what I am doing wrong here?
Also, the 105s and 90s are there soley because of a header and footer in the grandeContain div, with their sibling contain.

Did you check in firebug for errors? it seems like on the line:
document.getElementById("grandeContain").style.height = winheight+"px";
you have a typo: should be winHeight+"px" instead of winheight+"px"; maybe causing a variable undefined error.

how to detect document size change in jquery

so suppose that clicking something would lead to a new content being loaded to the screen hence the height of document changes and whereas previously there are no scroll bars, now there actually are scrollbars...
how do I detect something like that happening using jquery
binding resize event onto window only detects window resize whereas binding it into document doesn't work

Update:
Please don't use the DOMSubtreeModified event. It is old, deprecated and not well-supported by browsers. In 99,9 % of the cases, there is a different event you can listen on. Most likely you are one of those people using jQuery and doing some AJAX stuff, so please take a look at their AJAX docs.
These are all available events. You would have to detect $(document).bind('DOMSubtreeModified', function() { ... }); and check for a dimension change to the previous firing.
var height = $(this).height(),
width = $(this).width();
$(document).bind('DOMSubtreeModified', function() {
if($(this).height() != height || $(this).width() != width) {
recalibrate();
}
});
This event is firing every time anything is done to the DOM. Therefore it will slowdown your browser.
We should get a better alternative. Could you please give us more information to your scenario?

Here is the solution.
// ajdust margins when page size changes (ie rotate mobile device)
$(window).resize(function() {
// Do something more useful
console.log('doc height is ' + $(window).height());
});

You could try a percentage scrolled event like this one:
http://www.jquery4u.com/snippets/jquery-detect-scrolled-page/
You might need to add a check to see whether the vertical scrollbar is present:
var hasVScroll = document.body.scrollHeight > document.body.clientHeight;