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.
Related
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);
});
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");
});
I'm beginner to Jquery.
I have a simple piece of code that changes the height of an element to half of the window height.
$(function () {
'use strict';
$('.moubdi3in').height($(window).height());
});
I want to make this script work only when window size is more than 769px. In lesser heights, I want to give the element full window height.
How can I do this?
Thanks
You can use a trinary operator or if to decide what will be the elements height according to the current window height:
$(function () {
'use strict';
var windowHeight = $(window).height();
$('.moubdi3in').height(windowHeight > 769 ? windowHeight / 2 : windowHeight);
});
I want to make this script work only when window size is more than
769px
if($(window).height() <= 769) return; // reject function if less|equal 769px
I want to give the element full window height.
$('.moubdi3in').css('height', $(window).height()); // set windows height to height property of .moubdi3in element
I'm trying to resize and center dynamic content inside a div onLoad and on window resize to suit my liquid layout.
Posting a link < http://jsfiddle.net/h52tqaz2/">fJSFiddle > due to easy understanding.
Why doesn't it center all DIVs onLoad (but it centers when resize)?
How can I make this scale according to the height of the window as well as according to the width of the window by maintaing its aspect-ratio?
NOTE: The dynamic content are not the same size.
Use ready instead of onload :
$(document).ready(center_images);
$(window).resize(center_images);
function center_images() {
var parent_width = $('.container').width();
$('.content').each(function() {
var content_width = $(this).width();
var margin = (parent_width-content_width)/2;
$(this).css('left', margin);
});
}
Check JSFiddle Demo
I want to get selected div width according to following algorithm:
If user resize browser then get div width according to resize browser div.
If user don't resize browser then get div width normally.
Here is my code
jQuery(document).ready(function($) {
if ($(window).resize) {
var width = $('#main_header .wrapper').width($(window).resize);
}
else {
var width = $('#main_header .wrapper').width;
}
});
My code don't work, Please, any one can help me solving this problem. Thanks
This little function will get the width of #main_header .wrapper and update it on resize:
$(function() {
var $wrapper = $('#main_header .wrapper');//the element we want to measure
var wrapperWidth = $wrapper.width();//get its width
$wrapper.text(wrapperWidth);//dunno what you want to do with wrapperWidth but here im setting it as the text of .wrapper just so you can see the value changing
//add resize listener
$(window).resize(function() {
wrapperWidth = $wrapper.width();//re-get the width
$wrapper.text(wrapperWidth);//update the text value
});
});
Here's a working demo: http://jsfiddle.net/5rZ4A/
Your use of if is the problem. Try this:
jQuery(document).ready(function($) {
$(window).resize(function() {
alert("$('#main_header .wrapper').width());
})
});
$(window).resize will always return true because resize is a jQuery function. This code instead watches window for a resize event and calls the inner function when it happens.
I didn’t fill in the inner function because I wasn’t clear on what you wanted to happen upon resize.