If the height of the window changes, then update the CSS height accordingly

Question

If the height of the window changes, then update the CSS height accordingly

Here is the code that I am using:

$(document).ready(function() {

    $('body').css('overflow', 'scroll');
    var heightWithScrollBars = $(window).height();
    $('body').css('overflow', 'auto');

    alert('heightWithScrollBars = ' + heightWithScrollBars);

    if ( heightWithScrollBars < 700 ){
       $(".vert, .simply-scroll-clip").height('270px'); 
   }        
});

In a linked stylesheet, it is defined that both .vert and .simply-scroll-clip elements should have a height of 400px.

Even though when the screen size is less than 700, the if {} block gets executed, the height change does not happen. Interestingly, if I directly run

$(".vert, .simply-scroll-clip").height('270px');

in the console, it works perfectly fine. But for some reason, it doesn't work when the page loads initially.

Can someone explain why this might be happening?

Thank you!

jquery css

Answer 1

Answer №1

To achieve this, utilize the viewport-width property along with the resize event.

Set the height using vw units.

.vert, .scroll-clip {
    height: 3vw;
}

Then proceed to resize:

var updateZIndexOn = $(".vert, .scroll-clip");

$(window).resize(function() {
  updateZIndexOn.css("z-index", 1);
});

Reference: CSS-Tricks || Employed this technique in a past project.

Answer 2

To achieve this, utilize the viewport-width property along with the resize event.

Set the height using vw units.

.vert, .scroll-clip {
    height: 3vw;
}

Then proceed to resize:

var updateZIndexOn = $(".vert, .scroll-clip");

$(window).resize(function() {
  updateZIndexOn.css("z-index", 1);
});

Reference: CSS-Tricks || Employed this technique in a past project.

If the height of the window changes, then update the CSS height accordingly

Answer №1

Similar questions

Place in the Middle of a Bootstrap Container

Tips for utilizing the .clone() method within a loop or for each individual element of an array

Error found in jQuery validation - TypeError: undefined

PHP Ajax login form to instantly authenticate without redirecting to a new page

How to turn off pinch to zoom feature in Mozilla Firefox on a Microsoft tablet or touch screen display

Placing a div directly beneath an anchor tag

What is the best way to send a POST request to my Rails controller using Ajax?

Footer panel in Bootstrap not aligning to the bottom of the page

AngularJS - issue with directive functionality on dynamically inserted classes

using jquery, how can you send multiple parameters in an ajax request

Styling Columns with Borders and Gutters in Bootstrap

What is the best way to ensure the checkbox functions correctly in this specific situation?

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Problem with flags series in Highcharts/Highstock

Fetching the duplicated data from a submitted form using serialize() method

Enhance Your Jekyll Site with the Minimal Mistakes Theme Plugin

Resolving problems with PHP source and JSON in jQuery autocomplete feature

Sass compilation failed due to an error in the CSS code provided

Ways to transform a 4-column CSS table into a 2-column layout for mobile and tablet viewing

The jQuery function that clears the form data