$(window).bind("load", function(){} event

css, html, javascript

Solution

It sounds like you don't have jQuery included in the page above that code, or you do but something has taken over the `$` symbol.

Ensure jQuery is loaded prior to the code, like so (this is just one link you might use):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

And/or if you have that but something else is using the `$` symbol, you can do this with your code:

(function($) {
    $(window).bind("load", function() {
    // v----- Side note: This looks like a syntax error
       setDivHeight() {
          var left = $('#primary');
          var right = $('#secondary');

          var maxHeight = Math.max(left.height(), right.height());

          left.height(maxHeight);
          right.height(maxHeight);
       }
    });
})(jQuery);

That uses the `jQuery` symbol, passing it into a function as the `$` argument. Even if `$` is something else outside that function, within it, it will be `jQuery`.

Side note 1: Your code contains a syntax error. Perhaps you meant:

(function($) {
    $(window).bind("load", function() {
        var left = $('#primary');
        var right = $('#secondary');

        var maxHeight = Math.max(left.height(), right.height());

        left.height(maxHeight);
        right.height(maxHeight);
    });
})(jQuery);

Side note 2: The window `load` event happens very late in the load process, after all images are loaded. That may be what you want (for instance, if the height of the divs is partially dictated by images), but if not you might want to use `ready` instead (in this case, using one of its shortcuts), as it happens sooner:

jQuery(function($) {
    var left = $('#primary');
    var right = $('#secondary');

    var maxHeight = Math.max(left.height(), right.height());
    left.height(maxHeight);
    right.height(maxHeight);
});

Again, though, maybe you're waiting for the images for a reason.

Problem

Ok, so I have a parent div that contains two divs. The parent div will naturally be as tall as the tallest child div, dictated by content. However, I want the two child divs to be the same dynamic height, regardless of content. Thus, I resolved to JavaScript it. Here's what I have: ``` <!--- Make main div's same height --> <script type="text/javascript"> $(window).bind("load", function() { setDivHeight() { var left = $('#primary'); var right = $('#secondary'); var maxHeight = Math.max(left.height(), right.height()); left.height(maxHeight); right.height(maxHeight); } }); </script> ``` However, when I try to run it, I get this message in my console: `Uncaught TypeError: Property '$' of object [object Object] is not a function` I've been digging into this for about 4 hours now, and I've given up hope... Can anyone tell me what I'm doing wrong???

Original source