CODEWITHSUNDEEP
javascriptjqueryhtmlcssresize
DK at EME
DK at EME

Reputation: 11

jQuery resize function with css height

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

Upvotes: 1

Views: 54

Answers (2)

Aroniaina
Aroniaina

Reputation: 1252

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

Upvotes: 1

Joram Slam
Joram Slam

Reputation: 11

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

Upvotes: 1

Related Questions