jQuery resize function with css height

Question

I'm trying to set a height to a div that it's parent have. I've tried and when I use console.log() it's actually working. But the height doesn't set without a refresh.....

This is my function

// Set Hight
function fixingHeight() {
    function setHeight() {
        var windowWidth = window.innerWidth;

        var latestPostsWrapperHeight = $('#latestPosts').height();
        var tabPane = $('#latestPosts').find('.tab-pane');
        var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');

        var popularPostsWrapperHeight = $('#popularPosts').height();
        var profileWrapper = $('#popularPosts').find('.pofile-wrapper');

        if(windowWidth > 767) {
            $.each(tabPane, function() {
                $(this).height(latestPostsWrapperHeight - 70);
            });

            $.each(tabPaneLists, function() {
                $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
            });

            $.each(profileWrapper, function() {
                $(this).outerHeight(popularPostsWrapperHeight);
            });
        }

        //console.log(windowWidth);
    }setHeight();

    $(window).resize(function() {
      setHeight();
    });
}fixingHeight();

Answer 1

• To handle window resize event, call the function $(window).resize outside of the function setHeight()
• to call setHeight() on first load, use the jquery handler $(document).ready

This is the final code :

function setHeight() {
    var windowWidth = window.innerWidth;

    var latestPostsWrapperHeight = $('#latestPosts').height();
    var tabPane = $('#latestPosts').find('.tab-pane');
    var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');

    var popularPostsWrapperHeight = $('#popularPosts').height();
    var profileWrapper = $('#popularPosts').find('.pofile-wrapper');

    if(windowWidth > 767) {
        $.each(tabPane, function() {
            $(this).height(latestPostsWrapperHeight - 70);
        });

        $.each(tabPaneLists, function() {
            $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
        });

        $.each(profileWrapper, function() {
            $(this).outerHeight(popularPostsWrapperHeight);
        });
    }
    console.log(windowWidth);
}
$(document).ready(function() {
  setHeight();
});
$(window).resize(function() {
  setHeight();
});

Answer 2

• remove the function wrapper fixingHeight() , 'setHeight()' is enough
• $(window).resize dont't run because it is in a function so this is not working without calling the function wrapper, so get it outside of the function.

• as @ joram say, you can call $(document).ready when your document finish loading, so is ready.

   $(document).ready(function() { setHeight(); }); $(window).resize(function() { setHeight(); }); function setHeight() { var windowWidth = window.innerWidth; console.log(windowWidth); var latestPostsWrapperHeight = $('#latestPosts').height(); var tabPane = $('#latestPosts').find('.tab-pane'); var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a'); var popularPostsWrapperHeight = $('#popularPosts').height(); var profileWrapper = $('#popularPosts').find('.pofile-wrapper'); if(windowWidth > 767) { $.each(tabPane, function() { $(this).height(latestPostsWrapperHeight - 70); }); $.each(tabPaneLists, function() { $(this).height((latestPostsWrapperHeight - 70) / 5 - 1); }); $.each(profileWrapper, function() { $(this).outerHeight(popularPostsWrapperHeight); }); } }