We Keep Coding

jQuery get element height on window resize

I am trying to get the height of a div tag on window resizing but I get always the same height. The event resizing is triggered correctly.
var resizeNews = this.resizeNews = function() {
$('.top-news__pillar').each(function (index){
console.log($(this).outerHeight());
if($(this).outerHeight() > maxHeightPillar) maxHeightPillar = $(this).outerHeight();
});
/if I don't set the height below the height correctly change when resizing/
$('.top-news__pillar').each(function (index){
$(this).outerHeight(maxHeightPillar);
});
}
$(window).on('resize',resizeNews);

Try .outerHeight() instead of .height()

Try this code.
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $('.top-news__pillar').height();
console.log(bodyheight);
}).resize();
});

Yes, you will get always same height why because if you specify your top-news__pillar element height in fixed unit like px instead of responsive unit like `%.
Even if you resize also your element height will be same. If you mention the element height in % you can see the height change when you resize the window.

Resetting div height when window is resized

I'm trying to set the height on a responsive layout using javascript. I notice that when using the following function the height does get applied when making the window narrow but doesn't get reset when moving back to the original wider window position. The height is retained no matter what the window size is. How do I reset the div to the original height?
$(function () {
$(window).on("load resize", function () {
console.log($(this).width());
if ($(this).width() < 1025) {
$(".case-study-child").height($(".case-study-parent").height());
}
}).trigger('resize');
});

The best way to do this is with proper arrangement of the markup and use of responsive styles. However there may be a reason that responsive style is insufficient and it needs to be solved with js:
You'll need to define the 'full screen' height of the .case-study-child div so it can be set when the screen width goes above 1024. This is necessary in case the page is originally loaded at < 1024
$(function () {
// need to know what the div height should be when the page width is >= 1025px
window.fullScreenHeight = "250px";
$(window).on("load resize", function () {
console.log($(this).width());
// get the height to set the div to based on the screen width
var newDivHeight = $(this).width() < 1025 ? $(".case-study-parent").height() : window.fullScreenHeight;
$(".case-study-child").height(newDivHeight);
}).trigger("resize");
});

JavaScript/jQuery inquiries

JavaScript/jQuery:
$(document).ready(function(){
"use strict";
var windowHeight = $(window).height();
var homePageHeight = $('#main').height();
if (windowHeight >= homePageHeight){
$('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
$('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);
}
$(window).resize(function() {
var windowHeight = $(window).height();
var homePageHeight = $('#main').height();
if (windowHeight >= homePageHeight){
$('#main').css("padding-top", ((windowHeight-homePageHeight)/2));
$('#main').css("padding-bottom", ((windowHeight-homePageHeight)/2));
}
});
Basically I have a section here on my HTML that handled by that code above:
<section id="main">
</section>
I understand that these codes handles the size of the screen on the top but can anyone help me understand in layman's term how does the windowHeight and homePageHeight works? You simply explain it to me each function on the top line by line if that's possible.

$(window).height(); assigned to windowHeight is height of the (browser) window or viewport. With respect to the web browsers the viewport here is visible portion.
$('#main').height(); assigned to homePageHeight is height of the div or section identified by ID main
(windowHeight >= homePageHeight) checks whether browser height is greater than height of section #main
if windowHeight greater than or equal to homePageHeight, then a padding is added to top and bottom of #main
$('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
$('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);`

Look at the JQuery Docs. The function height() is your favourite.
The measured height = (Height of Element) - (margin + border-width + padding of Element)

windowHeight is a variable, it's value is being set to the height of the browser window.
homePageHeight is also a variable, it's value is being set to the height of div#main.
When the document loads, it's checking if windowHeight is greater than or equal to homePageHeight; if it returns true, it is applying some css using jQuery.
When the window resizes, it's doing a similar thing again.
The rest of the code is very self-explanatory. If you still do not understand it, you need to read up on Javascript and jQuery.

JavaScript getting the wrong window size

I am messing around with some code and applying / removing classes based on window size and I'm running into a weird error. I've confirmed that I'm at the default zoom (if that matters), and I've replicated the issue in FF & Chrome.
I have a resize event handler that I'm just using to monitor the javascript window width value vs. the actual value (I have a chrome extension which shows the window & viewport width as you're resizing, and my bootstrap viewports hit exactly as they should at 992px, 1200px etc, so I know that the javascripts value is off for some reason and not vice-versa)
For some reason, as I resize the window, the value for window width that shows in the console.log, is always 21px smaller than the actual screen size. This is the code that I'm using for the test:
var w = 0;
$(function () {
w = $(window).innerWidth() || $(window).width();
})
$(window).resize(function () {
if (w != $(window).innerWidth()) {
w = $(window).innerWidth() || $(window).width();
console.log(w);
}
});

Give this a try:
var iw = $('body').innerWidth();
jsBin demo
answer from: https://stackoverflow.com/a/8340177/504836

CSS through jQuery not applied

I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:
If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css
I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height());
}
else {
$('#controls').css('top', '470');
}
}
$(window).resize(resizeVideo);
In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:
Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.
I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!

You need the 'px' suffix when manipulating the css via jQuery.
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
} else {
$('#controls').css('top', '470px');
}
}
$(window).resize(resizeVideo);

Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.
Also because the function resizeVideo is not a reference you will have to call it with ()
For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be:
$('#controls').css({top: 470 + "px"});