How to recalculate css with jQuery window resize?


Tags: javascript,jquery,css

Problem :

I'm currently trying to recalculate the height of the li during window resize/scrolling inwards or outwards, but for some reason when the page loads it will no longer re-calculate the height and set the ul to it's child height.

This is the code that I wrote to check the height and set the height to it's parent.

  var ulHeight = $(".carousel__slider li").outerHeight();
  $( window ).resize(function() {
        $(".carousel__slider > ul").height(ulHeight);
  });
  $(window).trigger('resize');

How can I make jQuery resize recalculate the height on window resize? I've created the exact exemple that I'm using on my site now.

https://jsfiddle.net/va5hpL0r/5/



Solution :

 $( window ).resize(function() {
        ulHeight = $(".carousel__slider li").outerHeight();
        $(".carousel__slider > ul").height(ulHeight);
  });

calculate height on resizing https://jsfiddle.net/dnL0neux/


    CSS Howto..

    How to get background img to show up in :after selector?

    How can I make DIVs within a display: table-cell fill the cell?

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    How do I provide navigation options on the sides of a centered logo?

    How to remove a CSS class from a Wicket component?

    How to make two divs side by side using inline-block?

    How to make sidebar always visible in the Semantic UI

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    How to increase Page Width with the Help of CSS?

    Change image src for product “showoff”

    Website layout moving slightly between pages - how to stop it

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How to use pure CSS to show an animation of one element's background and color property?

    how to strech select?

    How to debug CSS when using GWT

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to apply CSS background color to some text in a paragraph without spaces caused by line-height?

    jQuery / CSS: How to add page breaks dynamically

    How to hide element that is currently mousedover and shown via :hover css pseudo class via jQuery

    How can set text row limit using angularJs ng-repeat?

    How to dynamically remove all unwanted CSS and JS from page

    How do you set the background color for a variable height page?

    How to select the first paragraph in a div with a specific class (CSS 2)

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    How to set css styles with variables in rails if certain item is selected?

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    How to make an anchor fill the height of its containing div

    How to insert a comma in the following code

    How to make nav menu fall onto the page?

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?