Develop Reference

Change height of element on resize

Hello guys I'm trying to change height of my element dynamically.
These are my variables.
var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();
Now what I want is when difference between window width and current width is lower then 6 I want to change height of my element. I want to do this every time when (windowWidth - currentWidth)<6. So every time when window resizes and it's lower then 6 I want to change height of element by minus 14px. This is what I've tried.
$( window ).bind("resize", function(){
if((windowWidth - currentWidth)<6) {
$("#line4").css('height', elementHeight-14);
}
});
It does not work and I don't know what I'm missing. Also follow up question can I change other CSS properties this way. For this particular problem I will also need to change css top property in the same way, because I have some div with absolute position.

You need to measure the current width of the window on every resize event, since it's changing too.
var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();
$( window ).bind("resize", function(){
currentWidth = $(window).width()
if((windowWidth - currentWidth)<6) {
$("#line4").css('height', elementHeight-14);
}
});

You need to get windowWidth each time resize event called
And you should add debounce into resize event for better performance.
I often do like this, maybe you can search any better way:
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Run code here, resizing has "stopped"
currentWidth = $(window).width()
if((windowWidth - currentWidth)<6) {
$("#line4").css('height', elementHeight-14);
}
}, 250);
});
and I created this to test, you can try it. Btw i increase from 6 to 600 to check easier :D
https://codepen.io/huytran0605/pen/NgBEVO

jQuery resizing code causing perpetual resize event in IE7

This is a bit of JavaScript (jQuery) I wrote that shrinks an element to be as high as possible while still keeping the entire page above the fold. The way it works is essentially "calculate the height difference between the document and the window, and make the element smaller by that much". (see below.)
This works fine as far as I can tell — except that unfortunately I still need IE7 support, and the behavior in that browser is kind of wonky. Specifically, calling my function seems to fire another resize event, causing a kind of feedback loop.
IE7 is apparently the only browser this happens in, and I haven't yet figured out why it happens. I've already tried making the target height smaller to make sure nothing goes out of bounds, but the result is the same.
What's the best way to make my code not fire the resize event in IE7?
function stretchToBottom($element) {
(window.onresize = function () {
// temporarily reset the element's height so $(document).height() yields the right value
$element.css({maxHeight: ''});
var heightDiff = $(document).height() - $(window).height();
if (heightDiff <= 0) {
return;
}
var initialHeight = $element[0].scrollHeight;
var minHeight = 200;
var targetHeight = initialHeight - heightDiff;
var height = Math.max(targetHeight, minHeight);
$element.css({maxHeight: height + 'px'});
})();
}

wrap your code with:
<!--[if !IE7]>-->
//NONE IE code comes here
<!--<![endif]-->
<!--[if IE7]>
//ONLY IE7 code comes here
<![endif]-->
more info here

I just discovered this question which describes the exact same problem I have. The top two answers offered a working solution: store the current window dimensions and process the event listener only when they have actually changed.
For the record, here's the working code I currently have. I changed the function name to be more accurate and moved the "add event listener" part to outside the function.
function shrinkToFit($element) {
$element.css({maxHeight: ''});
var heightDiff = $(document).height() - $(window).height();
if (heightDiff <= 0) {
return;
}
var initialHeight = $element[0].scrollHeight;
var minHeight = 200;
var targetHeight = initialHeight - heightDiff;
var height = Math.max(targetHeight, minHeight);
$element.css({maxHeight: height + 'px'});
}
var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();
$(window).on('resize', function () {
if (lastWindowWidth !== $(window).width() || lastWindowHeight !== $(window).height()) {
shrinkToFit($tableContainer);
lastWindowWidth = $(window).width();
lastWindowHeight = $(window).height();
}
});

jQuery width change detection

Now Solved, thanks
I have see a lot of near answers to my problem with resize(), here is my code:
'larger()' is a layout function that I want to call when screen width regardless of device orientation is >= 501, 'smaller()' is a function that i want to call when the screen width is < 501.
My problem I have is that I don't want these functions to be called when the window.height changes. Note that in my page I am using an accordion in mobile view and if I expand an accordion panel, it adds height to the page, even though the browser window hasn't been re-sized. jQuery sees this as a window.resize.
$(window).resize(function(e) {
var winWidth = $(window).width();
if (winWidth >= 501){
larger();
}
if (winWidth < 501){
smaller();
}
});
any answers appreciated, and let me know if I need to clarify anything.
I am using jquery-1.11.0.min.js with jquery-ui-1.10.3.custom.min.js
Thanks

How about storing a reference to the previous width and if the width has changed on resize then call your functions - otherwise skip it. Like So:
// If you don't want it to change the first time
// then set this value on document load to get initial window width
var prevWinWidth = 0;
$(window).resize(function(e) {
var winWidth = $(window).width();
if(winWidth != prevWinWidth) {
if (winWidth >= 501){
larger();
}
if (winWidth < 501){
smaller();
}
prevWinWidth = winWidth;
}
});

Create a global variable that keeps track of the last known width of the window. Only if the width is changing, evaluate the width to call the appropriate function.
var lastWidth = 0;
$(window).resize(function (e) {
var winWidth = $(window).width();
if (lastWidth !== winWidth) {
winWidth >= 501 ? larger() : smaller();
lastWidth = winWidth;
}
});

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.