TypeError: cannot read property 'css' of null

Question

I am trying to set the minimum-height of my div element by referring to its class name but it comes back with an error: TypeError: cannot read property 'css' of null.

HTML element:

<div class="container contentContainer" id="topContainer">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" id="topRow">
                <p class="bold">Please scroll down for more information </p>
            </div>
        </div>
    </div>

Javascript:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script>
    $(function () {
        var x = document.getElementsByClassName("contentContainer");
        alert(x);
        if(x != null)
        {
            $(".contentContainer").css('min-height',$(window).height());
        }
    });
</script>

Any suggestions as to why am I getting this error? Kindly let me know.

The problem occurs when I include my external javascript file:

<!-- <script type="text/javascript" src="js/monthly.js"></script> -->

Answer 1

You're loading jQuery and Bootstrap at the same time and they both clobber the $ symbol; to use only jQuery you would use the canonical name:

jQuery(".contentContainer")
    .css('min-height', jQuery(window).height());

Or, use a wrapper:

jQuery(function($) {
    $(".contentContainer").css('min-height',$(window).height());
});