JQuery Problem: $ not defined (I am trying to implement equal div heights script)

Question

I need a solution that will set the heights of two divs whose class = col to the height of the tallest one.

I found a solution here that I have used to implement this: http://www.cssnewbie.com/example/equal-heights/

This is the code that I have placed on my site:

<script language="javascript" type="text/javascript" href="jquery.js"></script>
<script>
function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($("div.col"));
});
</script>

Unfortunately, this does not solve my problem. When I open the Firefox Error Console, it says me "$ is not defined"

$(".col") should not be the problem right? When I run the command $$(".col") in Firebug Console it returns my two columns just fine.

Please help me with this, as it is driving me crazy! Thank you for your help.

Answer 1

The correct script tag attribute for indicating the location of an external script file is src, not href.

So instead of

<script language="javascript" type="text/javascript" href="jquery.js"></script>

You should use

<script language="javascript" type="text/javascript" src="jquery.js"></script>

Check out this page at W3Schools for more info about the script tag