We Keep Coding

jQuery: How to get the dynamic height of header

I am new to jQuery. And I can't figure out the solution to this problem.
So, the problem is that I want a fixed header on my website. I did that with CSS. But I want to give the main container div(right below the header) a margin-top of the height of the header.
For example, if the #masthead (header) height is 100px, I want to give a margin-top of 100px to .site-container.
I can easily do it with CSS, but due to some reason, there will be different header height on different pages. Or let's suppose that I don't know the height of the header.
So I want to do it using jQuery.
Here is the code -
jQuery(document).ready(function($) {
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
} );
});
It works perfectly. But there is just one problem.
That, the header height on my website changes in different screen size. In Desktop Screen size, the #masthead height is 80px, in tablet, the screen size is 160px and in mobile, it's 60px.
But, the value of header height does not change with the change in screen size in jQuery.
In jQuery, I want the value of the variable header to change dynamically, with the change in screen size.
Please note that I am working on a WordPress website.
Please help me.
Thank you.

Use:
Use a window resize function
You could also use: (to make your life easier :)
jQuery selectors
.outerHeight() to "Get the current computed outer height (including padding, border, and optionally margin)"
Example code:
jQuery(document).ready(function($) {
// When the window resizes
$(window).on('resize', function () {
// Get the height + padding + border of `#masthead`
var mastHeight = $('#masthead').outerHeight();
// Add the height to `.site-content`
$('.site-content').css('margin-top', mastHeight);
});
// Trigger the function on document load.
$(window).trigger('resize');
});

Write the same function on window.resize.
By the way, after resize the screen reload the page, hope your code will work as it will get the document ready function.

You can execute the same function on both page load and window resize.
jQuery(document).ready(function($) {
function resizeContent(){
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
});
}
resizeContent();
$(window).resize(resizeContent);
});

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.

How do I resize a DIV to full screen in a browser

function maximize(){
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var body = document.body;
var div = document.getElementById(main-window);
<-- Need here some code for assignind div-s height to browser height
make_draggable();
};
This is the code, I need to full screen the window to size of my window.
There is a problem, because my div is draggable, and resizable to and when I am writing code for full screen, drag and resize stop working.
How do I resolve this?

If you are using jQuery in your site, you could try this:
function maximize(){
$('#main-window').width($(window).width()).height($(window).height());
make_draggable();
};
Here's the working fiddle

Removing extra space in html page

I am currently implementing a tool for a project, and I am having some difficulties to remove some extra space at the bottom of the main container.
Basically, the container that contains the drawings-list and the map, resizes itself on window resize event. The bottom bar is fixed, so it does not affect anything.
$(window).on('resize', function () {
resize();
});
function resize() {
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
}
When the page is first loaded, it renders properly. Then when shrinking it, we can see a space that seems to be equal to the difference between the original page height and the current one.
Changing the size of the html and body element does NOT fix the issue.
Using the Google Chrome Dev tool, I am not able to select that grey background.
Changing margin-bottom to a negative value on the main container does not remove that space either.
Any clue on how to get this space removed?
Thanks

Sure you don't have an element inside that extends beyond the body with a min-height set on it. This would push the sticky footer down when the body shrinks below that min-height creating the extra space?
Look for all elements with a min-height and try shrinking them.

When the page is first loaded, it renders properly. Then when
shrinking it, we can see a space that seems to be equal to the
difference between the original page height and the current one.
May problem is: resizing the page so try that:
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
});

How to resize left floating div to accommodate right floating DIV?

How can I set up 2 html div tags, one float left (actually containing the Google Earth Plugin), one float right (initially hidden)?
The content of the right div will be dynamically populated with a number of different dialogs and then made visible. Once visible it's width can expand further.
I need the left div to shrink to accommodate the right div when ever the right div toggles from invisible to visible or whenever it's width adjusts.

Just adjust the width of your left div with some javascript?
Depending on your layout you can use % or px or whatever you prefer.
Here´s a really simple example showing how to do it with a percentage based layout:
HTML
<div class="l">LEFT</div>
<div clasS="r">RIGHT</div>
<br>
<a>TOGGLE R</a>
JS
(function($) {
var visible = false;
$("a").click(function(event) {
event.preventDefault();
$("div.r").toggle();
$("div.l").css("width", 50+(visible*50)+"%");
visible = !visible;
});
})(jQuery);
Try it out in the fiddle here: http://jsfiddle.net/ZbzL5/

Here an example:
You have to make an event when the new div is get visible and change the width of the left div.
JS:
$(function(){
$("button").click(function(){
var precSize = $("#width_input").val();
var parentWidth = $(".wrapper").width();
var leftOldSize = $(".left").width();
var newSize = parentWidth * ( (100 - parseInt(precSize)) / 100);
$(".left").width(newSize);
$(".right").width( $(".right").width() + (leftOldSize - newSize));
});
});
jsFiddle

basically to make google earth aware that div size changed you need
google.maps.event.trigger(map, "resize");
reference : so g map resize
But in your scenarion you can also trigger the abovein the resize event of the right div using jquery. $('div').bind('resize', function(){})