Resetting div height when window is resized - javascript

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

Related

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

How to Make This Jquery Script Work In Specific Width

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

window size jquery bug

While trying to create a single page template with parallax scrolling I found and odd problem. I'm am suspecting that the problem is in either the jQuery portion of maybe even the CSS it self, but I am rather not sure.
My current jQuery code bit reads the window size of the visitors browser and adjusts the height of the slides for each different anchored page. This way I achieved full with backgrounds no matter the window size. But in same time I realized that If I add different CSS components, they will not expand the active anchor background height, but rather will overflow onto the other slide.
Here is the jQuery portion responsible for the slides height
$(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
$(window).resize(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
});
});
And here is the site URL https://docstax.net/esgh/
Go to Plans and resize your browser you will see what I mean by not adjusting the high of slide based on needed high of content inside.
Edit: As suggested by putvande there where way to many $(window) which I was aware of, do to that I updated and minimized the code.
Basically you don't want to manually add a height component to the div if the content is going to be too large for the container. Here's what I think would work:
$(window).bind("load", function()
{
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
$(window).resize(function() {
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
});
});
You can try like this one:
<script type="text/javascript">
$(function(){
var height = window.innerHeight;
$('.windows') .css({'height': height+'px'});
$(window).resize(function() {
var reheight = window.innerHeight;
$('.windows') .css({'height': reheight+'px'});
});
});
</script>
I tried your page, I'm failing to see a problem :
The sections are resized as they should. Content is display as it should considering the styles applied.
When a section is smaller than its content, the content starts bleeding out on other pages. Perfectly normal. You could set overflow: hidden; on your .windows to prevent that from happening and/or use media queries to resize the content.
Here is a lighter function by the way, just edited your code :
$(function() {
$(window).resize(function() {
$('.windows').css({ 'height': $(window).height() });
}).resize();
});
No need to write the code twice : setting the resize handler and triggering it manually should do.
Write it once, so when you need to change it, you'll change it only once.
You could also reset de scrollTop in your resize handler to keep focus on the same portion of the page.

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

CSS: Increase parent width if height of p overlays

I have an image which is 100% of the window. Inside I have an absolutely positioned div (with the class caption) which displays a header and some text. This caption has a min-width of 36%. My website if fully responsive.
I am using media queries to reposition the caption on tablets and mobiles. However, sometimes the text inside the item is too large - the height of the caption is greater than the image.
I am using the following code to fix this using javascript, but it feels a big buggy (and it does not work when the user resizes the browser):
window.onload = function(){
setWidth();
};
var count = 0;
function setWidth() {
$('.item').each(function() {
if ( $(this).find('.caption')[0].scrollHeight > $(this).height() && count <= 100) {
$(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
count++;
setWidth();
}
});
}
Is there a way I could achieve the same effect using just css. Something where max-height on the caption is 100%, the min-width is 36% and the width will change accordingly as the height of the caption changes.
Difficult to see whether CSS is feasible without markup for your example. As for the JavaScript, you want to attach your resize function to the window.onresize event, this will call whenever the window is resized.
See example on JSFiddle
window.onresize = updateDimensions;
function updateDimensions(e) {
document.getElementById('width').innerHTML = window.innerWidth;
document.getElementById('height').innerHTML = window.innerHeight;
}
updateDimensions();

Categories