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

I am having difficulty retrieving the JSON object that was sent by the servlet

Guide to dynamically refreshing a section of the webpage while fetching data from the database

What is the best way to calculate the total of all the prices listed in the span class="total"?

Refreshing an AJAX call automatically in Knockout JS

Displaying specific data points

Adjust input quantities for product variations in Woocommerce

Ways to display the main image on a blog post

Retrieve the input value from a Bootstrap Form Input

Toggle Jquery feature will dynamically add the "required" attribute to the input field when the specified div is visible, and it will automatically remove the attribute when the div

Enhance your interface with stunning JQuery code snippets

Issue encountered when attempting to push jQuery AJAX requests into an array

"Creating a duplicate of an element by utilizing the `next`

The .ajaxSubmit function in jquery.form.js seems to be malfunctioning when using the data option

Tips for implementing automatic line wrapping in a PDF document using React-PDF

Retrieve data using AJAX and dynamically show it on an element using CodeIgniter

Having trouble making an Ajax request using the Yahoo API?

Toggle Visibility of Elements with Javascript and Html

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

Form with multiple select options in Rails

Adjusting Text Color on Buttons