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

Question

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

Lloyd · Answer 1 · 2013-06-19T15:14:24.803

6

How about:

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

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

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

edited Jun 19 '13 at 15:14

answered Jun 19 '13 at 14:29

Lloyd

29,197
4
84
98

3

Yes, though the three selectors aren't all necessary. One would be sufficient. – lonesomeday Jun 19 '13 at 14:30
Ah ok, ye i'm pretty new to jQuery, just was a bit unsure of the syntax – Joe_Maker Jun 19 '13 at 14:33
You can chain the `trigger` call as well ;) – mekwall Jun 19 '13 at 14:34
@Joe_Maker I recommend you to check out [jQuery Fundamentals](http://jqfundamentals.com/) – mekwall Jun 19 '13 at 14:35
@MarcusEkwall I've never really liked chaining personally. – Lloyd Jun 19 '13 at 14:36
@Lloyd It falls into the principles of DRY – mekwall Jun 19 '13 at 14:39
I'm getting a Type Error on equalHeights again. – Joe_Maker Jun 19 '13 at 14:43
Are you sure equalHeights exists? – Lloyd Jun 19 '13 at 14:47
Yes, i'm linking to it in the head after the jQuery library. it was working before with just: jQuery(function($) { $(".cols").equalHeights(); }); But after combining it with the resize, it has returned the Type Error – Joe_Maker Jun 19 '13 at 14:54
You shouldn't need to use both `jQuery` AND `$` unless you're altering the meaning of `$` later. It's also global so you shouldn't need to pass it through to the function :/ – Lloyd Jun 19 '13 at 15:03
Hmm that was the solution here: http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function I'll try to figure it out – Joe_Maker Jun 19 '13 at 15:11
@Joe_Maker Yes because `$` was not available, probably through `noConflict()`. They simply pass through `jQuery` for use as `$`, I've edited my code to show something similar. – Lloyd Jun 19 '13 at 15:15
That did the trick, thank you. I understand why it wasn't working now. – Joe_Maker Jun 19 '13 at 15:22
@Joe_Maker, why don't you post your code as a new answer, instead of editing this one? – Ferdinand.kraft Jun 20 '13 at 23:28

score 1 · Answer 2 · answered Jun 20 '13 at 23:31

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

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

2 Answers2

Linked

Related