CODEWITHSUNDEEP
jquery
Joe_Maker
Joe_Maker

Reputation: 131

Calling a (document).resize and (document).ready

I'm trying to call an equal height function using $(document).ready, though I had to call it like this, because I was getting a Type Error. 

jQuery(function($) {
$(".cols").equalHeights();
});

Instead of

$(document).ready(function() {
    $(".cols").equalHeights();
});

This works great, but I would also like the plugin to run when the page is resized, (so it will adjust to the content overflow). Below is the resize call, how can I combine it with the document ready call? 

$(".cols").resize(function(){
    $(".cols").equalHeights();
});

Upvotes: 0

Views: 901

Answers (2)

Joe_Maker
Joe_Maker

Reputation: 131

This code calls the jquery equalHeights plugin found here: http://www.cssnewbie.com/equalheights-jquery-plugin/#.UcOQiPm1HOU

It now works when the window is resized.

(function ($) {
    $(document).ready(function () {
       var cols = $(".cols");
       cols.resize(function () {
           cols.equalHeights();
        });
        cols.trigger('resize');
    });
      $(window).resize(function(){
            $(".cols").css("height","auto").equalHeights(); // maybe reset the height?
      }).resize() // trigger a resize to start off everything.
})(jQuery);

Upvotes: 1

Lloyd
Lloyd

Reputation: 29668

How about:

(function($) {
    $(document).ready(function() {
        var cols = $(".cols");

        cols.resize(function(){
            cols.equalHeights();
        });

        cols.trigger('resize');
    });
})(jQuery);

Upvotes: 6

Related Questions