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

Joram Slam · Accepted Answer · 2015-11-05 10:21:59Z

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

answered Nov 5, 2015 at 10:21

Joram Slam

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DK at EME Over a year ago

I'm sorry, but it doesn't work......only console.log() is working as my previous code.

Aroniaina · Accepted Answer · 2015-11-05 10:33:02Z

1

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

answered Nov 5, 2015 at 10:33

Aroniaina

1,25213 silver badges32 bronze badges

1 Comment

DK at EME Over a year ago

I'm sorry, but it doesn't work......only console.log() is working as my previous code.

Collectives™ on Stack Overflow

jQuery resize function with css height

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related